Fix checkbox label not read in JAWS

Author: tinayuangao

src/lib/checkbox/checkbox.html

@@ -1,40 +1,40 @@
-<label 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()"
-         [mdRippleCentered]="true"></div>
-    <div class="mat-checkbox-frame"></div>
-    <div class="mat-checkbox-background">
-      <svg version="1.1"
-           class="mat-checkbox-checkmark"
-           xmlns="http://www.w3.org/2000/svg"
-           viewBox="0 0 24 24"
-           xml:space="preserve">
-        <path class="mat-checkbox-checkmark-path"
-              fill="none"
-              stroke="white"
-              d="M4.1,12.7 9,17.6 20.3,6.3"/>
-      </svg>
-      <!-- Element for rendering the indeterminate state checkbox. -->
-      <div class="mat-checkbox-mixedmark"></div>
-    </div>
+<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()"
+       [mdRippleCentered]="true"></div>
+  <div class="mat-checkbox-frame"></div>
+  <div class="mat-checkbox-background">
+    <svg version="1.1"
+         class="mat-checkbox-checkmark"
+         xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 24 24"
+         xml:space="preserve">
+      <path class="mat-checkbox-checkmark-path"
+            fill="none"
+            stroke="white"
+            d="M4.1,12.7 9,17.6 20.3,6.3"/>
+    </svg>
+    <!-- Element for rendering the indeterminate state checkbox. -->
+    <div class="mat-checkbox-mixedmark"></div>
   </div>
+</div>
+<label class="mat-checkbox-layout" [attr.for]="inputId" #label>
   <span class="mat-checkbox-label" #labelWrapper>
     <ng-content></ng-content>
   </span>