skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(snackbar): set aria role based on if announcement message is provided (#13993)

Browse Source
This commit is contained in:
Joey Perrott
2018-11-07 10:21:41 -08:00
committed by vivian-hu
parent 81f8fb9582
commit 69ffd3306e
2 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/snack-bar/snack-bar-container.ts
+4 -4
View File
@@ -80,12 +80,12 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
// Based on the ARIA spec, `alert` and `status` roles have an
// implicit `assertive` and `polite` politeness respectively.
if (snackBarConfig.politeness === 'assertive') {
if (snackBarConfig.politeness === 'assertive' && !snackBarConfig.announcementMessage) {
this._role = 'alert';
} else if (snackBarConfig.politeness === 'polite') {
this._role = 'status';
} else {
} else if (snackBarConfig.politeness === 'off') {
this._role = null;
} else {
this._role = 'status';
}
}
src/lib/snack-bar/snack-bar.spec.ts
+18 -4
View File
@@ -67,8 +67,11 @@ describe('MatSnackBar', () => {
testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
});
it('should have the role of `alert` with an `assertive` politeness', () => {
snackBar.open(simpleMessage, simpleActionLabel, {politeness: 'assertive'});
it('should have the role of `alert` with an `assertive` politeness if no announcement message ' +
'is provided', () => {
snackBar.openFromComponent(BurritosNotification,
{announcementMessage: '', politeness: 'assertive'});
viewContainerFixture.detectChanges();
const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;
@@ -76,8 +79,19 @@ describe('MatSnackBar', () => {
.toBe('alert', 'Expected snack bar container to have role="alert"');
});
it('should have the role of `status` with an `assertive` politeness if an announcement message ' +
'is provided', () => {
snackBar.openFromComponent(BurritosNotification,
{announcementMessage: 'Yay Burritos', politeness: 'assertive'});
viewContainerFixture.detectChanges();
const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;
expect(containerElement.getAttribute('role'))
.toBe('status', 'Expected snack bar container to have role="status"');
});
it('should have the role of `status` with a `polite` politeness', () => {
snackBar.open(simpleMessage, simpleActionLabel, {politeness: 'polite'});
snackBar.openFromComponent(BurritosNotification, {politeness: 'polite'});
viewContainerFixture.detectChanges();
const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;
@@ -86,7 +100,7 @@ describe('MatSnackBar', () => {
});
it('should remove the role if the politeness is turned off', () => {
snackBar.open(simpleMessage, simpleActionLabel, {politeness: 'off'});
snackBar.openFromComponent(BurritosNotification, {politeness: 'off'});
viewContainerFixture.detectChanges();
const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;