fix(form-field): add aria-owns to label element (#6683)

Author: jelbourn

src/lib/form-field/form-field.html

@@ -8,8 +8,11 @@
       <ng-content></ng-content>
 
       <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper">
+        <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
+             read if it comes before the control in the DOM. -->
         <label class="mat-input-placeholder mat-form-field-placeholder"
                [attr.for]="_control.id"
+               [attr.aria-owns]="_control.id"
                [class.mat-empty]="_control.empty && !_shouldAlwaysFloat"
                [class.mat-form-field-empty]="_control.empty && !_shouldAlwaysFloat"
                [class.mat-float]="_canPlaceholderFloat"

src/lib/input/input.spec.ts

@@ -224,6 +224,18 @@ describe('MdInput without forms', function () {
     expect(inputElement.id).toEqual(labelElement.getAttribute('for'));
   });
 
+  it('should add aria-owns to the label for the associated control', () => {
+    let fixture = TestBed.createComponent(MdInputTextTestController);
+    fixture.detectChanges();
+
+    const inputElement: HTMLInputElement =
+        fixture.debugElement.query(By.css('input')).nativeElement;
+    const labelElement: HTMLInputElement =
+        fixture.debugElement.query(By.css('label')).nativeElement;
+
+    expect(labelElement.getAttribute('aria-owns')).toBe(inputElement.id);
+  });
+
   it('should not overwrite existing id', () => {
     let fixture = TestBed.createComponent(MdInputWithId);
     fixture.detectChanges();