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.

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">

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">

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">

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;

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 {