feat(material/radio,material/checkbox): Avoid nested divs in labels by changing to span instead.

Author: jesscxu

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>

src/material/radio/radio.html

@@ -2,9 +2,9 @@
 <!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->
 <label [attr.for]="inputId" class="mat-radio-label" #label>
   <!-- The actual 'radio' part of the control. -->
-  <div class="mat-radio-container">
-    <div class="mat-radio-outer-circle"></div>
-    <div class="mat-radio-inner-circle"></div>
+  <span class="mat-radio-container">
+    <span class="mat-radio-outer-circle"></span>
+    <span class="mat-radio-inner-circle"></span>
     <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
         [id]="inputId"
         [checked]="checked"
@@ -21,21 +21,21 @@
 
     <!-- The ripple comes after the input so that we can target it with a CSS
          sibling selector when the input is focused. -->
-    <div mat-ripple class="mat-radio-ripple mat-focus-indicator"
+    <span mat-ripple class="mat-radio-ripple mat-focus-indicator"
          [matRippleTrigger]="label"
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"
          [matRippleRadius]="20"
          [matRippleAnimation]="{enterDuration: 150}">
 
-      <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
-    </div>
-  </div>
+      <span class="mat-ripple-element mat-radio-persistent-ripple"></span>
+    </span>
+  </span>
 
   <!-- The label content for radio control. -->
-  <div class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">
+  <span class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">
     <!-- Add an invisible span so JAWS can read the label -->
     <span style="display:none">&nbsp;</span>
     <ng-content></ng-content>
-  </div>
+  </span>
 </label>