fix(input): required asterisk being read out by screen readers (#6277)

Fixes the asterisk that gets added after a required input being read out by screen readers.

Author: crisbeto

src/lib/input/input-container.html

@@ -17,7 +17,10 @@
                *ngIf="_hasPlaceholder()">
           <ng-content select="md-placeholder, mat-placeholder"></ng-content>
           {{_mdInputChild.placeholder}}
-          <span class="mat-placeholder-required" *ngIf="!hideRequiredMarker && _mdInputChild.required">*</span>
+          <span
+            class="mat-placeholder-required"
+            aria-hidden="true"
+            *ngIf="!hideRequiredMarker && _mdInputChild.required">*</span>
         </label>
       </span>
     </div>

src/lib/input/input-container.spec.ts

@@ -377,6 +377,15 @@ describe('MdInputContainer without forms', function () {
     expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
   });
 
+  it('should hide the required star from screen readers', () => {
+    let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent);
+    fixture.detectChanges();
+
+    let el = fixture.debugElement.query(By.css('.mat-placeholder-required')).nativeElement;
+
+    expect(el.getAttribute('aria-hidden')).toBe('true');
+  });
+
   it('hide placeholder required star when set to hide the required marker', () => {
     let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent);
     fixture.detectChanges();