Skip to content

Commit 6c615c8

Browse files
crisbetoandrewseguin
authored andcommitted
fix(snack-bar): announcing same message twice to screen readers (#14504)
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.
1 parent 8f931bd commit 6c615c8

File tree

2 files changed

+7
-7
lines changed

2 files changed

+7
-7
lines changed

src/material/snack-bar/snack-bar.spec.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -184,18 +184,16 @@ describe('MatSnackBar', () => {
184184
}));
185185

186186

187-
it('should default to the passed message for the announcement message', fakeAsync(() => {
187+
it('should clear the announcement message if it is the same as main message', fakeAsync(() => {
188188
spyOn(liveAnnouncer, 'announce');
189189

190-
snackBar.open(simpleMessage);
190+
snackBar.open(simpleMessage, undefined, {announcementMessage: simpleMessage});
191191
viewContainerFixture.detectChanges();
192192

193193
expect(overlayContainerElement.childElementCount)
194194
.toBe(1, 'Expected the overlay with the default announcement message to be added');
195195

196-
// Expect the live announcer to have been called with the display message and some
197-
// string for the politeness. We do not want to test for the default politeness here.
198-
expect(liveAnnouncer.announce).toHaveBeenCalledWith(simpleMessage, jasmine.any(String));
196+
expect(liveAnnouncer.announce).not.toHaveBeenCalled();
199197
}));
200198

201199
it('should be able to specify a custom announcement message', fakeAsync(() => {

src/material/snack-bar/snack-bar.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,10 @@ export class MatSnackBar implements OnDestroy {
123123
// override the data to pass in our own message and action.
124124
_config.data = {message, action};
125125

126-
if (!_config.announcementMessage) {
127-
_config.announcementMessage = message;
126+
// Since the snack bar has `role="alert"`, we don't
127+
// want to announce the same message twice.
128+
if (_config.announcementMessage === message) {
129+
_config.announcementMessage = undefined;
128130
}
129131

130132
return this.openFromComponent(this.simpleSnackBarComponent, _config);

0 commit comments

Comments
 (0)