From 5c489497c342782353b769ade49233d46d8e5e42 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Thu, 25 May 2017 17:49:53 -0600
Subject: [PATCH] fix(checkbox, radio): Fix checkbox label not read in JAWS
 (#4610)

* Fix checkbox label not read in JAWS

* use another way
---
 src/lib/checkbox/checkbox.html |  4 +++-
 src/lib/radio/radio.html       | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index 7676f48c69f8..e07b211a679a 100644
--- 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
index ca84be26b665..234a17282390 100644
--- 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>