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.
angular · Aug 4, 2017 · 0850981 · 0850981
1 parent 3df4d72
commit 0850981
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/lib/input/input-container.html b/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>

diff --git a/src/lib/input/input-container.spec.ts b/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();