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/material/chips/chip-list.ts

@@ -251,7 +251,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
    * @docs-private
    */
   get empty(): boolean {
-    return (!this._chipInput || this._chipInput.empty) && this.chips.length === 0;
+    return (!this._chipInput || this._chipInput.empty) && (!this.chips || this.chips.length === 0);
   }
 
   /**

src/material/input/input.spec.ts

@@ -355,22 +355,31 @@ describe('MatInput without forms', () => {
     let fixture = 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 = createComponent(MatInputPlaceholderElementTestComponent);
     fixture.detectChanges();
@@ -895,7 +904,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/material/input/input.ts

@@ -29,7 +29,7 @@ import {
   ErrorStateMatcher,
   mixinErrorState,
 } from '@angular/material/core';
-import {MatFormFieldControl} from '@angular/material/form-field';
+import {MatFormFieldControl, MatFormField} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 import {getMatInputUnsupportedTypeError} from './input-errors';
 import {MAT_INPUT_VALUE_ACCESSOR} from './input-value-accessor';
@@ -76,7 +76,7 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof 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',
     '[attr.readonly]': 'readonly && !_isNativeSelect || null',
@@ -231,8 +231,9 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     _defaultErrorStateMatcher: ErrorStateMatcher,
     @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
     private _autofillMonitor: AutofillMonitor,
-    ngZone: NgZone) {
-
+    ngZone: NgZone,
+    // @breaking-change 8.0.0 `_formField` parameter to be made required.
+    @Optional() private _formField?: MatFormField) {
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
 
     const element = this._elementRef.nativeElement;
@@ -332,6 +333,16 @@ 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.
+    // TODO: can be removed once we get rid of the `legacy` style for the form field, because it's
+    // the only one that supports promoting the placeholder to a label.
+    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._elementRef.nativeElement.value;