fix(checkbox, radio): Fix checkbox label not read in JAWS (#4610)

* Fix checkbox label not read in JAWS

* use another way

Author: tinayuangao

src/lib/checkbox/checkbox.html

@@ -1,4 +1,4 @@
-<label class="mat-checkbox-layout" #label>
+<label [attr.for]="inputId" class="mat-checkbox-layout" #label>
   <div class="mat-checkbox-inner-container"
        [class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel()">
     <input #input
@@ -36,6 +36,8 @@
     </div>
   </div>
   <span class="mat-checkbox-label" #labelWrapper>
+    <!-- Add an invisible span so JAWS can read the label -->
+    <span style="display:none">&nbsp;</span>
     <ng-content></ng-content>
   </span>
 </label>

src/lib/radio/radio.html

@@ -12,17 +12,19 @@
   </div>
 
   <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
-          [id]="inputId"
-          [checked]="checked"
-          [disabled]="disabled"
-          [name]="name"
-          [attr.aria-label]="ariaLabel"
-          [attr.aria-labelledby]="ariaLabelledby"
-          (change)="_onInputChange($event)"
-          (click)="_onInputClick($event)">
+         [id]="inputId"
+         [checked]="checked"
+         [disabled]="disabled"
+         [name]="name"
+         [attr.aria-label]="ariaLabel"
+         [attr.aria-labelledby]="ariaLabelledby"
+         (change)="_onInputChange($event)"
+         (click)="_onInputClick($event)">
 
   <!-- The label content for radio control. -->
   <div 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>
 </label>