From 716ba7eb4f0278b47d2713e33adc4df95e464fa1 Mon Sep 17 00:00:00 2001
From: Jessica Xu <jessicacxu@google.com>
Date: Mon, 9 Nov 2020 09:42:57 -0800
Subject: [PATCH] feat(material/checkbox): Avoid nested divs in labels by
 changing to span instead.

---
 src/material/checkbox/checkbox.html | 18 +++++++++---------
 src/material/checkbox/checkbox.scss |  1 +
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/material/checkbox/checkbox.html b/src/material/checkbox/checkbox.html
index 89d16abb53c9..fbe3bd387e44 100644
--- a/src/material/checkbox/checkbox.html
+++ b/src/material/checkbox/checkbox.html
@@ -1,5 +1,5 @@
 <label [attr.for]="inputId" class="mat-checkbox-layout" #label>
-  <div class="mat-checkbox-inner-container"
+  <span class="mat-checkbox-inner-container"
        [class.mat-checkbox-inner-container-no-side-margin]="!checkboxLabel.textContent || !checkboxLabel.textContent.trim()">
     <input #input
            class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
@@ -16,16 +16,16 @@
            [attr.aria-describedby]="ariaDescribedby"
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">
-    <div matRipple class="mat-checkbox-ripple mat-focus-indicator"
+    <span matRipple class="mat-checkbox-ripple mat-focus-indicator"
          [matRippleTrigger]="label"
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleRadius]="20"
          [matRippleCentered]="true"
          [matRippleAnimation]="{enterDuration: 150}">
-      <div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
-    </div>
-    <div class="mat-checkbox-frame"></div>
-    <div class="mat-checkbox-background">
+      <span class="mat-ripple-element mat-checkbox-persistent-ripple"></span>
+    </span>
+    <span class="mat-checkbox-frame"></span>
+    <span class="mat-checkbox-background">
       <svg version="1.1"
            focusable="false"
            class="mat-checkbox-checkmark"
@@ -37,9 +37,9 @@
               d="M4.1,12.7 9,17.6 20.3,6.3"/>
       </svg>
       <!-- Element for rendering the indeterminate state checkbox. -->
-      <div class="mat-checkbox-mixedmark"></div>
-    </div>
-  </div>
+      <span class="mat-checkbox-mixedmark"></span>
+    </span>
+  </span>
   <span class="mat-checkbox-label" #checkboxLabel (cdkObserveContent)="_onLabelTextChange()">
     <!-- Add an invisible span so JAWS can read the label -->
     <span style="display:none">&nbsp;</span>
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 30d7a1888eeb..ad28dcf20441 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -291,6 +291,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-persistent-ripple {
+  display: block;
   width: 100%;
   height: 100%;
   transform: none;