fix(cdk/a11y): live announcer not working with aria-modal element (#25978)

When an `aria-modal="true"` element is present, some browsers exclude all the content outside of them from the a11y tree which breaks the `LiveAnnouncer`.

These changes add some logic to set an `aria-owns` on the modals so that the announcement is made.

Fixes #22733.

Author: crisbeto

src/cdk/a11y/BUILD.bazel

@@ -49,6 +49,7 @@ ng_test_library(
         ":a11y",
         "//src/cdk/keycodes",
         "//src/cdk/observers",
+        "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/portal",
         "//src/cdk/testing/private",

src/cdk/a11y/live-announcer/live-announcer.spec.ts

@@ -1,4 +1,6 @@
 import {MutationObserverFactory} from '@angular/cdk/observers';
+import {Overlay} from '@angular/cdk/overlay';
+import {ComponentPortal} from '@angular/cdk/portal';
 import {Component} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -12,24 +14,24 @@ import {
 
 describe('LiveAnnouncer', () => {
   let announcer: LiveAnnouncer;
+  let overlay: Overlay;
   let ariaLiveElement: Element;
   let fixture: ComponentFixture<TestApp>;
 
   describe('with default element', () => {
     beforeEach(() =>
       TestBed.configureTestingModule({
         imports: [A11yModule],
-        declarations: [TestApp],
+        declarations: [TestApp, TestModal],
       }),
     );
 
-    beforeEach(fakeAsync(
-      inject([LiveAnnouncer], (la: LiveAnnouncer) => {
-        announcer = la;
-        ariaLiveElement = getLiveElement();
-        fixture = TestBed.createComponent(TestApp);
-      }),
-    ));
+    beforeEach(fakeAsync(() => {
+      overlay = TestBed.inject(Overlay);
+      announcer = TestBed.inject(LiveAnnouncer);
+      ariaLiveElement = getLiveElement();
+      fixture = TestBed.createComponent(TestApp);
+    }));
 
     it('should correctly update the announce text', fakeAsync(() => {
       let buttonElement = fixture.debugElement.query(By.css('button'))!.nativeElement;
@@ -172,6 +174,49 @@ describe('LiveAnnouncer', () => {
       // Since we're testing whether the timeouts were flushed, we don't need any
       // assertions here. `fakeAsync` will fail the test if a timer was left over.
     }));
+
+    it('should add aria-owns to open aria-modal elements', fakeAsync(() => {
+      const portal = new ComponentPortal(TestModal);
+      const overlayRef = overlay.create();
+      const componentRef = overlayRef.attach(portal);
+      const modal = componentRef.location.nativeElement;
+      fixture.detectChanges();
+
+      expect(ariaLiveElement.id).toBeTruthy();
+      expect(modal.hasAttribute('aria-owns')).toBe(false);
+
+      announcer.announce('Hey Google', 'assertive');
+      tick(100);
+      expect(modal.getAttribute('aria-owns')).toBe(ariaLiveElement.id);
+
+      // Verify that the ID isn't duplicated.
+      announcer.announce('Hey Google again', 'assertive');
+      tick(100);
+      expect(modal.getAttribute('aria-owns')).toBe(ariaLiveElement.id);
+    }));
+
+    it('should expand aria-owns of open aria-modal elements', fakeAsync(() => {
+      const portal = new ComponentPortal(TestModal);
+      const overlayRef = overlay.create();
+      const componentRef = overlayRef.attach(portal);
+      const modal = componentRef.location.nativeElement;
+      fixture.detectChanges();
+
+      componentRef.instance.ariaOwns = 'foo bar';
+      componentRef.changeDetectorRef.detectChanges();
+
+      expect(ariaLiveElement.id).toBeTruthy();
+      expect(modal.getAttribute('aria-owns')).toBe('foo bar');
+
+      announcer.announce('Hey Google', 'assertive');
+      tick(100);
+      expect(modal.getAttribute('aria-owns')).toBe(`foo bar ${ariaLiveElement.id}`);
+
+      // Verify that the ID isn't duplicated.
+      announcer.announce('Hey Google again', 'assertive');
+      tick(100);
+      expect(modal.getAttribute('aria-owns')).toBe(`foo bar ${ariaLiveElement.id}`);
+    }));
   });
 
   describe('with a custom element', () => {
@@ -359,6 +404,11 @@ class TestApp {
   }
 }
 
+@Component({template: '', host: {'[attr.aria-owns]': 'ariaOwns', 'aria-modal': 'true'}})
+class TestModal {
+  ariaOwns: string | null = null;
+}
+
 @Component({
   template: `
     <div

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -26,6 +26,8 @@ import {
   LIVE_ANNOUNCER_DEFAULT_OPTIONS,
 } from './live-announcer-tokens';
 
+let uniqueIds = 0;
+
 @Injectable({providedIn: 'root'})
 export class LiveAnnouncer implements OnDestroy {
   private _liveElement: HTMLElement;
@@ -111,6 +113,10 @@ export class LiveAnnouncer implements OnDestroy {
     // TODO: ensure changing the politeness works on all environments we support.
     this._liveElement.setAttribute('aria-live', politeness);
 
+    if (this._liveElement.id) {
+      this._exposeAnnouncerToModals(this._liveElement.id);
+    }
+
     // This 100ms timeout is necessary for some browser + screen-reader combinations:
     // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
     // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
@@ -171,11 +177,37 @@ export class LiveAnnouncer implements OnDestroy {
 
     liveEl.setAttribute('aria-atomic', 'true');
     liveEl.setAttribute('aria-live', 'polite');
+    liveEl.id = `cdk-live-announcer-${uniqueIds++}`;
 
     this._document.body.appendChild(liveEl);
 
     return liveEl;
   }
+
+  /**
+   * Some browsers won't expose the accessibility node of the live announcer element if there is an
+   * `aria-modal` and the live announcer is outside of it. This method works around the issue by
+   * pointing the `aria-owns` of all modals to the live announcer element.
+   */
+  private _exposeAnnouncerToModals(id: string) {
+    // Note that the selector here is limited to CDK overlays at the moment in order to reduce the
+    // section of the DOM we need to look through. This should cover all the cases we support, but
+    // the selector can be expanded if it turns out to be too narrow.
+    const modals = this._document.querySelectorAll(
+      'body > .cdk-overlay-container [aria-modal="true"]',
+    );
+
+    for (let i = 0; i < modals.length; i++) {
+      const modal = modals[i];
+      const ariaOwns = modal.getAttribute('aria-owns');
+
+      if (!ariaOwns) {
+        modal.setAttribute('aria-owns', id);
+      } else if (ariaOwns.indexOf(id) === -1) {
+        modal.setAttribute('aria-owns', ariaOwns + ' ' + id);
+      }
+    }
+  }
 }
 
 /**