Merge pull request #507 from alphagov/deduplicate-legends

De-duplicate legends/headings
alphagov · Jul 3, 2017 · 115ea57 · 115ea57
2 parents 1d72d20 + f1398c7
commit 115ea57
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 49 deletions.
diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html
@@ -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" %}

diff --git a/app/views/examples/example_radios_checkboxes.html b/app/views/examples/example_radios_checkboxes.html
@@ -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>
 
@@ -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?
+              </h1>
             </legend>
 
             <div class="multiple-choice">
@@ -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">
@@ -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>
 

diff --git a/app/views/snippets/form_checkboxes.html b/app/views/snippets/form_checkboxes.html
@@ -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>
 

diff --git a/app/views/snippets/form_inset_checkboxes.html b/app/views/snippets/form_inset_checkboxes.html
@@ -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>
 

diff --git a/app/views/snippets/form_inset_radios.html b/app/views/snippets/form_inset_radios.html
@@ -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">

diff --git a/app/views/snippets/form_radio_buttons.html b/app/views/snippets/form_radio_buttons.html
@@ -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">

diff --git a/app/views/snippets/form_radio_buttons_inline.html b/app/views/snippets/form_radio_buttons_inline.html
@@ -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">

diff --git a/app/views/snippets/form_radio_inline_yes_no.html b/app/views/snippets/form_radio_inline_yes_no.html
@@ -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">