From 1e921d486aee246c0eb3746bf4291b3c8872b8bb Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 13:49:20 -0800
Subject: [PATCH 1/7] fix(textfield): change root element to <label>

BREAKING CHANGE: text field's root element has changed from a `<div>` to a `<label>`
---
 .htmllintrc                                   |  1 +
 README.md                                     |  8 +-
 docs/migrating-from-mdl.md                    |  8 +-
 packages/mdc-auto-init/README.md              | 16 ++--
 packages/mdc-textfield/README.md              | 52 ++++++------
 packages/mdc-textfield/helper-text/README.md  |  4 +-
 packages/mdc-textfield/icon/README.md         | 24 +++---
 packages/mdc-textfield/icon/foundation.ts     |  1 +
 .../spec/mdc-rtl/variables/include.html       |  4 +-
 .../spec/mdc-shape/variables/override.html    |  8 +-
 .../classes/baseline-character-counter.html   | 16 ++--
 .../classes/baseline-fullwidth.html           |  6 +-
 ...per-text-persistent-character-counter.html | 16 ++--
 ...helper-text-persistent-validation-msg.html | 16 ++--
 .../baseline-helper-text-persistent.html      | 16 ++--
 .../baseline-helper-text-validation-msg.html  | 16 ++--
 .../classes/baseline-helper-text.html         | 16 ++--
 .../classes/baseline-leading-icon.html        | 16 ++--
 .../baseline-leading-trailing-icons.html      | 16 ++--
 .../mdc-textfield/classes/baseline-no-js.html | 16 ++--
 .../classes/baseline-placeholder.html         | 12 +--
 .../classes/baseline-trailing-icon.html       | 16 ++--
 .../baseline-without-label-with-icon.html     | 24 ++----
 .../classes/baseline-without-label.html       | 24 ++----
 .../spec/mdc-textfield/classes/baseline.html  | 16 ++--
 .../classes/disabled-character-counter.html   | 16 ++--
 ...helper-text-persistent-validation-msg.html | 16 ++--
 .../disabled-helper-text-persistent.html      | 16 ++--
 .../disabled-helper-text-validation-msg.html  | 16 ++--
 .../classes/disabled-helper-text.html         | 16 ++--
 .../classes/disabled-leading-icon.html        | 16 ++--
 .../disabled-leading-trailing-icons.html      | 16 ++--
 .../classes/disabled-trailing-icon.html       | 16 ++--
 .../spec/mdc-textfield/classes/disabled.html  | 16 ++--
 ...helper-text-persistent-validation-msg.html | 16 ++--
 .../focused-helper-text-persistent.html       | 16 ++--
 .../focused-helper-text-validation-msg.html   | 16 ++--
 .../classes/focused-helper-text.html          | 16 ++--
 .../classes/focused-leading-icon.html         | 16 ++--
 .../focused-leading-trailing-icons.html       | 16 ++--
 .../classes/focused-placeholder.html          |  8 +-
 .../classes/focused-trailing-icon.html        | 16 ++--
 .../spec/mdc-textfield/classes/focused.html   | 16 ++--
 .../classes/invalid-disabled.html             |  8 +-
 ...tent-validation-msg-character-counter.html | 16 ++--
 ...helper-text-persistent-validation-msg.html | 16 ++--
 ...nvalid-focused-helper-text-persistent.html | 16 ++--
 ...id-focused-helper-text-validation-msg.html | 16 ++--
 .../classes/invalid-focused-helper-text.html  | 16 ++--
 .../classes/invalid-focused-leading-icon.html | 16 ++--
 ...nvalid-focused-leading-trailing-icons.html | 16 ++--
 .../invalid-focused-trailing-icon.html        | 16 ++--
 .../classes/invalid-focused.html              | 16 ++--
 ...helper-text-persistent-validation-msg.html | 16 ++--
 .../invalid-helper-text-persistent.html       | 16 ++--
 .../invalid-helper-text-validation-msg.html   | 16 ++--
 .../classes/invalid-helper-text.html          | 16 ++--
 .../classes/invalid-leading-icon.html         | 16 ++--
 .../invalid-leading-trailing-icons.html       | 16 ++--
 .../classes/invalid-trailing-icon.html        | 16 ++--
 .../spec/mdc-textfield/classes/invalid.html   | 16 ++--
 .../classes/textarea-character-counter.html   | 16 ++--
 .../classes/textarea-disabled.html            | 16 ++--
 .../classes/textarea-focused.html             | 16 ++--
 .../classes/textarea-fullwidth.html           | 16 ++--
 .../classes/textarea-invalid.html             | 16 ++--
 .../classes/textarea-without-label.html       | 16 ++--
 .../spec/mdc-textfield/classes/textarea.html  | 16 ++--
 .../spec/mdc-textfield/issues/3332.html       |  8 +-
 .../spec/mdc-textfield/issues/4170.html       | 16 ++--
 .../mdc-textfield/mixins/density-invalid.html | 16 ++--
 .../mixins/density-leading-icon-invalid.html  | 16 ++--
 .../mixins/density-leading-icon.html          | 16 ++--
 .../spec/mdc-textfield/mixins/density.html    | 16 ++--
 .../spec/mdc-textfield/mixins/disabled-1.html | 84 +++++++++----------
 .../spec/mdc-textfield/mixins/disabled-2.html | 72 ++++++++--------
 .../mixins/outline-shape-radius.html          | 16 ++--
 .../mdc-select-icon-foundation.test.js        |  5 +-
 78 files changed, 641 insertions(+), 664 deletions(-)

diff --git a/.htmllintrc b/.htmllintrc
index 35440052c07..a792016187f 100644
--- a/.htmllintrc
+++ b/.htmllintrc
@@ -25,6 +25,7 @@
   "indent-width-cont": true,
   "input-radio-req-name": true,
   "input-req-label": true,
