Skip to content

Commit 0850981

Browse files
crisbetotinayuangao
authored andcommitted
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.
1 parent 3df4d72 commit 0850981

File tree

2 files changed

+13
-1
lines changed

2 files changed

+13
-1
lines changed

src/lib/input/input-container.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
*ngIf="_hasPlaceholder()">
1818
<ng-content select="md-placeholder, mat-placeholder"></ng-content>
1919
{{_mdInputChild.placeholder}}
20-
<span class="mat-placeholder-required" *ngIf="!hideRequiredMarker && _mdInputChild.required">*</span>
20+
<span
21+
class="mat-placeholder-required"
22+
aria-hidden="true"
23+
*ngIf="!hideRequiredMarker && _mdInputChild.required">*</span>
2124
</label>
2225
</span>
2326
</div>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,15 @@ describe('MdInputContainer without forms', function () {
377377
expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
378378
});
379379

380+
it('should hide the required star from screen readers', () => {
381+
let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent);
382+
fixture.detectChanges();
383+
384+
let el = fixture.debugElement.query(By.css('.mat-placeholder-required')).nativeElement;
385+
386+
expect(el.getAttribute('aria-hidden')).toBe('true');
387+
});
388+
380389
it('hide placeholder required star when set to hide the required marker', () => {
381390
let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent);
382391
fixture.detectChanges();

0 commit comments

Comments
 (0)