chore: update docs to use one label

Author: asyncliz

README.md

@@ -41,8 +41,8 @@ Material Components for the web is the successor to [Material Design Lite](https
 
 <!-- Render textfield component -->
 <label class="mdc-text-field">
-  <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-floating-label" for="my-text-field">Label</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span class="mdc-floating-label" id="label-id">Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 
@@ -72,8 +72,8 @@ Sample usage of text field component. Please see [MDC Textfield](packages/mdc-te
 
 ```html
 <label class="mdc-text-field">
-  <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-floating-label" for="my-text-field">Label</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span class="mdc-floating-label" id="label-id">Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```

docs/migrating-from-mdl.md

@@ -99,8 +99,8 @@ MDC Web:
 
 ```html
 <label class="mdc-text-field">
-  <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-floating-label">Input Label</label>
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label-id">
+  <span id="label-id" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```
@@ -125,8 +125,8 @@ element, with the component’s class name as the value. For example:
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-floating-label">Input Label</label>
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label-id">
+  <span id="label-id" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```

packages/mdc-auto-init/README.md

@@ -33,8 +33,8 @@ properly.
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-floating-label">Input Label</label>
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label-id">
+  <span id="label-id" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 
@@ -53,8 +53,8 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-floating-label">Input Label</label>
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label-id">
+  <span id="label-id" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```

packages/mdc-floating-label/README.md

@@ -32,9 +32,11 @@ npm install @material/floating-label
 ### HTML Structure
 
 ```html
-<label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
+<span class="mdc-floating-label" id="label-id">Hint text</span>
 ```
 
+> NOTE: Use `aria-labelledby` with the label's ID for accessibility.
+
 ### Styles
 
 ```scss
@@ -49,23 +51,6 @@ import {MDCFloatingLabel} from '@material/floating-label';
 const floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));
 ```
 
-## Variants
-
-### Avoid Dynamic ID Generation
-
-If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign
-a unique `id` to each `<input>` by wrapping `mdc-text-field__input` within a `<label>`:
-
-```html
-<label class="mdc-text-field">
-  <input type="text" class="mdc-text-field__input">
-  <span class="mdc-floating-label">Hint Text</span>
-  <div class="mdc-text-field__bottom-line"></div>
-</label>
-```
-
-> NOTE: This method also works with `<select>`.
-
 ## Style Customization
 
 ### CSS Classes

packages/mdc-notched-outline/README.md

@@ -36,7 +36,7 @@ npm install @material/notched-outline
 <div class="mdc-notched-outline">
   <div class="mdc-notched-outline__leading"></div>
   <div class="mdc-notched-outline__notch">
-    <label class="mdc-floating-label">Label</label>
+    <span class="mdc-floating-label">Label</span>
   </div>
   <div class="mdc-notched-outline__trailing"></div>
 </div>

packages/mdc-select/README.md

@@ -149,7 +149,7 @@ same.
     <div class="mdc-notched-outline">
       <div class="mdc-notched-outline__leading"></div>
       <div class="mdc-notched-outline__notch">
-        <label id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</label>
+        <span id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</span>
       </div>
       <div class="mdc-notched-outline__trailing"></div>
     </div>

packages/mdc-textfield/README.md

@@ -33,8 +33,8 @@ npm install @material/textfield
 
 ```html
 <label class="mdc-text-field">
-  <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span class="mdc-floating-label" for="label-id">Hint text</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```
@@ -82,11 +82,11 @@ included as part of the DOM structure of a full width text field.
 
 ```html
 <label class="mdc-text-field mdc-text-field--textarea">
-  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
+  <textarea class="mdc-text-field__input" aria-labelledby="label-id" rows="8" cols="40"></textarea>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
-      <label for="textarea" class="mdc-floating-label">Textarea Label</label>
+      <span id="label-id" class="mdc-floating-label">Textarea Label</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
@@ -97,11 +97,11 @@ included as part of the DOM structure of a full width text field.
 
 ```html
 <label class="mdc-text-field mdc-text-field--outlined">
-  <input type="text" id="tf-outlined" class="mdc-text-field__input">
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
-      <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
+      <span for="label-id" class="mdc-floating-label">Your Name</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
@@ -118,8 +118,8 @@ To disable the text field, add the `disabled` attribute to the `<input>` element
 
 ```html
 <label class="mdc-text-field mdc-text-field--disabled">
-  <input type="text" id="disabled-text-field" class="mdc-text-field__input" disabled>
-  <label class="mdc-floating-label" for="disabled-text-field">Disabled text field</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input" disabled>
+  <span class="mdc-floating-label" id="label-id">Disabled text field</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```
@@ -170,8 +170,8 @@ which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for mo
 
 ```html
 <label class="mdc-text-field">
-  <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-floating-label" for="my-text-field">My Label</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span class="mdc-floating-label" id="label-id">My Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 <div class="mdc-text-field-helper-line">
@@ -187,8 +187,8 @@ See [here](character-counter/) for more information on using character counter.
 
 ```html
 <label class="mdc-text-field">
-  <input type="text" id="my-text-field" class="mdc-text-field__input" maxlength="10">
-  <label class="mdc-floating-label" for="my-text-field">My Label</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input" maxlength="10">
+  <span class="mdc-floating-label" id="label-id">My Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
 <div class="mdc-text-field-helper-line">
@@ -204,11 +204,11 @@ inside of text field component.
 ```html
 <label class="mdc-text-field mdc-text-field--textarea">
   <div class="mdc-text-field-character-counter">0 / 140</div>
-  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40" maxlength="140"></textarea>
+  <textarea class="mdc-text-field__input" aria-labelledby="label-id" rows="8" cols="40" maxlength="140"></textarea>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
-      <label for="textarea" class="mdc-floating-label">Textarea Label</label>
+      <span id="label-id" class="mdc-floating-label">Textarea Label</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
@@ -230,8 +230,8 @@ by HTML5's form validation API.
 
 ```html
 <label class="mdc-text-field">
-  <input type="password" id="pw" class="mdc-text-field__input" required minlength=8>
-  <label for="pw" class="mdc-floating-label">Password</label>
+  <input type="password" aria-labelledby="label-id" class="mdc-text-field__input" required minlength=8>
+  <span id="label-id" class="mdc-floating-label">Password</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```
@@ -247,10 +247,10 @@ Un-styled Content (**FOUC**).
 
 ```html
 <label class="mdc-text-field">
-  <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
-  <label class="mdc-floating-label mdc-floating-label--float-above" for="pre-filled">
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input" value="Pre-filled value">
+  <span class="mdc-floating-label mdc-floating-label--float-above" id="label-id">
     Label in correct place
-  </label>
+  </span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```

packages/mdc-textfield/helper-text/README.md

@@ -53,10 +53,11 @@ the input element.
 
 ```html
 <label class="mdc-text-field">
-  <input type="text" id="username" class="mdc-text-field__input"
+  <input type="text" class="mdc-text-field__input"
+         aria-labelledby="username-label"
          aria-controls="username-helper-text"
          aria-describedby="username-helper-text">
-  <label for="username" class="mdc-floating-label">Username</label>
+  <span id="username-label" class="mdc-floating-label">Username</span>
   <div class="mdc-line-ripple"></div>
 </label>
 <div class="mdc-text-field-helper-line">

packages/mdc-textfield/icon/README.md

@@ -66,8 +66,8 @@ In text field:
 ```html
 <label class="mdc-text-field mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
-  <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-floating-label">Your Name</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span for="label-id" class="mdc-floating-label">Your Name</span>
   <div class="mdc-line-ripple"></div>
 </label>
 ```
@@ -77,11 +77,11 @@ In outlined text field:
 ```html
 <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
-  <input type="text" id="my-input" class="mdc-text-field__input">
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
-      <label for="my-input" class="mdc-floating-label">Your Name</label>
+      <span for="label-id" class="mdc-floating-label">Your Name</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
@@ -94,8 +94,8 @@ In text field:
 
 ```html
 <label class="mdc-text-field mdc-text-field--with-trailing-icon">
-  <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-floating-label">Your Name</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span id="label-id" class="mdc-floating-label">Your Name</span>
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
 </label>
@@ -105,12 +105,12 @@ In outlined text field:
 
 ```html
 <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
-  <input type="text" id="my-input" class="mdc-text-field__input">
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
-      <label for="my-input" class="mdc-floating-label">Your Name</label>
+      <span id="label-id" class="mdc-floating-label">Your Name</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
@@ -124,8 +124,8 @@ In text field:
 ```html
 <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
   <i class="material-icons mdc-text-field__icon">phone</i>
-  <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-floating-label">Phone Number</label>
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
+  <span id="label-id" class="mdc-floating-label">Phone Number</span>
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
 </label>
@@ -136,12 +136,12 @@ In outlined text field:
 ```html
 <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
   <i class="material-icons mdc-text-field__icon">phone</i>
-  <input type="text" id="my-input" class="mdc-text-field__input">
+  <input type="text" aria-labelledby="label-id" class="mdc-text-field__input">
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">clear</i>
   <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
-      <label for="my-input" class="mdc-floating-label">Phone Number</label>
+      <span id="label-id" class="mdc-floating-label">Phone Number</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>