+  "label-req-for": true,
   "line-max-len": 200,
   "line-max-len-ignore-regex": "<script|<link|<path|^\\s*<!--\\s*https?://|^\\s*https?://|^\\s*href=\"[^\"]+\"",
   "line-no-trailing-whitespace": false,
diff --git a/README.md b/README.md
index a98a668d5c9..81c559967df 100644
--- 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">
+<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>
   <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">
+<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>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 #### CSS
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
index e570fc1d028..bb4ece4edaf 100644
--- 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">
+<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>
   <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">
+<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>
   <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
index ac51e9c4506..2b5066a0a13 100644
--- 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">
+<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>
   <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">
+<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>
   <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-textfield/README.md b/packages/mdc-textfield/README.md
index ccb34cc504a..d3a69360a18 100644
--- 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">
+<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>
   <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,7 +81,7 @@ included as part of the DOM structure of a full width text field.
 ### Textarea
 
 ```html
-<div class="mdc-text-field mdc-text-field--textarea">
+<label class="mdc-text-field mdc-text-field--textarea">
   <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
@@ -90,13 +90,13 @@ included as part of the DOM structure of a full width text field.
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 ### Outlined
 
 ```html
-<div class="mdc-text-field mdc-text-field--outlined">
+<label class="mdc-text-field mdc-text-field--outlined">
   <input type="text" id="tf-outlined" class="mdc-text-field__input">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
@@ -105,7 +105,7 @@ included as part of the DOM structure of a full width text field.
     </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">
+<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>
   <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">
+<label class="mdc-text-field mdc-text-field--no-label">
   <input type="text" class="mdc-text-field__input" 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">
+<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
   <input type="text" class="mdc-text-field__input" 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,11 +169,11 @@ 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">
+<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>
   <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>
@@ -186,11 +186,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">
+<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>
   <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,7 +202,7 @@ 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>
   <div class="mdc-notched-outline">
@@ -212,7 +212,7 @@ inside of text field component.
     </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 +229,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">
+<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>
   <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 +246,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">
+<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">
     Label in correct place
   </label>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 ## Style Customization
diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
index 47e0fd7afd4..1f76687b103 100644
--- a/packages/mdc-textfield/helper-text/README.md
+++ b/packages/mdc-textfield/helper-text/README.md
@@ -52,13 +52,13 @@ indicate to assistive devices that the display of the helper text is dependent o
 the input element.
 
 ```html
-<div class="mdc-text-field">
+<label class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input"
          aria-controls="username-helper-text"
          aria-describedby="username-helper-text">
   <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 <div class="mdc-text-field-helper-line">
   <div id="username-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
     This will be displayed on your public profile
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 8d9ddef9cd7..2330bce456d 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -64,18 +64,18 @@ Leading and trailing icons can be applied to default or `mdc-text-field--outline
 In text field:
 
 ```html
-<div class="mdc-text-field mdc-text-field--with-leading-icon">
+<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>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 In outlined text field:
 
 ```html
-<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
+<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">
   <div class="mdc-notched-outline">
@@ -85,7 +85,7 @@ In outlined text field:
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 ### Trailing icon
@@ -93,18 +93,18 @@ In outlined text field:
 In text field:
 
 ```html
-<div class="mdc-text-field mdc-text-field--with-trailing-icon">
+<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>
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 In outlined text field:
 
 ```html
-<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
+<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">
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-notched-outline">
@@ -114,7 +114,7 @@ In outlined text field:
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 ### Leading and Trailing icons
@@ -122,19 +122,19 @@ In outlined text field:
 In text field:
 
 ```html
-<div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
+<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>
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
-</div>
+</label>
 ```
 
 In outlined text field:
 
 ```html
-<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
+<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">
   <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">clear</i>
@@ -145,7 +145,7 @@ In outlined text field:
     </div>
     <div class="mdc-notched-outline__trailing"></div>
   </div>
-</div>
+</label>
 ```
 
 ## Style Customization
diff --git a/packages/mdc-textfield/icon/foundation.ts b/packages/mdc-textfield/icon/foundation.ts
index fe75d5eff07..a94949b8f36 100644
--- a/packages/mdc-textfield/icon/foundation.ts
+++ b/packages/mdc-textfield/icon/foundation.ts
@@ -104,6 +104,7 @@ export class MDCTextFieldIconFoundation extends MDCFoundation<MDCTextFieldIconAd
   handleInteraction(evt: MouseEvent | KeyboardEvent) {
     const isEnterKey = (evt as KeyboardEvent).key === 'Enter' || (evt as KeyboardEvent).keyCode === 13;
     if (evt.type === 'click' || isEnterKey) {
+      evt.preventDefault(); // stop click from causing host label to focus input
       this.adapter_.notifyIconAction();
     }
   }
diff --git a/test/screenshot/spec/mdc-rtl/variables/include.html b/test/screenshot/spec/mdc-rtl/variables/include.html
index 878e53375da..454bf644f64 100644
--- a/test/screenshot/spec/mdc-rtl/variables/include.html
+++ b/test/screenshot/spec/mdc-rtl/variables/include.html
@@ -59,7 +59,7 @@
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -68,7 +68,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-shape/variables/override.html b/test/screenshot/spec/mdc-shape/variables/override.html
index 36a38de7930..cecdf9862e5 100644
--- a/test/screenshot/spec/mdc-shape/variables/override.html
+++ b/test/screenshot/spec/mdc-shape/variables/override.html
@@ -68,15 +68,15 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--select">
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-character-counter.html b/test/screenshot/spec/mdc-textfield/classes/baseline-character-counter.html
index 0151e3e413f..7a5655e551d 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-character-counter.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-character-counter.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" maxlength="10">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <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>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" maxlength="10">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,24 +56,24 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">0 / 10</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
           </div>
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -82,7 +82,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-fullwidth.html b/test/screenshot/spec/mdc-textfield/classes/baseline-fullwidth.html
index 93c65583f52..96b79f928ca 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-fullwidth.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-fullwidth.html
@@ -44,14 +44,12 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--fullwidth">
-            <!-- htmllint-disable -->
+          <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">
-            <!-- htmllint-enable -->
-          </div>
+          </label>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-character-counter.html b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-character-counter.html
index a18b59dec1f..6ac103bcc8a 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-character-counter.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-character-counter.html
@@ -36,11 +36,11 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" maxlength="10">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 / 10</div>
@@ -48,7 +48,7 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" maxlength="10">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -57,7 +57,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 / 10</div>
@@ -65,18 +65,18 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
         </div>
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 25</div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-validation-msg.html
index 12f0352916c..e2f88e0d06e 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent-validation-msg.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent.html b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent.html
index cefd036d71c..ab67cc6a93c 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-persistent.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-validation-msg.html
index 6fa1d545c4b..7de7f8fa19a 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text-validation-msg.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" pattern=".{4,8}" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" pattern=".{4,8}" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text.html b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text.html
index 76cf8849c75..ee7c9134000 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-helper-text.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
index a7e1889573a..540e384ca6b 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-icon.html
@@ -36,16 +36,16 @@
     <div class="test-layout">
 
       <div class="test-cell test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--with-leading-icon">
