Update forms so that assistive technology users can use them

Author: NickColley

src/components/forms/checkbox-list.html

@@ -8,32 +8,32 @@
   <fieldset id="favorite_movies" class="bn">
     <legend class="fw7 mb2">Favorite Movies</legend>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="spacejam">
-      <label class="lh-copy">Space Jam</label>
+      <input class="mr2" type="checkbox" id="spacejam" value="spacejam">
+      <label for="spacejam" class="lh-copy">Space Jam</label>
     </div>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="airbud">
-      <label class="lh-copy">Air Bud</label>
+      <input class="mr2" type="checkbox" id="airbud" value="airbud">
+      <label for="airbud" class="lh-copy">Air Bud</label>
     </div>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="hocuspocus">
-      <label class="lh-copy">Hocus Pocus</label>
+      <input class="mr2" type="checkbox" id="hocuspocus" value="hocuspocus">
+      <label for="hocuspocus" class="lh-copy">Hocus Pocus</label>
     </div>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="diehard">
-      <label class="lh-copy">Die Hard</label>
+      <input class="mr2" type="checkbox" id="diehard" value="diehard">
+      <label for="diehard" class="lh-copy">Die Hard</label>
     </div>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="primer">
-      <label class="lh-copy">Primer</label>
+      <input class="mr2" type="checkbox" id="primer" value="primer">
+      <label for="primer" class="lh-copy">Primer</label>
     </div>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="proxy">
-      <label class="lh-copy">Hudsucker Proxy</label>
+      <input class="mr2" type="checkbox" id="proxy" value="proxy">
+      <label for="proxy" class="lh-copy">Hudsucker Proxy</label>
     </div>
     <div class="flex items-center mb2">
-      <input class="mr2" type="checkbox" value="homealone">
-      <label class="lh-copy">Home Alone</label>
+      <input class="mr2" type="checkbox" id="homealone" value="homealone">
+      <label for="homealone" class="lh-copy">Home Alone</label>
     </div>
   </fieldset>
 </form>

src/components/forms/input-text-label.html

@@ -7,8 +7,8 @@
 }}}
 <form class="pa4 black-80">
   <div class="measure">
-    <label for="comment" class="f6 b db mb2">Name <span class="normal black-60">(optional)</span></label>
-    <input class="input-reset ba b--black-20 pa2 mb2 db w-100" type="text">
-    <small class="f6 black-60 db mb2">Helper text for the form control.</small>
+    <label for="name" class="f6 b db mb2">Name <span class="normal black-60">(optional)</span></label>
+    <input id="name" class="input-reset ba b--black-20 pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
+    <small id="name-desc" class="f6 black-60 db mb2">Helper text for the form control.</small>
   </div>
 </form>

src/components/forms/newsletter-subscription.html

@@ -9,10 +9,10 @@
     <fieldset class="cf bn ma0 pa0">
       <legend class="pa0 f5 f4-ns mb3 black-80">Sign up for our newsletter</legend>
       <div class="cf">
-        <input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="Email_Adress" value="" id="Email_Adress">
+        <label class="clip" for="email-address">Email Address</label>
+        <input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="email-address" value="" id="email-address">
         <input class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe">
       </div>
     </fieldset>
   </form>
 </div>
-

src/components/forms/password.html

@@ -6,9 +6,9 @@
 }}}
 <form class="pa4 black-80">
   <div class="measure-narrow">
-    <label for="" class="f6 b db mb2">Password</label>
-    <input class="input-reset ba b--black-20 pa2 mb2 db w-100" type="password">
-    <small class="f6 lh-copy black-60 db mb2">
+    <label for="password" class="f6 b db mb2">Password</label>
+    <input class="input-reset ba b--black-20 pa2 mb2 db w-100" type="password" id="password" aria-describedby="password-desc">
+    <small id="password-desc" class="f6 lh-copy black-60 db mb2">
       Must be 9 characters long and contain both a number and an uppercase
       character.
     </small>

src/components/forms/textarea-label.html

@@ -7,7 +7,7 @@
 <form class="pa4 black-80">
   <div>
     <label for="comment" class="f6 b db mb2">Comments <span class="normal black-60">(optional)</span></label>
-    <textarea name="comment" class="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"></textarea>
-    <small class="f6 black-60">Helper text for a form control. Can use this text to <a href="#" class="link underline black-80 hover-blue">link to more info.</a></small>
+    <textarea id="comment" name="comment" class="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2" aria-describedby="comment-desc"></textarea>
+    <small id="comment-desc" class="f6 black-60">Helper text for a form control. Can use this text to <a href="#" class="link underline black-80 hover-blue">link to more info.</a></small>
   </div>
 </form>