mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(input): set proper role on md-error (#6259)
Sets the `alert` role on `md-error` instances, causing the messages to be read out properly by screen readers. For reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
This commit is contained in:
committed by
tinayuangao
parent
9d3c4050f4
commit
3df4d72c28
@@ -814,6 +814,13 @@ describe('MdInputContainer with forms', () => {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should set the proper role on the error messages', () => {
|
||||
testComponent.formControl.markAsTouched();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(containerEl.querySelector('md-error')!.getAttribute('role')).toBe('alert');
|
||||
});
|
||||
|
||||
it('sets the aria-describedby to reference errors when in error state', () => {
|
||||
let hintId = fixture.debugElement.query(By.css('.mat-hint')).nativeElement.getAttribute('id');
|
||||
let describedBy = inputEl.getAttribute('aria-describedby');
|
||||
|
||||
@@ -102,6 +102,7 @@ export class MdHint {
|
||||
selector: 'md-error, mat-error',
|
||||
host: {
|
||||
'class': 'mat-input-error',
|
||||
'role': 'alert',
|
||||
'[attr.id]': 'id',
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user