Merge pull request #102 from material-components/textfield-host-label

Update text field to use host label
material-components · May 4, 2020 · bd84faf · bd84faf
2 parents 50c53a6 + 38669b7
commit bd84faf
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 67 deletions.
diff --git a/mdc-101/complete/index.html b/mdc-101/complete/index.html
@@ -25,16 +25,16 @@ <h1>SHRINE</h1>
   </section>
 
   <form action="home.html">
-    <div class="mdc-text-field username">
-      <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
-      <label class="mdc-floating-label" for="username-input">Username</label>
+    <label class="mdc-text-field username">
+      <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
+      <span class="mdc-floating-label" id="username-label">Username</span>
       <div class="mdc-line-ripple"></div>
-    </div>
-    <div class="mdc-text-field password">
-      <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
-      <label class="mdc-floating-label" for="password-input">Password</label>
+    </label>
+    <label class="mdc-text-field password">
+      <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
+      <span class="mdc-floating-label" id="password-label">Password</span>
       <div class="mdc-line-ripple"></div>
-    </div>
+    </label>
     <div class="button-container">
       <button type="button" class="mdc-button cancel">
         <div class="mdc-button__ripple"></div>

diff --git a/mdc-102/complete/index.html b/mdc-102/complete/index.html
@@ -25,16 +25,16 @@ <h1>SHRINE</h1>
   </section>
 
   <form action="home.html">
-    <div class="mdc-text-field username">
-      <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
-      <label class="mdc-floating-label" for="username-input">Username</label>
+    <label class="mdc-text-field username">
+      <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
+      <span class="mdc-floating-label" id="username-label">Username</span>
       <div class="mdc-line-ripple"></div>
-    </div>
-    <div class="mdc-text-field password">
-      <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
-      <label class="mdc-floating-label" for="password-input">Password</label>
+    </label>
+    <label class="mdc-text-field password">
+      <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
+      <span class="mdc-floating-label" id="password-label">Password</span>
       <div class="mdc-line-ripple"></div>
-    </div>
+    </label>
     <div class="button-container">
       <button type="button" class="mdc-button cancel">
         <div class="mdc-button__ripple"></div>

diff --git a/mdc-102/starter/index.html b/mdc-102/starter/index.html
@@ -25,16 +25,16 @@ <h1>SHRINE</h1>
   </section>
 
   <form action="home.html">
-    <div class="mdc-text-field username">
-      <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
-      <label class="mdc-floating-label" for="username-input">Username</label>
+    <label class="mdc-text-field username">
+      <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
+      <span class="mdc-floating-label" id="username-label">Username</span>
       <div class="mdc-line-ripple"></div>
-    </div>
-    <div class="mdc-text-field password">
-      <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
-      <label class="mdc-floating-label" for="password-input">Password</label>
+    </label>
+    <label class="mdc-text-field password">
+      <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
+      <span class="mdc-floating-label" id="password-label">Password</span>
       <div class="mdc-line-ripple"></div>
-    </div>
+    </label>
     <div class="button-container">
       <button type="button" class="mdc-button cancel">
         <div class="mdc-button__ripple"></div>

diff --git a/mdc-103/complete/index.html b/mdc-103/complete/index.html
@@ -25,16 +25,16 @@ <h1>SHRINE</h1>
   </section>
 
   <form action="home.html">
-    <div class="mdc-text-field username">
-      <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
-      <label class="mdc-floating-label" for="username-input">Username</label>
+    <label class="mdc-text-field username">
+      <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
+      <span class="mdc-floating-label" id="username-label">Username</span>
       <div class="mdc-line-ripple"></div>
-    </div>
-    <div class="mdc-text-field password">
-      <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
-      <label class="mdc-floating-label" for="password-input">Password</label>
+    </label>
+    <label class="mdc-text-field password">
+      <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
+      <span class="mdc-floating-label" id="password-label">Password</span>
       <div class="mdc-line-ripple"></div>
-    </div>
+    </label>
     <div class="button-container">
       <button type="button" class="mdc-button cancel">
         <div class="mdc-button__ripple"></div>

diff --git a/mdc-103/starter/index.html b/mdc-103/starter/index.html
@@ -25,16 +25,16 @@ <h1>SHRINE</h1>
   </section>
 
   <form action="home.html">