+        <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="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
+        <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="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
@@ -55,20 +55,20 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--with-leading-icon">
+        <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="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
+        <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="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -78,7 +78,7 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
       </div>
 
     </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
index af14c92d090..98c169410c0 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-leading-trailing-icons.html
@@ -45,17 +45,17 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
+          <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">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
+          <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">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -66,21 +66,21 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
+          <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">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
+          <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">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -91,7 +91,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-no-js.html b/test/screenshot/spec/mdc-textfield/classes/baseline-no-js.html
index b3850e246f7..eca0d731eec 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-no-js.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-no-js.html
@@ -45,15 +45,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -62,19 +62,19 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html b/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
index 32800b558b2..99744965682 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-placeholder.html
@@ -45,24 +45,20 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--no-label">
             <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text">
-            <!-- htmllint-enable -->
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
             <input type="text" class="mdc-text-field__input test-text-field__input" aria-label="Label" placeholder="Placeholder text">
-            <!-- htmllint-enable -->
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
index 3a3b0590d9f..28574c86dd4 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-trailing-icon.html
@@ -36,16 +36,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
@@ -55,20 +55,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -78,7 +78,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
index 8994098d465..2275a003ee8 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label-with-icon.html
@@ -45,49 +45,41 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
-            <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
-            <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--no-label mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
-            <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--no-label mdc-text-field--outlined mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--no-label mdc-text-field--outlined mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
-            <!-- htmllint-disable -->
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label.html b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label.html
index 566c4bfbaf5..be40534258c 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline-without-label.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline-without-label.html
@@ -45,45 +45,37 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--no-label">
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
             <input type="text" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--no-label">
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder text" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
             <input type="text" class="mdc-text-field__input test-text-field__input" value="Filled value" placeholder="Placeholder text" aria-label="Label">
-            <!-- htmllint-enable -->
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline.html b/test/screenshot/spec/mdc-textfield/classes/baseline.html
index c098a04b83a..602b2ee8a20 100644
--- a/test/screenshot/spec/mdc-textfield/classes/baseline.html
+++ b/test/screenshot/spec/mdc-textfield/classes/baseline.html
@@ -45,15 +45,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -62,19 +62,19 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field">
+          <label class="mdc-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-character-counter.html b/test/screenshot/spec/mdc-textfield/classes/disabled-character-counter.html
index 2cac64f0c79..0805c286dac 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-character-counter.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-character-counter.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" maxlength="10" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <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>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" maxlength="10" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,24 +56,24 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">0 / 10</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
           </div>
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -82,7 +82,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent-validation-msg.html
index 204cb802bda..316d1bff91a 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent-validation-msg.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent.html b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent.html
index 1868eb21490..1dad659aa7e 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-persistent.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-validation-msg.html
index f7820a8aa14..aeb1d7595a6 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text-validation-msg.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text.html b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text.html
index cb9122744e4..d746bd363bb 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-helper-text.html
@@ -36,18 +36,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
index 21e8e9aa6d6..5e07b815e7c 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-icon.html
@@ -36,16 +36,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
@@ -55,20 +55,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -78,7 +78,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
index b524c18c3fc..d98e17f2ff3 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-leading-trailing-icons.html
@@ -45,17 +45,17 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -66,21 +66,21 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <i class="material-icons mdc-text-field__icon">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -91,7 +91,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
index 8faad17151c..eca9b3d512c 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled-trailing-icon.html
@@ -36,16 +36,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
@@ -55,20 +55,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -78,7 +78,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/disabled.html b/test/screenshot/spec/mdc-textfield/classes/disabled.html
index 8b8ca1abd00..c8bb961e519 100644
--- a/test/screenshot/spec/mdc-textfield/classes/disabled.html
+++ b/test/screenshot/spec/mdc-textfield/classes/disabled.html
@@ -45,15 +45,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -62,20 +62,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--disabled">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent-validation-msg.html
index 69bc1a03ab8..4cf7f53b593 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent-validation-msg.html
@@ -46,18 +46,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -67,27 +67,27 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input"
                    value="Filled value">
             <label for="filled-text-field-with-value"
                    class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input"
                    value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -97,7 +97,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent.html b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent.html
index 08c37f0463e..821b7238e0f 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-persistent.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-validation-msg.html
index e7c93cdee19..ee92972d188 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text-validation-msg.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" pattern=".{4,8}">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" "  pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text.html b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text.html
index 8d55e06dc7c..77e774dfd41 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-helper-text.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-helper-text.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
index 611ea8261c9..34730abb7b7 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-leading-icon.html
@@ -37,16 +37,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
@@ -57,20 +57,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -80,7 +80,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
index 45f2b466d86..6df331d4c03 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-leading-trailing-icons.html
@@ -46,17 +46,17 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
@@ -68,21 +68,21 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -93,7 +93,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-placeholder.html b/test/screenshot/spec/mdc-textfield/classes/focused-placeholder.html
index 6f2ca87a9b8..a269b089072 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-placeholder.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-placeholder.html
@@ -44,14 +44,14 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" placeholder="Placeholder text">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <!-- The empty value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" "
               placeholder="Placeholder text">
