Added headings to <legend> elements

https://twitter.com/stevefaulkner/status/919896833241026560

Author: ericwbailey

partials/section.forms.hbs

@@ -3,7 +3,9 @@
 
     <form>
         <fieldset id="subsection__text-input" role="region" aria-labelledby="subtitle__text-input"><!-- Start of #subsection__text-input -->
-            <legend id="subtitle__text-input" role="heading" aria-level="3">Text Input</legend>
+            <legend>
+                <h3 id="subtitle__text-input">Text Input</h3>
+            </legend>
 
             <label for="input__text">
                 Text
@@ -160,7 +162,9 @@
         </fieldset><!-- End of #subsection__text-input -->
 
         <fieldset id="subsection__non-text-input" role="region" aria-labelledby="subtitle__non-text-input"><!-- Start of #subsection__non-text-input -->
-            <legend id="subtitle__non-text-input" role="heading" aria-level="3">Non-text Input</legend>
+            <legend>
+                <h3 id="subtitle__non-text-input">Non-text Input</h3>
+            </legend>
 
             <label for="input__color">
                 Color
@@ -189,7 +193,9 @@
         </fieldset><!-- End of #subsection__non-text-input -->
 
         <fieldset id="subsection__select" role="region" aria-labelledby="subtitle__select"><!-- Start of #subsection__select -->
-            <legend id="subtitle__select" role="heading" aria-level="3">Select</legend>
+            <legend>
+                <h3 id="subtitle__select">Select</h3>
+            </legend>
 
             <label for="input__select">
                 Select
@@ -241,7 +247,9 @@
         </fieldset><!-- End of #subsection__select -->
 
         <fieldset id="subsection__checkboxes-and-radios" role="region" aria-labelledby="subtitle__checkboxes-and-radio-buttons"><!-- Start of #subsection__checkboxes-and-radios -->
-            <legend id="subtitle__checkboxes-and-radio-buttons" role="heading" aria-level="3">Checkboxes and Radio Buttons</legend>
+            <legend>
+                <h3 id="subtitle__checkboxes-and-radio-buttons">Checkboxes and Radio Buttons</h3>
+            </legend>
 
             <label for="input__checkbox">
                 <input
@@ -363,7 +371,9 @@
         </fieldset><!-- End of #subsection__checkboxes-and-radios -->
 
         <fieldset id="subsection__buttons" role="region" aria-labelledby="subtitle__buttons"><!-- Start of #subsection__buttons -->
-            <legend id="subtitle__buttons" role="heading" aria-level="3">Buttons</legend>
+            <legend>
+                <h3 id="subtitle__buttons">Buttons</h3>
+            </legend>
 
             <button>
                 Button
@@ -419,7 +429,9 @@
         </fieldset><!-- End of #subsection__buttons -->
 
         <fieldset id="subsection__output" role="region" aria-labelledby="subtitle__output"><!-- Start of #subsection__output -->
-            <legend id="subtitle__output" role="heading" aria-level="3">Output</legend>
+            <legend>
+                <h3 id="subtitle__output">Output</h3>
+            </legend>
 
             <output
                 for="output"
@@ -442,7 +454,9 @@
         </fieldset><!-- End of #subsection__output -->
 
         <fieldset id="subsection__lockup" role="region" aria-labelledby="subtitle__lockup"><!-- Start of #subsection__lockup -->
-            <legend id="subtitle__lockup" role="heading" aria-level="3">Lockup</legend>
+            <legend>
+                <h3 id="subtitle__lockup">Lockup</h3>
+            </legend>
 
             <label for="input__lockup">
                 Your Name
@@ -465,7 +479,9 @@
         </fieldset><!-- End of #subsection__lockup -->
 
         <fieldset id="subsection__states-and-validation" role="region" aria-labelledby="subtitle__states-and-validation"><!-- Start of #subsection__states-and-validation -->
-            <legend id="subtitle__states-and-validation" role="heading" aria-level="3">States and Validation</legend>
+            <legend>
+                <h3 id="subtitle__states-and-validation">States and Validation</h3>
+            </legend>
             <div id="subsection__input" role="region" aria-labelledby="subtitle__input"><!-- Start of #subsection__input -->
                 <h4 id="subtitle__input">Input</h4>
                 <label for="input__required">
@@ -590,7 +606,9 @@
         </fieldset><!-- End of #subsection__states-and-validation -->
 
         <fieldset role="region" aria-labelledby="subtitle__autocomplete" id="subsection__autocomplete"><!-- Start of #subsection__autocomplete -->
-            <legend id="subtitle__autocomplete" role="heading" aria-level="3">Autocomplete</legend>
+            <legend>
+                <h3 id="subtitle__autocomplete">Autocomplete</h3>
+            </legend>
 
             <label for="input__autocomplete-on">
                 On (Browser automatically completes)