-    <div class="mdc-text-field username">
-      <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
-      <label class="mdc-floating-label" for="username-input">Username</label>
+    <label class="mdc-text-field username">
+      <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
+      <span class="mdc-floating-label" id="username-label">Username</span>
       <div class="mdc-line-ripple"></div>
-    </div>
-    <div class="mdc-text-field password">
-      <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
-      <label class="mdc-floating-label" for="password-input">Password</label>
+    </label>
+    <label class="mdc-text-field password">
+      <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
+      <span class="mdc-floating-label" id="password-label">Password</span>
       <div class="mdc-line-ripple"></div>
-    </div>
+    </label>
     <div class="button-container">
       <button type="button" class="mdc-button cancel">
         <div class="mdc-button__ripple"></div>

diff --git a/mdc-111/complete/index.html b/mdc-111/complete/index.html
@@ -18,35 +18,35 @@
     <form method="post" action="." id="crane-shipping-form">
       <div class="crane-row">
         <div class="crane-field">
-          <div class="mdc-text-field">
-            <input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
-            <label class="mdc-floating-label" for="crane-name-input">
+          <label class="mdc-text-field">
+            <input class="mdc-text-field__input" aria-labelledby="crane-name-label" type="text" required autofocus>
+            <span class="mdc-floating-label" id="crane-name-label">
               Name
-            </label>
+            </span>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
       </div>
       <div class="crane-row">
         <div class="crane-field">
-          <div class="mdc-text-field">
-            <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
-            <label class="mdc-floating-label" for="crane-address-input">
+          <label class="mdc-text-field">
+            <input class="mdc-text-field__input" aria-labelledby="crane-address-label" type="text" required>
+            <span class="mdc-floating-label" id="crane-address-label">
               Address
-            </label>
+            </span>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
       </div>
       <div class="crane-row">
         <div class="crane-field">
-          <div class="mdc-text-field">
-            <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
-            <label class="mdc-floating-label" for="crane-city-input">
+          <label class="mdc-text-field">
+            <input class="mdc-text-field__input" aria-labelledby="crane-city-label" type="text" required>
+            <span class="mdc-floating-label" id="crane-city-label">
               City
-            </label>
+            </span>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
       </div>
       <div class="crane-row">

diff --git a/mdc-111/starter/index.html b/mdc-111/starter/index.html
@@ -17,26 +17,26 @@
     <form method="post" action="." id="crane-shipping-form">
       <div class="crane-row">
         <div class="crane-field">
-          <input class="crane-input" id="crane-name-input" type="text" required autofocus>
-          <label class="crane-label" for="crane-name-input">
+          <input class="crane-input" aria-labelledby="crane-name-label" type="text" required autofocus>
+          <span class="crane-label" id="crane-name-label">
             Name
-          </label>
+          </span>
         </div>
       </div>
       <div class="crane-row">
         <div class="crane-field">
-          <input class="crane-input" id="crane-address-input" type="text" required>
-          <label class="crane-label" for="crane-address-input">
+          <input class="crane-input" aria-labelledby="crane-address-label" type="text" required>
+          <span class="crane-label" id="crane-address-label">
             Address
-          </label>
+          </span>
         </div>
       </div>
       <div class="crane-row">
         <div class="crane-field">
-          <input class="crane-input" id="crane-city-input" type="text" required>
-          <label class="crane-label" for="crane-city-input">
+          <input class="crane-input" aria-labelledby="crane-city-label" type="text" required>
+          <span class="crane-label" id="crane-city-label">
             City
-          </label>
+          </span>
         </div>
       </div>
       <div class="crane-row">
@@ -104,11 +104,11 @@
             Note: `pattern="[0-9]*"` tells Safari on iPhone to display a large numeric keypad without decimal points.
             See https://www.filamentgroup.com/lab/type-number.html
           -->
-          <input class="crane-input" id="crane-zip-code-input"
+          <input class="crane-input" aria-labelledby="crane-zip-code-label"
                  type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
-          <label class="crane-label" for="crane-zip-code-input">
+          <span class="crane-label" id="crane-zip-code-label">
             ZIP Code
-          </label>
+          </span>
         </div>
       </div>
       <div class="crane-row crane-row--submit">