@@ -62,7 +62,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
       </div>
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
index 9a5659df09f..777ba599710 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused-trailing-icon.html
@@ -37,16 +37,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -57,20 +57,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -80,7 +80,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/focused.html b/test/screenshot/spec/mdc-textfield/classes/focused.html
index f8677412c7c..7ec3a383941 100644
--- a/test/screenshot/spec/mdc-textfield/classes/focused.html
+++ b/test/screenshot/spec/mdc-textfield/classes/focused.html
@@ -46,15 +46,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -64,21 +64,21 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input"
                    value="Filled value">
             <label for="filled-text-field-with-value"
                    class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input"
                    value="Filled value">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -88,7 +88,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-disabled.html b/test/screenshot/spec/mdc-textfield/classes/invalid-disabled.html
index df14332b67d..d2d69ad92e8 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-disabled.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-disabled.html
@@ -37,15 +37,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--disabled" data-no-init="true">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--disabled" data-no-init="true">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}" disabled>
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--disabled" data-no-init="true">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--disabled" data-no-init="true">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -54,7 +54,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg-character-counter.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg-character-counter.html
index 52a6c488ebd..3499a46d1d6 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg-character-counter.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg-character-counter.html
@@ -37,11 +37,11 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}" maxlength="8">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 /8</div>
@@ -49,7 +49,7 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}" maxlength="8">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -59,7 +59,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 /8</div>
@@ -67,11 +67,11 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}" maxlength="24">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 24</div>
@@ -79,7 +79,7 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}" maxlength="24">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -88,7 +88,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 24</div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg.html
index 0f5743a40f7..24a890f5937 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent-validation-msg.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent.html
index df60db5b294..0d39b388ce1 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-persistent.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field-with-value-1" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value-2" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-validation-msg.html
index d1fde75ad5b..624772ae45d 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text-validation-msg.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text.html
index 6c642bab53b..1c807e008e9 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-helper-text.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -58,25 +58,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
index f331ff41e46..6cbe89d987f 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-icon.html
@@ -37,16 +37,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
@@ -57,20 +57,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -80,7 +80,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
index d2fef3ff3a9..3a4803fd125 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-leading-trailing-icons.html
@@ -46,17 +46,17 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
@@ -68,21 +68,21 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -93,7 +93,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
index 3d661d3785d..120a1b0ced5 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused-trailing-icon.html
@@ -37,16 +37,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <label class="mdc-floating-label mdc-floating-label--float-above" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -57,20 +57,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -80,7 +80,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-focused.html b/test/screenshot/spec/mdc-textfield/classes/invalid-focused.html
index a2d2d36aa68..23a42970069 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-focused.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-focused.html
@@ -37,15 +37,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" value=" " required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -55,19 +55,19 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple mdc-line-ripple--active"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--focused">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -76,7 +76,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent-validation-msg.html
index 08c931bc126..d2e4449851e 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent-validation-msg.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -57,25 +57,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -84,7 +84,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent.html b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent.html
index 09538826bbf..7adec44979f 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-persistent.html
@@ -36,18 +36,18 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -56,25 +56,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -83,7 +83,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-validation-msg.html b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-validation-msg.html
index c39c443ff30..ca8287a56b1 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-validation-msg.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text-validation-msg.html
@@ -37,18 +37,18 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -57,25 +57,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -84,7 +84,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text.html b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text.html
index 0967e4dec8b..0c10324cc67 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-helper-text.html
@@ -36,11 +36,11 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
@@ -48,7 +48,7 @@
       </div>
 
       <div class="test-cell test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+        <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
           <div class="mdc-notched-outline">
             <div class="mdc-notched-outline__leading"></div>
@@ -57,7 +57,7 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
         <div class="mdc-text-field-helper-line">
           <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
         </div>
@@ -65,18 +65,18 @@
 
       <div class="test-layout">
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -85,7 +85,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text" aria-hidden="true">Helper Text</div>
           </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
index 34555db9100..b1445eb42f9 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-icon.html
@@ -37,16 +37,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
@@ -56,20 +56,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -79,7 +79,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
index 052a5906a55..6a180e9b2f0 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-leading-trailing-icons.html
@@ -46,17 +46,17 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -67,21 +67,21 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon mdc-text-field--with-leading-icon">
             <i class="material-icons mdc-text-field__icon" role="button">3d_rotation</i>
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
@@ -92,7 +92,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html b/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
index 54790c614d9..131c9a71505 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid-trailing-icon.html
@@ -37,16 +37,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline">
@@ -56,20 +56,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid mdc-text-field--with-trailing-icon">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -79,7 +79,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/invalid.html b/test/screenshot/spec/mdc-textfield/classes/invalid.html
index 114aacf427f..91c0ec6629d 100644
--- a/test/screenshot/spec/mdc-textfield/classes/invalid.html
+++ b/test/screenshot/spec/mdc-textfield/classes/invalid.html
@@ -37,15 +37,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -54,19 +54,19 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--invalid">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -75,7 +75,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea-character-counter.html b/test/screenshot/spec/mdc-textfield/classes/textarea-character-counter.html
index 7fb436a9c29..c2e05bee264 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea-character-counter.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea-character-counter.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <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="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
@@ -57,11 +57,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <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">3 / 140</div>
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
@@ -73,13 +73,13 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea">
             <div class="mdc-text-field-character-counter">581 / 640</div>
