From 3fb4b2372f419f0728e6a889e930bd3868673880 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 12 Dec 2018 19:19:40 +0100 Subject: [PATCH] fix(snack-bar): announcing same message twice to screen readers (#13298) Currently we have `role="alert"` on the snack bar which will cause screen readers to announce the message automatically. On top of it, we also use the `LiveAnnouncer` to announce the same message, if the consumer hasn't set one. These changes clear the `announcementMessage` if it's the same as the main message. --- src/lib/snack-bar/snack-bar.spec.ts | 8 +++----- src/lib/snack-bar/snack-bar.ts | 6 ++++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 2a65a919a07..21fc199a7bb 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -186,18 +186,16 @@ describe('MatSnackBar', () => { })); - it('should default to the passed message for the announcement message', fakeAsync(() => { + it('should clear the announcement message if it is the same as main message', fakeAsync(() => { spyOn(liveAnnouncer, 'announce'); - snackBar.open(simpleMessage); + snackBar.open(simpleMessage, undefined, {announcementMessage: simpleMessage}); viewContainerFixture.detectChanges(); expect(overlayContainerElement.childElementCount) .toBe(1, 'Expected the overlay with the default announcement message to be added'); - // Expect the live announcer to have been called with the display message and some - // string for the politeness. We do not want to test for the default politeness here. - expect(liveAnnouncer.announce).toHaveBeenCalledWith(simpleMessage, jasmine.any(String)); + expect(liveAnnouncer.announce).not.toHaveBeenCalled(); })); it('should be able to specify a custom announcement message', fakeAsync(() => { diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index d2028d0dd1b..84d1293f66b 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -114,8 +114,10 @@ export class MatSnackBar implements OnDestroy { // override the data to pass in our own message and action. _config.data = {message, action}; - if (!_config.announcementMessage) { - _config.announcementMessage = message; + // Since the snack bar has `role="alert"`, we don't + // want to announce the same message twice. + if (_config.announcementMessage === message) { + _config.announcementMessage = undefined; } return this.openFromComponent(SimpleSnackBar, _config);