fix(input): placeholder being read out twice by some screen readers

Currently we hide the native placeholder using CSS while we mirror its value in the form field label, however because the value is still in the DOM, some screen readers will read it out twice: once for the label and once for the attribute. These changes remove the attribute from the DOM if it isn't supposed to be shown.

Fixes #9721.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -373,26 +373,37 @@ describe('MatInput without forms', () => {
     expect(hint.getAttribute('id')).toBeTruthy();
   }));
 
-  it('supports placeholder attribute', fakeAsync(() => {
+  it('should mirror the placeholder attribute into the label', fakeAsync(() => {
     let fixture = TestBed.createComponent(MatInputPlaceholderAttrTestComponent);
     fixture.detectChanges();
 
     let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
 
     expect(fixture.debugElement.query(By.css('label'))).toBeNull();
-    expect(inputEl.placeholder).toBe('');
 
     fixture.componentInstance.placeholder = 'Other placeholder';
     fixture.detectChanges();
 
     let labelEl = fixture.debugElement.query(By.css('label'));
 
-    expect(inputEl.placeholder).toBe('Other placeholder');
     expect(labelEl).not.toBeNull();
     expect(labelEl.nativeElement.textContent).toMatch('Other placeholder');
     expect(labelEl.nativeElement.textContent).not.toMatch(/\*/g);
   }));
 
+  it('should not render the native placeholder when its value is mirrored in the label',
+    fakeAsync(() => {
+      const fixture = TestBed.createComponent(MatInputPlaceholderAttrTestComponent);
+      fixture.componentInstance.placeholder = 'Enter a name';
+      fixture.detectChanges();
+
+      const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+      const labelEl = fixture.debugElement.query(By.css('label'));
+
+      expect(inputEl.hasAttribute('placeholder')).toBe(false);
+      expect(labelEl.nativeElement.textContent).toContain('Enter a name');
+    }));
+
   it('supports placeholder element', fakeAsync(() => {
     let fixture = TestBed.createComponent(MatInputPlaceholderElementTestComponent);
     fixture.detectChanges();
@@ -779,7 +790,7 @@ describe('MatInput without forms', () => {
     expect(container.classList).toContain('mat-form-field-hide-placeholder');
     expect(container.classList).not.toContain('mat-form-field-should-float');
     expect(label.textContent.trim()).toBe('Label');
-    expect(input.getAttribute('placeholder')).toBe('Placeholder');
+    expect(input.hasAttribute('placeholder')).toBe(false);
 
     input.value = 'Value';
     fixture.detectChanges();

src/lib/input/input.ts

@@ -22,7 +22,7 @@ import {
 } from '@angular/core';
 import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
-import {MatFormFieldControl} from '@angular/material/form-field';
+import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs/Subject';
 import {AutofillMonitor} from '@angular/cdk/text-field';
 import {getMatInputUnsupportedTypeError} from './input-errors';
@@ -68,7 +68,7 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.
     '[attr.id]': 'id',
-    '[attr.placeholder]': 'placeholder',
+    '[attr.placeholder]': '_getNativePlaceholderValue()',
     '[disabled]': 'disabled',
     '[required]': 'required',
     '[readonly]': 'readonly',
@@ -218,7 +218,8 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
               @Optional() _parentFormGroup: FormGroupDirective,
               _defaultErrorStateMatcher: ErrorStateMatcher,
               @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
-              private _autofillMonitor: AutofillMonitor) {
+              private _autofillMonitor: AutofillMonitor,
+              @Optional() private _formField?: MatFormField) {
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
     // If no input value accessor was explicitly specified, use the element as the input value
     // accessor.
@@ -299,6 +300,14 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
   }
 
+  /** Determines the value of the native `placeholder` attribute that should be used in the DOM. */
+  _getNativePlaceholderValue() {
+    // If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
+    // screen readers will read it out twice: once from the label and once from the attribute.
+    const formField = this._formField;
+    return (!formField || !formField._hideControlPlaceholder()) ? this.placeholder : null;
+  }
+
   /** Does some manual dirty checking on the native input `value` property. */
   protected _dirtyCheckNativeValue() {
     const newValue = this.value;