Fix checkbox label not read in JAWS

Author: tinayuangao

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)">

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;

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)">