-            <!-- htmllint-disable -->
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2" maxlength="640">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.</textarea>
@@ -90,8 +90,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea-disabled.html b/test/screenshot/spec/mdc-textfield/classes/textarea-disabled.html
index b01ce1da779..6aeff0fb2b4 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea-disabled.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea-disabled.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled">
             <textarea id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -57,11 +57,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled">
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -73,12 +73,12 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -90,8 +90,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea-focused.html b/test/screenshot/spec/mdc-textfield/classes/textarea-focused.html
index 834e42aed92..f4a561824ec 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea-focused.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea-focused.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--focused">
             <textarea id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"></textarea>
@@ -56,11 +56,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--focused">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--focused">
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Xyz</textarea>
@@ -71,16 +71,15 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--focused">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--focused">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.</textarea>
-            <!-- htmllint-enable -->
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__notch">
@@ -88,7 +87,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea-fullwidth.html b/test/screenshot/spec/mdc-textfield/classes/textarea-fullwidth.html
index 0422d6aefe7..cdb9db455b1 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea-fullwidth.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea-fullwidth.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth">
             <textarea id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"></textarea>
@@ -56,11 +56,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth">
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Xyz</textarea>
@@ -71,12 +71,12 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.</textarea>
@@ -87,8 +87,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea-invalid.html b/test/screenshot/spec/mdc-textfield/classes/textarea-invalid.html
index 54dc809b5fa..45265f87317 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea-invalid.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea-invalid.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--invalid" data-native-input-validation="false">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--invalid" data-native-input-validation="false">
             <textarea id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -57,11 +57,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--invalid" data-native-input-validation="false">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--invalid" data-native-input-validation="false">
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -73,12 +73,12 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--invalid" data-native-input-validation="false">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--invalid" data-native-input-validation="false">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -90,8 +90,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea-without-label.html b/test/screenshot/spec/mdc-textfield/classes/textarea-without-label.html
index 5d1dd3b9ffd..75a747f91bc 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea-without-label.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea-without-label.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <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 id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2" placeholder="Placeholder text"></textarea>
@@ -53,11 +53,11 @@
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <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 id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2" placeholder="Placeholder text">Xyz</textarea>
@@ -65,12 +65,12 @@
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.</textarea>
@@ -78,8 +78,8 @@
               <div class="mdc-notched-outline__leading"></div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/classes/textarea.html b/test/screenshot/spec/mdc-textfield/classes/textarea.html
index 562c4a5c9fb..46b62db38af 100644
--- a/test/screenshot/spec/mdc-textfield/classes/textarea.html
+++ b/test/screenshot/spec/mdc-textfield/classes/textarea.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"></textarea>
@@ -56,11 +56,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Xyz</textarea>
@@ -71,12 +71,12 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.</textarea>
@@ -87,8 +87,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/issues/3332.html b/test/screenshot/spec/mdc-textfield/issues/3332.html
index 108b26034aa..81ee0cb5266 100644
--- a/test/screenshot/spec/mdc-textfield/issues/3332.html
+++ b/test/screenshot/spec/mdc-textfield/issues/3332.html
@@ -38,7 +38,7 @@
         <!-- This test sets `text-align: center` on the parent container to assert that the svg outline will render appropriately when focused. -->
         <!-- See https://github.com/material-components/material-components-web/issues/3332 -->
         <div class="test-cell test-cell--textfield" style="text-align: center;">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused test-text-field-issues-3332">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--focused test-text-field-issues-3332">
             <!-- The single space value is to overcome an issue where the component does not draw the SVG path when created unless there is a value. -->
             <input type="text" id="outlined-text-field" class="mdc-text-field__input" value=" ">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -48,11 +48,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea" style="text-align: center;">
-          <div class="mdc-text-field mdc-text-field--textarea">
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="textarea" class="mdc-text-field__input" rows="2" cols="40"></textarea>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -61,7 +61,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
       </div>
     </main>
diff --git a/test/screenshot/spec/mdc-textfield/issues/4170.html b/test/screenshot/spec/mdc-textfield/issues/4170.html
index 1f7449dc476..739194ebe5e 100644
--- a/test/screenshot/spec/mdc-textfield/issues/4170.html
+++ b/test/screenshot/spec/mdc-textfield/issues/4170.html
@@ -45,7 +45,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="full-width-textarea"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"></textarea>
@@ -56,11 +56,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="full-width-textarea-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Xyz</textarea>
@@ -71,12 +71,12 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea">
-            <!-- htmllint-disable -->
+          <!-- htmllint-disable -->
+          <label class="mdc-text-field mdc-text-field--textarea">
             <textarea id="full-width-textarea-long-filled"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus ac risus a eleifend. Phasellus dictum luctus leo quis ultricies. Vivamus fringilla vehicula turpis eu eleifend. Donec ultricies, est a scelerisque laoreet, arcu eros commodo nunc, sit amet hendrerit diam nisi id velit. Suspendisse porta nibh orci. Donec velit nisl, accumsan vitae eros a, consectetur interdum eros. Aenean dapibus vulputate semper. Aliquam finibus nec leo sed ultricies. Integer luctus convallis risus. Etiam suscipit suscipit ante vel volutpat. Ut venenatis dapibus elit dictum fringilla.</textarea>
@@ -87,8 +87,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
-          </div>
+          </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-invalid.html b/test/screenshot/spec/mdc-textfield/mixins/density-invalid.html
index 40cd22ea72b..eb3c8a39910 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-invalid.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-invalid.html
@@ -37,15 +37,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
+          <label class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
+          <label class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" required pattern=".{4,8}">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -54,19 +54,19 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
+          <label class="mdc-text-field custom-density-text-field--default mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
+          <label class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined mdc-text-field--invalid" data-native-input-validation="false">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" required pattern=".{4,8}">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -75,7 +75,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
index 292d356ae37..f2f9c219707 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon-invalid.html
@@ -36,16 +36,16 @@
     <div class="test-layout">
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
+        <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
+        <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
             data-native-input-validation="false">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
