Skip to content

Commit

Permalink
fix(input): set proper role on md-error (angular#6259)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
crisbeto authored and tinayuangao committed Aug 4, 2017
1 parent 9d3c405 commit 3df4d72
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 0 deletions.
7 changes: 7 additions & 0 deletions src/lib/input/input-container.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
1 change: 1 addition & 0 deletions src/lib/input/input-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export class MdHint {
selector: 'md-error, mat-error',
host: {
'class': 'mat-input-error',
'role': 'alert',
'[attr.id]': 'id',
}
})
Expand Down

0 comments on commit 3df4d72

Please sign in to comment.