fix(input): adds voiceover support for md-input elements with placeholder

src/components/input/input.html

@@ -35,6 +35,7 @@
 
       <label class="md-input-placeholder"
              [attr.for]="id"
+             [attr.id]="labelId"
              [class.md-empty]="empty"
              [class.md-focused]="focused"
              [class.md-float]="floatingPlaceholder"

src/components/input/input.spec.ts

@@ -186,6 +186,7 @@ describe('MdInput', function () {
         fakeAsync(() => {
           fixture.detectChanges();
 
+          let inputEl = fixture.debugElement.query(By.css('input'));
           let el = fixture.debugElement.query(By.css('label'));
           expect(el).toBeNull();
 
@@ -195,6 +196,10 @@ describe('MdInput', function () {
           expect(el).not.toBeNull();
           expect(el.nativeElement.textContent).toMatch('Other placeholder');
           expect(el.nativeElement.textContent).not.toMatch(/\*/g);
+
+          // When placeholder is present, input should be labelled by the label element
+          expect(inputEl.nativeElement.getAttribute('aria-labelledby')).toBeTruthy();
+          expect(inputEl.nativeElement.getAttribute('aria-labelledby')).toBe(el.nativeElement.id);
         })();
       });
   });

src/components/input/input.ts

@@ -112,11 +112,19 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
    * Aria related inputs.
    */
   @Input('aria-label') ariaLabel: string;
-  @Input('aria-labelledby') ariaLabelledBy: string;
   @Input('aria-disabled') @BooleanFieldValue() ariaDisabled: boolean;
   @Input('aria-required') @BooleanFieldValue() ariaRequired: boolean;
   @Input('aria-invalid') @BooleanFieldValue() ariaInvalid: boolean;
 
+  private _ariaLabelledBy: string;
+  @Input('aria-labelledby')
+  get ariaLabelledBy(): string {
+    return this._ariaLabelledBy || this.labelId || null;
+  }
+  set ariaLabelledBy(value: string) {
+    this._ariaLabelledBy = value;
+  }
+
   /**
    * Content directives.
    */
@@ -130,6 +138,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
     return this.empty ? 0 : ('' + this._value).length;
   }
   get inputId(): string { return `${this.id}-input`; }
+  get labelId(): string { return `${this.id}-label`; }
 
   /**
    * Bindings.