@@ -56,20 +56,20 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
+        <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--default" data-native-input-validation="false">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
+        <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--invalid custom-density-text-field-leading-icon--outlined"
             data-native-input-validation="false">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
@@ -80,7 +80,7 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
       </div>
 
     </div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
index 98ee5febee7..c4184e87d77 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density-leading-icon.html
@@ -36,16 +36,16 @@
     <div class="test-layout">
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
+        <label class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input">
           <label class="mdc-floating-label" for="filled-text-field">Label</label>
           <div class="mdc-line-ripple"></div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
+        <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input">
           <div class="mdc-notched-outline">
@@ -55,20 +55,20 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
+        <label class="mdc-text-field mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--default">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
           <div class="mdc-line-ripple"></div>
-        </div>
+        </label>
       </div>
 
       <div class="test-cell test-cell--light test-cell--textfield">
-        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
+        <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon custom-density-text-field-leading-icon--outlined">
           <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
           <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value">
           <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -78,7 +78,7 @@
             </div>
             <div class="mdc-notched-outline__trailing"></div>
           </div>
-        </div>
+        </label>
       </div>
 
     </div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/density.html b/test/screenshot/spec/mdc-textfield/mixins/density.html
index a85af9f70df..649fa814c16 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/density.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/density.html
@@ -36,11 +36,11 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field custom-density-text-field--default">
+          <label class="mdc-text-field custom-density-text-field--default">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" maxlength="25">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 / 25</div>
@@ -48,7 +48,7 @@
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" maxlength="25">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -57,7 +57,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 / 25</div>
@@ -65,11 +65,11 @@
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field custom-density-text-field--default">
+          <label class="mdc-text-field custom-density-text-field--default">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 25</div>
@@ -77,7 +77,7 @@
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined custom-density-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -86,7 +86,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 25</div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
index dca9702f343..a3b1571f1cb 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
@@ -45,15 +45,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
             <input type="text" id="filled-text-field--bottom-line-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--bottom-line-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
             <input type="text" id="outlined-text-field--bottom-line-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -62,20 +62,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
             <input type="text" id="filled-text-field-with-value--bottom-line-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <label for="filled-text-field-with-value--bottom-line-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--bottom-line-color">
             <input type="text" id="outlined-text-field-with-value--bottom-line-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -85,25 +85,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
       </div>
 
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
             <input type="text" id="filled-text-field--character-counter-color" class="mdc-text-field__input test-text-field__input" maxlength="10" disabled>
             <label class="mdc-floating-label" for="filled-text-field--character-counter-color">Label</label>
             <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>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
             <input type="text" id="outlined-text-field--character-counter-color" class="mdc-text-field__input test-text-field__input" maxlength="10" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -112,24 +112,24 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">0 / 10</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
             <input type="text" id="filled-text-field-with-value--character-counter-color" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25" disabled>
             <label for="filled-text-field-with-value--character-counter-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
           </div>
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--character-counter-color">
             <input type="text" id="outlined-text-field-with-value--character-counter-color" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -138,7 +138,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-character-counter">12 / 25</div>
           </div>
@@ -148,15 +148,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--fill-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--fill-color">
             <input type="text" id="filled-text-field--fill-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--fill-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field--fill-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -165,20 +165,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--fill-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--fill-color">
             <input type="text" id="filled-text-field-with-value--fill-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <label for="filled-text-field-with-value--fill-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined">
+          <label class="mdc-text-field mdc-text-field--outlined">
             <input type="text" id="outlined-text-field-with-value--fill-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -188,14 +188,14 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
 
       <div class="test-layout">
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--disabled
+          <label class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--disabled
             custom-disabled-colors-text-field-full-width--bottom-line-color">
             <!-- htmllint-disable -->
             <input class="mdc-text-field__input"
@@ -204,25 +204,25 @@
                     aria-label="Full-Width Text Field"
                     disabled>
             <!-- htmllint-enable -->
-          </div>
+          </label>
         </div>
       </div>
 
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
             <input type="text" id="filled-text-field--helper-text-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--helper-text-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
             <input type="text" id="outlined-text-field--helper-text-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -231,25 +231,25 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
             <input type="text" id="filled-text-field-with-value--helper-text-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value--helper-text-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--helper-text-color">
             <input type="text" id="outlined-text-field-with-value--helper-text-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -258,7 +258,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
           </div>
@@ -269,16 +269,16 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
+          <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field--icon-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--icon-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field--icon-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
@@ -288,20 +288,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
+          <label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="filled-text-field-with-value--icon-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <label for="filled-text-field-with-value--icon-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--disabled custom-disabled-colors-text-field--icon-color">
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <input type="text" id="outlined-text-field-with-value--icon-color" class="mdc-text-field__input test-text-field__input" value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -311,7 +311,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
index 874f4ab420a..3db4810c8ce 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
@@ -44,15 +44,15 @@
     <main class="test-viewport test-viewport--no-bg">
       <div class="test-layout">
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
             <input type="text" id="filled-text-field--ink-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--ink-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
             <input type="text" id="outlined-text-field--ink-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -61,20 +61,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
             <input type="text" id="filled-text-field-with-value--ink-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <label for="filled-text-field-with-value--ink-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--ink-color">
             <input type="text" id="outlined-text-field-with-value--ink-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -84,7 +84,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
@@ -92,15 +92,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
             <input type="text" id="filled-text-field--label-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--label-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
             <input type="text" id="outlined-text-field--label-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -109,20 +109,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
             <input type="text" id="filled-text-field-with-value--label-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <label for="filled-text-field-with-value--label-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--label-color">
             <input type="text" id="outlined-text-field-with-value--label-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -132,7 +132,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
@@ -140,15 +140,15 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
             <input type="text" id="filled-text-field--outline-color" class="mdc-text-field__input test-text-field__input" disabled>
             <label class="mdc-floating-label" for="filled-text-field--outline-color">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
             <input type="text" id="outlined-text-field--outline-color" class="mdc-text-field__input test-text-field__input" disabled>
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -157,20 +157,20 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
+          <label class="mdc-text-field mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
             <input type="text" id="filled-text-field-with-value--outline-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <label for="filled-text-field-with-value--outline-color" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textfield-small">
