Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

De-duplicate legends/headings #507

Merged
merged 1 commit into from
Jul 3, 2017
Merged

De-duplicate legends/headings #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/views/examples/example_form_elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,7 +561,7 @@ <h2 class="heading-medium">

<div class="form-section">
<h3 class="heading-medium">
These examples are one-question-per-page examples and use a heading for the question, with a visually hidden legend inside a fieldset.
These examples are one-question-per-page examples and use a heading for the question inside the legend of the fieldset.
</h3>
<!-- "Chunky" Radio buttons, stacked -->
{% include "snippets/form_radio_buttons.html" %}
Expand Down
36 changes: 14 additions & 22 deletions app/views/examples/example_radios_checkboxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,13 @@ <h1 class="heading-xlarge">

<form action="/" method="post" class="form">

<h1 class="heading-large">
What is your nationality?
</h1>

<div class="form-group">
<fieldset>

<legend>
<span class="visually-hidden">What is your nationality?</span>
<h1 class="heading-large">
What is your nationality?
</h1>
<span class="body-text">If you have dual nationality, select all options that are relevant to you.</span>
</legend>

Expand Down Expand Up @@ -64,15 +62,13 @@ <h1 class="heading-large">
</fieldset>
</div>

<h1 class="heading-large">
Where should we send your new<br> passport?
</h1>

<div class="form-group">
<fieldset>

<legend class="visually-hidden">
Where should we send your new passport?
<legend>
<h1 class="heading-large">
Where should we send your new passport?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this still need the line-break that was in the h1?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have removed it because I didn't understand why it was there in the first place. I think it's generally bad practice to have <br>s in a heading. I tried to find out via git blame why it was there but got lost trying to get before October 2014.

BTW, without this change, it currently looks broken on mobile because of that br:
br-in-h1

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I just found it. It was there from the beginning of the checkbox examples in bc2c6b4, so there is no further explanation as it was part of a bigger thing. Maybe @gemmaleigh knows more?

</h1>
</legend>

<div class="multiple-choice">
Expand All @@ -87,14 +83,12 @@ <h1 class="heading-large">

<div class="panel panel-border-narrow js-hidden" id="example-other-address">

<h2 class="heading-medium">
Your other address
</h2>

<fieldset>

<legend class="visually-hidden">
Your other address
<legend>
<h2 class="heading-medium">
Your other address
</h2>
</legend>

<div class="form-group form-group-compound">
Expand Down Expand Up @@ -123,15 +117,13 @@ <h2 class="heading-medium">
</fieldset>
</div>

<h1 class="heading-large">
Which part of the Housing Act was your licence issued under?
</h1>

<div class="form-group">
<fieldset>

<legend>
<span class="visually-hidden">Which part of the Housing Act was your licence issued under?</span>
<h1 class="heading-large">
Which part of the Housing Act was your licence issued under?
</h1>
<span class="body-text">Select one of the options below.</span>
</legend>

Expand Down
4 changes: 1 addition & 3 deletions app/views/snippets/form_checkboxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<h3 class="heading-medium">Which types of waste do you transport regularly?</h3>

<form>
<fieldset>

<legend>
<span class="visually-hidden">Which types of waste do you transport regularly?</span>
<h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
<span class="body-text">Select all that apply</span>
</legend>

Expand Down
8 changes: 3 additions & 5 deletions app/views/snippets/form_inset_checkboxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<h1 class="heading-medium">
What is your nationality?
</h1>

<form>
<div class="form-group">
<fieldset>

<legend>
<span class="visually-hidden">What is your nationality?</span>
<h1 class="heading-medium">
What is your nationality?
</h1>
<span class="body-text">Select all options that are relevant to you.</span>
</legend>

Expand Down
10 changes: 5 additions & 5 deletions app/views/snippets/form_inset_radios.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<h1 class="heading-medium">
How do you want to be contacted?
</h1>

<form>
<div class="form-group">
<fieldset>

<legend class="visually-hidden">How do you want to be contacted?</legend>
<legend>
<h1 class="heading-medium">
How do you want to be contacted?
</h1>
</legend>

<div class="multiple-choice" data-target="contact-by-email">
<input id="example-contact-by-email" type="radio" name="radio-contact-group" value="Yes">
Expand Down
6 changes: 3 additions & 3 deletions app/views/snippets/form_radio_buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<h1 class="heading-medium">Where do you live?</h1>

<form>
<div class="form-group">
<fieldset>

<legend class="visually-hidden">Where do you live?</legend>
<legend>
<h1 class="heading-medium">Where do you live?</h1>
</legend>

<div class="multiple-choice">
<input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
Expand Down
10 changes: 5 additions & 5 deletions app/views/snippets/form_radio_buttons_inline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<h1 class="heading-medium">
Do you already have a personal user account?
</h1>

<form>
<div class="form-group">
<fieldset class="inline">

<legend class="visually-hidden">Do you already have a personal user account?</legend>
<legend>
<h1 class="heading-medium">
Do you already have a personal user account?
</h1>
</legend>

<div class="multiple-choice">
<input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">
Expand Down
10 changes: 5 additions & 5 deletions app/views/snippets/form_radio_inline_yes_no.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<h1 class="heading-medium">
Do you yes/no ?
</h1>

<form>
<div class="form-group">
<fieldset class="inline">

<legend class="visually-hidden">Do you yes/no?</legend>
<legend>
<h1 class="heading-medium">
Do you yes/no?
</h1>
</legend>

<div class="multiple-choice" data-target="yes-and-do-next">
<input id="radio-yes-no-yes" type="radio" name="yes-no-group" value="Yes">
Expand Down