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

Co-authored-by: Jessica Xu <[email protected]>

Author: Jessica Xu

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>

src/material/radio/radio.scss

@@ -46,6 +46,7 @@ $mat-radio-ripple-radius: 20px;
 // The outer circle for the radio, always present.
 .mat-radio-outer-circle {
   box-sizing: border-box;
+  display: block;
   height: $mat-radio-size;
   left: 0;
   position: absolute;
@@ -67,6 +68,7 @@ $mat-radio-ripple-radius: 20px;
 .mat-radio-inner-circle {
   border-radius: 50%;
   box-sizing: border-box;
+  display: block;
   height: $mat-radio-size;
   left: 0;
   position: absolute;