-          <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
+          <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--disabled custom-disabled-colors-text-field--outline-color">
             <input type="text" id="outlined-text-field-with-value--outline-color" class="mdc-text-field__input test-text-field__input"
                    value="Filled value" disabled>
             <div class="mdc-notched-outline mdc-notched-outline--notched">
@@ -180,7 +180,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
       </div>
@@ -213,7 +213,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
             <textarea id="full-width-textarea--fill-color"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -225,11 +225,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
             <textarea id="full-width-textarea-filled--fill-color"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -241,11 +241,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
             <!-- htmllint-disable -->
             <textarea id="full-width-textarea-long-filled--fill-color"
                       class="mdc-text-field__input test-text-field__input"
@@ -259,7 +259,7 @@
               <div class="mdc-notched-outline__trailing"></div>
             </div>
             <!-- htmllint-enable -->
-          </div>
+          </label>
         </div>
 
       </div>
@@ -267,7 +267,7 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--light test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
             <textarea id="full-width-textarea--stroke-color"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -279,11 +279,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
             <textarea id="full-width-textarea-filled--stroke-color"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -295,11 +295,11 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
         </div>
 
         <div class="test-cell test-cell--light test-cell--textarea">
-          <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
+          <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
             <!-- htmllint-disable -->
             <textarea id="full-width-textarea-long-filled--stroke-color"
                       class="mdc-text-field__input test-text-field__input"
@@ -313,7 +313,7 @@
               <div class="mdc-notched-outline__trailing"></div>
             </div>
             <!-- htmllint-enable -->
-          </div>
+          </label>
         </div>
 
       </div>
diff --git a/test/screenshot/spec/mdc-textfield/mixins/outline-shape-radius.html b/test/screenshot/spec/mdc-textfield/mixins/outline-shape-radius.html
index c17200a581b..269af44da4b 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/outline-shape-radius.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/outline-shape-radius.html
@@ -36,11 +36,11 @@
       <div class="test-layout">
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field test-shaped-text-field">
+          <label class="mdc-text-field test-shaped-text-field">
             <input type="text" id="filled-text-field" class="mdc-text-field__input test-text-field__input" maxlength="25">
             <label class="mdc-floating-label" for="filled-text-field">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 / 25</div>
@@ -48,7 +48,7 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined test-shaped-text-field--outline">
+          <label class="mdc-text-field mdc-text-field--outlined test-shaped-text-field--outline">
             <input type="text" id="outlined-text-field" class="mdc-text-field__input test-text-field__input" maxlength="25">
             <div class="mdc-notched-outline">
               <div class="mdc-notched-outline__leading"></div>
@@ -57,7 +57,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">0 / 25</div>
@@ -65,11 +65,11 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field test-shaped-text-field">
+          <label class="mdc-text-field test-shaped-text-field">
             <input type="text" id="filled-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <label for="filled-text-field-with-value" class="mdc-floating-label mdc-floating-label--float-above">Label</label>
             <div class="mdc-line-ripple"></div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 25</div>
@@ -77,7 +77,7 @@
         </div>
 
         <div class="test-cell test-cell--textfield">
-          <div class="mdc-text-field mdc-text-field--outlined test-shaped-text-field--outline">
+          <label class="mdc-text-field mdc-text-field--outlined test-shaped-text-field--outline">
             <input type="text" id="outlined-text-field-with-value" class="mdc-text-field__input test-text-field__input" value="Filled value" maxlength="25">
             <div class="mdc-notched-outline mdc-notched-outline--notched">
               <div class="mdc-notched-outline__leading"></div>
@@ -86,7 +86,7 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-          </div>
+          </label>
           <div class="mdc-text-field-helper-line">
             <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent" aria-hidden="true">Helper Text</div>
             <div class="mdc-text-field-character-counter">12 / 25</div>
