mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
committed by
vivian-hu
parent
94e76de1e1
commit
3fb4b2372f
@@ -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(() => {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user