fix(material/snack-bar): fix Firefox/JAWS not reading out snackbar message (#21552)

Author: annieyw

src/material-experimental/mdc-snack-bar/BUILD.bazel

@@ -69,6 +69,7 @@ ng_test_library(
         ":mdc-snack-bar",
         "//src/cdk/a11y",
         "//src/cdk/overlay",
+        "//src/cdk/platform",
         "@npm//@angular/common",
         "@npm//@angular/platform-browser",
     ],

src/material-experimental/mdc-snack-bar/snack-bar-container.html

@@ -10,6 +10,6 @@
     </div>
 
     <!-- Will receive the snack bar content from the non-live div, move will happen a short delay after opening -->
-    <div [attr.aria-live]="_live"></div>
+    <div [attr.aria-live]="_live" [attr.role]="_role"></div>
   </div>
 </div>

src/material-experimental/mdc-snack-bar/snack-bar-container.ts

@@ -86,6 +86,12 @@ export class MatSnackBarContainer extends BasePortalOutlet
   /** Whether the snack bar is currently exiting. */
   _exiting = false;
 
+  /**
+   * Role of the live region. This is only for Firefox as there is a known issue where Firefox +
+   * JAWS does not read out aria-live message.
+   */
+  _role?: 'status' | 'alert';
+
   private _mdcAdapter: MDCSnackbarAdapter = {
     addClass: (className: string) => this._setClass(className, true),
     removeClass: (className: string) => this._setClass(className, false),
@@ -132,6 +138,17 @@ export class MatSnackBarContainer extends BasePortalOutlet
       this._live = 'polite';
     }
 
+    // Only set role for Firefox. Set role based on aria-live because setting role="alert" implies
+    // aria-live="assertive" which may cause issues if aria-live is set to "polite" above.
+    if (this._platform.FIREFOX) {
+      if (this._live === 'polite') {
+        this._role = 'status';
+      }
+      if (this._live === 'assertive') {
+        this._role = 'alert';
+      }
+    }
+
     // `MatSnackBar` will use the config's timeout to determine when the snack bar should be closed.
     // Set this to `-1` to mark it as indefinitely open so that MDC does not close itself.
     this._mdcFoundation.setTimeoutMs(-1);

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

@@ -21,6 +21,7 @@ import {
   MatSnackBarModule,
   MatSnackBarRef,
 } from './index';
+import {Platform} from '@angular/cdk/platform';
 
 describe('MatSnackBar', () => {
   let snackBar: MatSnackBar;
@@ -161,6 +162,30 @@ describe('MatSnackBar', () => {
         .toBe('off', 'Expected snack bar container live region to have aria-live="off"');
   });
 
+  it('should have role of `alert` with an `assertive` politeness (Firefox only)', () => {
+    const platform = TestBed.inject(Platform);
+    snackBar.openFromComponent(BurritosNotification, {politeness: 'assertive'});
+    viewContainerFixture.detectChanges();
+
+    const containerElement = overlayContainerElement.querySelector('mat-mdc-snack-bar-container')!;
+    const liveElement = containerElement.querySelector('[aria-live]')!;
+
+    expect(liveElement.getAttribute('role'))
+      .toBe(platform.FIREFOX ? 'alert' : null);
+  });
+
+  it('should have role of `status` with an `polite` politeness (Firefox only)', () => {
+    const platform = TestBed.inject(Platform);
+    snackBar.openFromComponent(BurritosNotification, {politeness: 'polite'});
+    viewContainerFixture.detectChanges();
+
+    const containerElement = overlayContainerElement.querySelector('mat-mdc-snack-bar-container')!;
+    const liveElement = containerElement.querySelector('[aria-live]')!;
+
+    expect(liveElement.getAttribute('role'))
+      .toBe(platform.FIREFOX ? 'status' : null);
+  });
+
   it('should have exactly one MDC label element when opened through simple snack bar', () => {
     let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef};
     snackBar.open(simpleMessage, simpleActionLabel, config);

src/material/snack-bar/BUILD.bazel

@@ -65,6 +65,7 @@ ng_test_library(
         ":snack-bar",
         "//src/cdk/a11y",
         "//src/cdk/overlay",
+        "//src/cdk/platform",
         "@npm//@angular/common",
         "@npm//@angular/platform-browser",
     ],

src/material/snack-bar/snack-bar-container.html

@@ -1,7 +1,7 @@
-<!-- Initialy holds the snack bar content, will be empty after announcing to screen readers. -->
+<!-- Initially holds the snack bar content, will be empty after announcing to screen readers. -->
 <div aria-hidden="true">
   <ng-template cdkPortalOutlet></ng-template>
 </div>
 
 <!-- Will receive the snack bar content from the non-live div, move will happen a short delay after opening -->
-<div [attr.aria-live]="_live"></div>
+<div [attr.aria-live]="_live" [attr.role]="_role"></div>

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

@@ -98,6 +98,12 @@ export class MatSnackBarContainer extends BasePortalOutlet
   /** aria-live value for the live region. */
   _live: AriaLivePoliteness;
 
+  /**
+   * Role of the live region. This is only for Firefox as there is a known issue where Firefox +
+   * JAWS does not read out aria-live message.
+   */
+  _role?: 'status' | 'alert';
+
   constructor(
     private _ngZone: NgZone,
     private _elementRef: ElementRef<HTMLElement>,
@@ -117,6 +123,17 @@ export class MatSnackBarContainer extends BasePortalOutlet
     } else {
       this._live = 'polite';
     }
+
+    // Only set role for Firefox. Set role based on aria-live because setting role="alert" implies
+    // aria-live="assertive" which may cause issues if aria-live is set to "polite" above.
+    if (this._platform.FIREFOX) {
+      if (this._live === 'polite') {
+        this._role = 'status';
+      }
+      if (this._live === 'assertive') {
+        this._role = 'alert';
+      }
+    }
   }
 
   /** Attach a component portal as content to this snack bar container. */

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

@@ -22,6 +22,7 @@ import {
   MatSnackBarRef,
   SimpleSnackBar,
 } from './index';
+import {Platform} from '@angular/cdk/platform';
 
 describe('MatSnackBar', () => {
   let snackBar: MatSnackBar;
@@ -159,6 +160,30 @@ describe('MatSnackBar', () => {
         .toBe('off', 'Expected snack bar container live region to have aria-live="off"');
   });
 
+  it('should have role of `alert` with an `assertive` politeness (Firefox only)', () => {
+    const platform = TestBed.inject(Platform);
+    snackBar.openFromComponent(BurritosNotification, {politeness: 'assertive'});
+    viewContainerFixture.detectChanges();
+
+    const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;
+    const liveElement = containerElement.querySelector('[aria-live]')!;
+
+    expect(liveElement.getAttribute('role'))
+      .toBe(platform.FIREFOX ? 'alert' : null);
+  });
+
+  it('should have role of `status` with an `polite` politeness (Firefox only)', () => {
+    const platform = TestBed.inject(Platform);
+    snackBar.openFromComponent(BurritosNotification, {politeness: 'polite'});
+    viewContainerFixture.detectChanges();
+
+    const containerElement = overlayContainerElement.querySelector('snack-bar-container')!;
+    const liveElement = containerElement.querySelector('[aria-live]')!;
+
+    expect(liveElement.getAttribute('role'))
+      .toBe(platform.FIREFOX ? 'status' : null);
+  });
+
   it('should open and close a snackbar without a ViewContainerRef', fakeAsync(() => {
     let snackBarRef = snackBar.open('Snack time!', 'Chew');
     viewContainerFixture.detectChanges();

tools/public_api_guard/material/snack-bar.d.ts

@@ -54,6 +54,7 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements On
     readonly _onEnter: Subject<void>;
     readonly _onExit: Subject<void>;
     _portalOutlet: CdkPortalOutlet;
+    _role?: 'status' | 'alert';
     attachDomPortal: (portal: DomPortal) => void;
     snackBarConfig: MatSnackBarConfig;
     constructor(_ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _platform: Platform,