From 5805e9769ad6459752a711310f3ec188e24e6f48 Mon Sep 17 00:00:00 2001
From: Anika Henke <anika.henke@digital.cabinet-office.gov.uk>
Date: Thu, 1 Jun 2017 18:22:01 +0100
Subject: [PATCH] Move form help text into legend

Most groups of checkboxes and radio buttons within Elements
have an additional introductory help text which isn't a hint.
It's usually there to help less technical people understand
that you can select multiple checkboxes,
but can also be used for other purposes.

This moves that text into the legend to also make it accessible
to assistive technologies like screen readers.
The styling is nearly the same as before and adds a class
to the current paragraph declaration to re-use its styling.
---
 .../examples/example_radios_checkboxes.html      | 16 +++++++---------
 app/views/snippets/form_checkboxes.html          |  6 ++++--
 app/views/snippets/form_inset_checkboxes.html    |  8 ++++----
 assets/sass/elements/_elements-typography.scss   |  7 ++++++-
 assets/sass/elements/_forms.scss                 |  9 +++++++++
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/views/examples/example_radios_checkboxes.html b/app/views/examples/example_radios_checkboxes.html
index d443e85a9..0ecbc0c35 100644
--- 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">
@@ -126,15 +127,12 @@ <h1 class="heading-large">
           Which part of the Housing Act was your licence isued 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 isued under?</span>
+              <span class="body-text">Select one of the options below.</span>
             </legend>
 
             <div class="multiple-choice">
diff --git a/app/views/snippets/form_checkboxes.html b/app/views/snippets/form_checkboxes.html
index 373f71ebd..5d89d5c3d 100644
--- 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
index b56b4fb06..1f583a4d1 100644
--- 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
index 044c22ce9..cbd518b7f 100644
--- 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
index 4e3dcaaac..59e6ffbff 100644
--- a/assets/sass/elements/_forms.scss
+++ b/assets/sass/elements/_forms.scss
@@ -20,6 +20,15 @@ fieldset {
   width: 100%;
 }
 
+// Hack to let legends or elements within legends have margins in webkit browsers
+legend {
+  float: left;
+
+  & + * {
+    clear: both;
+  }
+}
+
 // Fix left hand gap in IE7 and below
 @include ie-lte(7) {
   legend {