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

* Fix checkbox label not read in JAWS * use another way
angular · May 25, 2017 · 5c48949 · 5c48949
1 parent 97a9bdc
commit 5c48949
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/lib/checkbox/checkbox.html b/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>
diff --git a/src/lib/radio/radio.html b/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>