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:
Kristiyan Kostadinov
2017-08-05 00:18:52 +02:00
committed by tinayuangao
parent 9d3c4050f4
commit 3df4d72c28
2 changed files with 8 additions and 0 deletions
+7
View File
@@ -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');
+1
View File
@@ -102,6 +102,7 @@ export class MdHint {
selector: 'md-error, mat-error',
host: {
'class': 'mat-input-error',
'role': 'alert',
'[attr.id]': 'id',
}
})