Merge pull request #484 from alphagov/form-help-text

Move form help text into legend
alphagov · Jun 7, 2017 · ad22292 · ad22292
2 parents abaa9ec + a1b9e7b
commit ad22292
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/app/views/examples/example_radios_checkboxes.html b/app/views/examples/example_radios_checkboxes.html
@@ -31,12 +31,13 @@ <h1 class="heading-large">
           What is your nationality?
         </h1>
 
-        <p>If you have dual nationality, select all options that are relevant to you.</p>
-
         <div class="form-group">
           <fieldset>
 
-            <legend class="visually-hidden">What is your nationality?</legend>
+            <legend>
+              <span class="visually-hidden">What is your nationality?</span>
+              <span class="body-text">If you have dual nationality, select all options that are relevant to you.</span>
+            </legend>
 
             <div class="multiple-choice">
               <input type="checkbox" name="nationality_british" value="British" id="nationality_british">
@@ -123,18 +124,15 @@ <h2 class="heading-medium">
         </div>
 
         <h1 class="heading-large">
-          Which part of the Housing Act was your licence isued under?
+          Which part of the Housing Act was your licence issued under?
         </h1>
 
-        <p>
-          Select one of the options below.
-        </p>
-
         <div class="form-group">
           <fieldset>
 
-            <legend class="visually-hidden">
-              Which part of the Housing Act was your licence isued under?
+            <legend>
+              <span class="visually-hidden">Which part of the Housing Act was your licence issued under?</span>
+              <span class="body-text">Select one of the options below.</span>
             </legend>
 
             <div class="multiple-choice">

diff --git a/app/views/guide_form_elements.html b/app/views/guide_form_elements.html
@@ -194,6 +194,9 @@ <h3 class="heading-medium" id="form-fieldsets">Fieldsets and legends</h3>
   <p class="text">
     Use fieldsets to group related form controls. The first element inside a fieldset must be a <code class="code">legend</code> element which describes the group.
   </p>
+  <p class="text">
+    Any general text which is important for filling in the form and cannot be put into a <a href="#form-hint-text">hint</a>, should be in that legend (as shown in the <a href="#form-checkboxes">checkbox example</a>). But the legend shouldn't be too long either.
+  </p>
 
   <h3 class="heading-medium" id="form-select-boxes">Select boxes</h3>
   <p class="text">

diff --git a/app/views/snippets/form_checkboxes.html b/app/views/snippets/form_checkboxes.html
@@ -1,10 +1,12 @@
 <h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
-<p>Select all that apply</p>
 
 <form>
   <fieldset>
 
-    <legend class="visually-hidden">Which types of waste do you transport regularly?</legend>
+    <legend>
+      <span class="visually-hidden">Which types of waste do you transport regularly?</span>
+      <span class="body-text">Select all that apply</span>
+    </legend>
 
     <div class="multiple-choice">
       <input id="waste-type-1" name="waste-types" type="checkbox" value="waste-animal">

diff --git a/app/views/snippets/form_inset_checkboxes.html b/app/views/snippets/form_inset_checkboxes.html
@@ -1,15 +1,15 @@
 <h1 class="heading-medium">
   What is your nationality?
 </h1>
-<p>
-  Select all options that are relevant to you.
-</p>
 
 <form>
   <div class="form-group">
     <fieldset>
 
-      <legend class="visually-hidden">What is your nationality?</legend>
+      <legend>
+        <span class="visually-hidden">What is your nationality?</span>
+        <span class="body-text">Select all options that are relevant to you.</span>
+      </legend>
 
       <div class="multiple-choice">
         <input id="nationalities-british" name="nationalities" type="checkbox" value="British">

diff --git a/assets/sass/elements/_elements-typography.scss b/assets/sass/elements/_elements-typography.scss
@@ -135,7 +135,8 @@ main {
 }
 
 // Text
-p {
+p,
+.body-text {
   margin-top: em(5, 16);
   margin-bottom: em(20, 16);
 
@@ -146,6 +147,10 @@ p {
 
 }
 
+.body-text {
+  display: block;
+}
+
 // Lede, or intro text
 .lede {
   @include core-24;

diff --git a/assets/sass/elements/_forms.scss b/assets/sass/elements/_forms.scss
@@ -20,6 +20,11 @@ fieldset {
   width: 100%;
 }
 
+// Hack to let legends or elements within legends have margins in webkit browsers
+legend {
+  overflow: hidden;
+}
+
 // Fix left hand gap in IE7 and below
 @include ie-lte(7) {
   legend {