diff --git a/test/unit/mdc-select/mdc-select-icon-foundation.test.js b/test/unit/mdc-select/mdc-select-icon-foundation.test.js
index 0b53f671b8b..10172ebeb5a 100644
--- a/test/unit/mdc-select/mdc-select-icon-foundation.test.js
+++ b/test/unit/mdc-select/mdc-select-icon-foundation.test.js
@@ -144,10 +144,7 @@ test('#setContent updates the text content', () => {
 
 test('on click notifies custom icon event', () => {
   const {foundation, mockAdapter} = setupTest();
-  const evt = {
-    target: {},
-    type: 'click',
-  };
+  const evt = new CustomEvent('click');
   let click;
 
   td.when(mockAdapter.registerInteractionHandler('click', td.matchers.isA(Function))).thenDo((evtType, handler) => {

From cd08bfdaa6b034cc6cbacf2cabaec27ae2d2366a Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 13:55:19 -0800
Subject: [PATCH 2/7] chore(textfield): lint fixes

---
 test/screenshot/spec/mdc-textfield/mixins/disabled-2.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
index 3db4810c8ce..da1df651ccb 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-2.html
@@ -245,8 +245,8 @@
         </div>
 
         <div class="test-cell test-cell--light test-cell--textarea">
+          <!-- htmllint-disable -->
           <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--fill-color">
-            <!-- htmllint-disable -->
             <textarea id="full-width-textarea-long-filled--fill-color"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -258,8 +258,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
           </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>
@@ -299,8 +299,8 @@
         </div>
 
         <div class="test-cell test-cell--light test-cell--textarea">
+          <!-- htmllint-disable -->
           <label class="mdc-text-field mdc-text-field--textarea mdc-text-field--disabled custom-disabled-colors-text-field-textarea--stroke-color">
-            <!-- htmllint-disable -->
             <textarea id="full-width-textarea-long-filled--stroke-color"
                       class="mdc-text-field__input test-text-field__input"
                       rows="2"
@@ -312,8 +312,8 @@
               </div>
               <div class="mdc-notched-outline__trailing"></div>
             </div>
-            <!-- htmllint-enable -->
           </label>
+          <!-- htmllint-enable -->
         </div>
 
       </div>

From 1a70033739ee1762f7a1ad185b97747490a16acc Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 13:59:30 -0800
Subject: [PATCH 3/7] chore(textfield): lint fixes

---
 test/screenshot/spec/mdc-textfield/mixins/disabled-1.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
index a3b1571f1cb..c38006d1f23 100644
--- a/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
+++ b/test/screenshot/spec/mdc-textfield/mixins/disabled-1.html
@@ -197,13 +197,11 @@
         <div class="test-cell test-cell--light test-cell--textfield-small">
           <label class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--disabled
             custom-disabled-colors-text-field-full-width--bottom-line-color">
-            <!-- htmllint-disable -->
             <input class="mdc-text-field__input"
                     type="text"
                     placeholder="Full-Width Text Field"
                     aria-label="Full-Width Text Field"
                     disabled>
-            <!-- htmllint-enable -->
           </label>
         </div>
       </div>

From 619e491548795c79d968f89de4876a44f135bd8d Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 14:21:25 -0800
Subject: [PATCH 4/7] test(textfield): IE11 fix for CustomEvent

---
 .../mdc-select/mdc-select-icon-foundation.test.js     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/test/unit/mdc-select/mdc-select-icon-foundation.test.js b/test/unit/mdc-select/mdc-select-icon-foundation.test.js
index 10172ebeb5a..a6a819d0e4d 100644
--- a/test/unit/mdc-select/mdc-select-icon-foundation.test.js
+++ b/test/unit/mdc-select/mdc-select-icon-foundation.test.js
@@ -144,7 +144,16 @@ test('#setContent updates the text content', () => {
 
 test('on click notifies custom icon event', () => {
   const {foundation, mockAdapter} = setupTest();
-  const evt = new CustomEvent('click');
+  let evt;
+  if (typeof CustomEvent === 'function') {
+    evt = new CustomEvent('click', {
+      bubbles: true,
+    });
+  } else {
+    evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent('click', true, false);
+  }
+
   let click;
 
   td.when(mockAdapter.registerInteractionHandler('click', td.matchers.isA(Function))).thenDo((evtType, handler) => {

From f202e483026650a44023efb0addf8282eb51ed6f Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Mon, 23 Dec 2019 14:53:37 -0800
Subject: [PATCH 5/7] test(textfield): IE11 fix

---
 test/unit/mdc-select/mdc-select-icon-foundation.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/mdc-select/mdc-select-icon-foundation.test.js b/test/unit/mdc-select/mdc-select-icon-foundation.test.js
index a6a819d0e4d..41ada278650 100644
--- a/test/unit/mdc-select/mdc-select-icon-foundation.test.js
+++ b/test/unit/mdc-select/mdc-select-icon-foundation.test.js
@@ -151,7 +151,7 @@ test('on click notifies custom icon event', () => {
     });
   } else {
     evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent('click', true, false);
+    evt.initCustomEvent('click', true, false, {});
   }
 
   let click;

From 31593342d02c534c62dbd56d3ebda5d134f19c9a Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Tue, 7 Jan 2020 16:47:20 -0600
Subject: [PATCH 6/7] chore: update docs to use one label

---
 README.md                                    |  8 ++---
 docs/migrating-from-mdl.md                   |  8 ++---
 packages/mdc-auto-init/README.md             |  8 ++---
 packages/mdc-floating-label/README.md        | 21 ++---------
 packages/mdc-notched-outline/README.md       |  2 +-
 packages/mdc-select/README.md                |  2 +-
 packages/mdc-textfield/README.md             | 38 ++++++++++----------
 packages/mdc-textfield/helper-text/README.md |  5 +--
 packages/mdc-textfield/icon/README.md        | 24 ++++++-------
 9 files changed, 51 insertions(+), 65 deletions(-)

diff --git a/README.md b/README.md
index 81c559967df..28a1b2a0f95 100644
--- a/README.md
+++ b/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>
 ```
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
index bb4ece4edaf..c6b5690fc9b 100644
--- a/docs/migrating-from-mdl.md
+++ b/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>
 ```
diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
index 2b5066a0a13..43385bd3f56 100644
--- a/packages/mdc-auto-init/README.md
+++ b/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>
 ```
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
index 209b838bdcc..dbd33778380 100644
--- a/packages/mdc-floating-label/README.md
+++ b/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
diff --git a/packages/mdc-notched-outline/README.md b/packages/mdc-notched-outline/README.md
index 2f6d690fd0b..5d1ab142717 100644
--- 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
index 3d6463c1eb5..ff54fde6edd 100644
--- 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
index d3a69360a18..db852668721 100644
--- a/packages/mdc-textfield/README.md
+++ b/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>
 ```
diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
index 1f76687b103..69fcafb9bdf 100644
--- a/packages/mdc-textfield/helper-text/README.md
+++ b/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">
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index 2330bce456d..5c702390c1d 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/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>

From 79fe1a4144f0552c5cb8f199fcf85bb39f952c4d Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Wed, 8 Jan 2020 12:07:52 -0600
Subject: [PATCH 7/7] chore: revert label lint change

---
 .htmllintrc | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.htmllintrc b/.htmllintrc
index a792016187f..35440052c07 100644
--- a/.htmllintrc
+++ b/.htmllintrc
@@ -25,7 +25,6 @@
   "indent-width-cont": true,
   "input-radio-req-name": true,
   "input-req-label": true,
-  "label-req-for": true,
   "line-max-len": 200,
   "line-max-len-ignore-regex": "<script|<link|<path|^\\s*<!--\\s*https?://|^\\s*https?://|^\\s*href=\"[^\"]+\"",
   "line-no-trailing-whitespace": false,