fix(textfield): change root element to <label> (#5439)

* Project import generated by Copybara. PiperOrigin-RevId: 288775969 * docs: update docs with text field host label change Co-authored-by: Material Web Copybara Robot <[email protected]>
material-components · Jan 22, 2020 · d8d9502 · d8d9502
1 parent 1504962
commit d8d9502
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 140 deletions.
diff --git a/README.md b/README.md
@@ -40,11 +40,11 @@ Material Components for the web is the successor to [Material Design Lite](https
 <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
 
 <!-- Render textfield component -->
-<div 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>
+<label class="mdc-text-field">
+  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
+  <span class="mdc-floating-label" id="my-label">Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 
 <!-- Required MDC Web JavaScript library -->
 <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
@@ -71,11 +71,11 @@ npm install @material/textfield
 Sample usage of text field component. Please see [MDC Textfield](packages/mdc-textfield) component page for more options.
 
 ```html
-<div 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>
+<label class="mdc-text-field">
+  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
+  <span class="mdc-floating-label" id="my-label">Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 #### CSS

diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
@@ -98,11 +98,11 @@ MDL:
 MDC Web:
 
 ```html
-<div class="mdc-text-field">
-  <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-floating-label">Input Label</label>
+<label class="mdc-text-field">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label">
+  <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 In MDC Web, the DOM you specify must be complete; unlike MDL, the library will not create any missing elements for you.
@@ -124,11 +124,11 @@ For every component that you want to automatically initialize, set the `data-mdc
 element, with the component’s class name as the value. For example:
 
 ```html
-<div 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>
+<label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label">
+  <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 Auto-initialization needs to be triggered explicitly, but doing so is very straightforward.

diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
@@ -32,11 +32,11 @@ attribute to the root element with its value set to the component's JavaScript c
 properly.
 
 ```html
-<div 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>
+<label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label">
+  <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 
 <!-- at the bottom of the page -->
 <script type="text/javascript">
@@ -52,11 +52,11 @@ When `mdc-auto-init` attaches a component to an element, it assign that instance
 using a property whose name is the value of `data-mdc-auto-init`. For example, given
 
 ```html
-<div 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>
+<label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="label">
+  <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 Once `mdc.autoInit()` is called, you can access the component instance via an `MDCTextField`
@@ -71,9 +71,9 @@ document.querySelector('.mdc-text-field').MDCTextField.disabled = true;
 If you decide to add new components into the DOM after the initial `mdc.autoInit()`, you can make subsequent calls to `mdc.autoInit()`. This will not reinitialize existing components. This works since mdc-auto-init will add the `data-mdc-auto-init-state="initialized"` attribute, which tracks if the component has already been initialized. After calling `mdc.autoInit()` your component will then look like:
 
 ```html
-<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" data-mdc-auto-init-state="initialized">
+<label class="mdc-text-field" data-mdc-auto-init="MDCTextField" data-mdc-auto-init-state="initialized">
   ...
-</div>
+</label>
 ```
 
 ### Using as a standalone module
@@ -106,9 +106,9 @@ mdcAutoInit.register('My amazing text field!!!', MDCTextField);
 ```
 
 ```html
-<div class="mdc-text-field" data-mdc-auto-init="My amazing text field!!!">
+<label class="mdc-text-field" data-mdc-auto-init="My amazing text field!!!">
   <!-- ... -->
-</div>
+</label>
 <script>window.mdc.autoInit();</script>
 ```
 

diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
@@ -32,7 +32,7 @@ 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="my-label-id">Hint text</span>
 ```
 
 ### Styles
@@ -49,23 +49,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

diff --git a/packages/mdc-notched-outline/README.md b/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>

diff --git a/packages/mdc-select/README.md b/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>

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -32,11 +32,11 @@ npm install @material/textfield
 ### HTML Structure
 
 ```html
-<div 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>
+<label class="mdc-text-field">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
+  <span class="mdc-floating-label" id="my-label-id">Hint text</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 > NOTE: For more details, see [MDC Line Ripple](../mdc-line-ripple/README.md)
@@ -65,12 +65,12 @@ const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
 Full width text fields are useful for in-depth tasks or entering complex information.
 
 ```html
-<div class="mdc-text-field mdc-text-field--fullwidth">
+<label class="mdc-text-field mdc-text-field--fullwidth">
   <input class="mdc-text-field__input"
          type="text"
          placeholder="Full-Width Text Field"
          aria-label="Full-Width Text Field">
-</div>
+</label>
 ```
 
 > _NOTE_: Do not use `mdc-text-field--outlined` to style a full width text field.
@@ -81,31 +81,31 @@ included as part of the DOM structure of a full width text field.
 ### Textarea
 
 ```html
-<div class="mdc-text-field mdc-text-field--textarea">
-  <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
+<label class="mdc-text-field mdc-text-field--textarea">
+  <textarea class="mdc-text-field__input" aria-labelledby="my-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>
+      <label class="mdc-floating-label" id="my-label-id">Textarea Label</label>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 ### Outlined
 
 ```html
-<div class="mdc-text-field mdc-text-field--outlined">
-  <input type="text" id="tf-outlined" class="mdc-text-field__input">
+<label class="mdc-text-field mdc-text-field--outlined">
+  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
   <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 class="mdc-floating-label" id="my-label-id">Your Name</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 See [here](../mdc-notched-outline/) for more information on using the notched outline sub-component.
@@ -117,11 +117,11 @@ See [here](../mdc-notched-outline/) for more information on using the notched ou
 To disable the text field, add the `disabled` attribute to the `<input>` element and add the `mdc-text-field--disabled` class to the `mdc-text-field` element.
 
 ```html
-<div 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>
+<label class="mdc-text-field mdc-text-field--disabled">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
+  <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 ### Text Field without label
@@ -132,34 +132,34 @@ Add class name `mdc-text-field--no-label` and remove the label element from the
 #### Filled
 
 ```html
-<div class="mdc-text-field mdc-text-field--no-label">
-  <input type="text" class="mdc-text-field__input" placeholder="Placeholder text" aria-label="Label">
+<label class="mdc-text-field mdc-text-field--no-label">
+  <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 #### Outlined
 
 ```html
-<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
-  <input type="text" class="mdc-text-field__input" aria-label="Label">
+<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
+  <input class="mdc-text-field__input" type="text" aria-label="Label">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 #### Textarea
 
 ```html
-<div class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
+<label class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
   <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 ### Text Field with Helper Text
@@ -169,13 +169,16 @@ and disappears on input field blur by default, or it can be persistent. Helper t
 which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for more information on using helper text.
 
 ```html
-<div 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>
+<label class="mdc-text-field">
+  <input class="mdc-text-field__input" type="text"
+         aria-labelledby="my-label-id"
+         aria-controls="my-helper-id"
+         aria-describedby="my-helper-id">
+  <span class="mdc-floating-label" id="my-label-id">My Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 <div class="mdc-text-field-helper-line">
-  <div class="mdc-text-field-helper-text">helper text</div>
+  <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
 </div>
 ```
 
@@ -186,11 +189,11 @@ Character counter should be rendered inside `.mdc-text-field-helper-line` elemen
 See [here](character-counter/) for more information on using character counter.
 
 ```html
-<div 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>
+<label class="mdc-text-field">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
+  <span class="mdc-floating-label" id="my-label-id">My Label</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 <div class="mdc-text-field-helper-line">
   <div class="mdc-text-field-character-counter">0 / 10</div>
 </div>
@@ -202,17 +205,17 @@ The layout structure of character counter for multi-line text field (textarea) i
 inside of text field component.
 
 ```html
-<div class="mdc-text-field mdc-text-field--textarea">
+<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="my-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 class="mdc-floating-label" id="my-label-id">Textarea Label</span>
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 Helper text and Character counter are optional subcomponents of text field that can co-exist independently.
@@ -229,11 +232,11 @@ well as interaction targets. See [here](icon/) for more information on using ico
 by HTML5's form validation API.
 
 ```html
-<div 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>
+<label class="mdc-text-field">
+  <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
+  <span class="mdc-floating-label" id="my-label-id">Password</span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 `MDCTextFieldFoundation` automatically appends an asterisk to the label text if the required attribute is set.
@@ -246,13 +249,13 @@ ensure that the label moves out of the way of the text field's value and prevent
 Un-styled Content (**FOUC**).
 
 ```html
-<div 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">
+<label class="mdc-text-field">
+  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" value="Pre-filled value">
+  <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
     Label in correct place
-  </label>
+  </span>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 ## Style Customization