From 13b28f8415bb5944b5dfc4320cc058d2290fc2cb Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Tue, 16 May 2017 15:55:45 -0700
Subject: [PATCH] Fix checkbox label not read in JAWS

---
 src/lib/checkbox/checkbox.html | 31 ++++++++++++++++---------------
 src/lib/checkbox/checkbox.scss |  7 -------
 src/lib/radio/radio.html       | 20 +++++++++-----------
 3 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index 7676f48c69f8..f92c06a800c9 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -1,20 +1,6 @@
-<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
-           class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
-           [id]="inputId"
-           [required]="required"
-           [checked]="checked"
-           [value]="value"
-           [disabled]="disabled"
-           [name]="name"
-           [tabIndex]="tabIndex"
-           [indeterminate]="indeterminate"
-           [attr.aria-label]="ariaLabel"
-           [attr.aria-labelledby]="ariaLabelledby"
-           (change)="_onInteractionEvent($event)"
-           (click)="_onInputClick($event)">
     <div md-ripple class="mat-checkbox-ripple"
          [mdRippleTrigger]="label"
          [mdRippleDisabled]="_isRippleDisabled()"
@@ -35,7 +21,22 @@
       <div class="mat-checkbox-mixedmark"></div>
     </div>
   </div>
+
   <span class="mat-checkbox-label" #labelWrapper>
     <ng-content></ng-content>
   </span>
 </label>
+<input #input
+       class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
+       [id]="inputId"
+       [required]="required"
+       [checked]="checked"
+       [value]="value"
+       [disabled]="disabled"
+       [name]="name"
+       [tabIndex]="tabIndex"
+       [indeterminate]="indeterminate"
+       [attr.aria-label]="ariaLabel"
+       [attr.aria-labelledby]="ariaLabelledby"
+       (change)="_onInteractionEvent($event)"
+       (click)="_onInputClick($event)">
\ No newline at end of file
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index a22c08165d7d..110521285975 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -418,13 +418,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 }
 
-.mat-checkbox-input {
-  // Move the input to the bottom and in the middle.
-  // Visual improvement to properly show browser popups when being required.
-  bottom: 0;
-  left: 50%;
-}
-
 .mat-checkbox-ripple {
   position: absolute;
   left: -$_mat-checkbox-ripple-size;
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index ca84be26b665..cdc3a2c4e4c4 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -10,19 +10,17 @@
          [mdRippleDisabled]="_isRippleDisabled()"
          [mdRippleCentered]="true"></div>
   </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)">
-
   <!-- The label content for radio control. -->
   <div class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">
     <ng-content></ng-content>
   </div>
 </label>
+<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)">