feat(typeahead): enable override of the container for the live element

Enable the override of the container for the live element, through a DI token,
meaning that the Live service is not provided in root anymore and needs to be
provided when used in a component.
Fixes ng-bootstrap#4560

src/typeahead/typeahead.ts

@@ -20,7 +20,8 @@ import { DOCUMENT } from '@angular/common';
 import { BehaviorSubject, fromEvent, of, OperatorFunction, Subject, Subscription } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
 
-import { Live } from '../util/accessibility/live';
+import { Live, LIVE_CONTAINER } from '../util/accessibility/live';
+import { getShadowRootContainerIfAny } from '../util/accessibility/live.helper';
 import { ngbAutoClose } from '../util/autoclose';
 import { PopupService } from '../util/popup';
 import { ngbPositioning } from '../util/positioning';
@@ -67,7 +68,11 @@ let nextWindowId = 0;
  '[attr.aria-owns]': 'isPopupOpen() ? popupId : null',
  '[attr.aria-expanded]': 'isPopupOpen()',
  },
- providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgbTypeahead), multi: true }],
+ providers: [
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgbTypeahead), multi: true },
+ { provide: LIVE_CONTAINER, useFactory: getShadowRootContainerIfAny, deps: [ElementRef] },
+ Live,
+ ],
 })
 export class NgbTypeahead implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
  private _nativeElement = inject(ElementRef).nativeElement as HTMLInputElement;

src/util/accessibility/live.helper.ts

@@ -0,0 +1,7 @@
+import { ElementRef } from '@angular/core';
+
+export function getShadowRootContainerIfAny(elementRef: ElementRef): Node | null {
+ const _nativeElement = elementRef.nativeElement as HTMLInputElement;
+ const rootNode = _nativeElement.getRootNode();
+ return rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? rootNode : null;
+}

src/util/accessibility/live.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { Live, ARIA_LIVE_DELAY } from './live';
+import { Live, ARIA_LIVE_DELAY, LIVE_CONTAINER } from './live';
 
 function getLiveElement(): HTMLElement {
  return document.body.querySelector('#ngb-live')! as HTMLElement;
@@ -15,31 +15,55 @@ describe('LiveAnnouncer', () => {
  fixture.debugElement.query(By.css('button')).nativeElement.click();
  };
 
+ const configureTestingModule = (additionalProviders?: any[]) => {
+ TestBed.configureTestingModule({
+ providers: [
+ Live,
+ { provide: ARIA_LIVE_DELAY, useValue: null },
+ ...(additionalProviders ? additionalProviders : []),
+ ],
+ declarations: [TestComponent],
+ });
+ };
+
  describe('live announcer', () => {
- beforeEach(() =>
- TestBed.configureTestingModule({
- providers: [Live, { provide: ARIA_LIVE_DELAY, useValue: null }],
- declarations: [TestComponent],
- }),
- );
-
- beforeEach(inject([Live], (_live: Live) => {
- live = _live;
- fixture = TestBed.createComponent(TestComponent);
- }));
-
- it('should correctly update the text message', () => {
- say();
- const liveElement = getLiveElement();
- expect(liveElement.textContent).toBe('test');
- expect(liveElement.id).toBe('ngb-live');
+ describe('with the default container', () => {
+ beforeEach(() => configureTestingModule());
+
+ beforeEach(inject([Live], (_live: Live) => {
+ live = _live;
+ fixture = TestBed.createComponent(TestComponent);
+ }));
+
+ it('should correctly update the text message and be appended as a child of the default container', () => {
+ say();
+ const liveElement = getLiveElement();
+ expect(liveElement.parentElement?.tagName).toBe('BODY');
+ expect(liveElement.textContent).toBe('test');
+ expect(liveElement.id).toBe('ngb-live');
+ });
+
+ it('should remove the used element from the DOM on destroy', () => {
+ say();
+ live.ngOnDestroy();
+
+ expect(getLiveElement()).toBeFalsy();
+ });
  });
 
- it('should remove the used element from the DOM on destroy', () => {
- say();
- live.ngOnDestroy();
+ describe('with an overriding container', () => {
+ it('should be correctly appended as a child of the overriding container when provided', () => {
+ const containerId = 'overriding-container';
+ const container = document.createElement('div');
+ container.id = containerId;
+ document.body.appendChild(container);
+ configureTestingModule([{ provide: LIVE_CONTAINER, useValue: container }]);
+ fixture = TestBed.createComponent(TestComponent);
 
- expect(getLiveElement()).toBeFalsy();
+ say();
+ const liveElement = getLiveElement();
+ expect(liveElement.parentElement?.id).toBe(containerId);
+ });
  });
  });
 });

src/util/accessibility/live.ts

@@ -2,12 +2,15 @@ import { inject, Injectable, InjectionToken, OnDestroy } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 export const ARIA_LIVE_DELAY = new InjectionToken<number | null>('live announcer delay', {
- providedIn: 'root',
  factory: () => 100,
 });
 
-function getLiveElement(document: any, lazyCreate = false): HTMLElement | null {
- let element = document.body.querySelector('#ngb-live') as HTMLElement;
+export const LIVE_CONTAINER = new InjectionToken<HTMLElement | null>('live container', {
+ factory: () => null,
+});
+
+function getLiveElement(document: any, container: HTMLElement, lazyCreate = false): HTMLElement | null {
+ let element = container.querySelector('#ngb-live') as HTMLElement;
 
  if (element == null && lazyCreate) {
  element = document.createElement('div');
@@ -16,29 +19,28 @@ function getLiveElement(document: any, lazyCreate = false): HTMLElement | null {
  element.setAttribute('aria-live', 'polite');
  element.setAttribute('aria-atomic', 'true');
 
- element.classList.add('visually-hidden');
-
- document.body.appendChild(element);
+ container.appendChild(element);
  }
 
  return element;
 }
 
-@Injectable({ providedIn: 'root' })
+@Injectable()
 export class Live implements OnDestroy {
  private _document = inject(DOCUMENT);
  private _delay = inject(ARIA_LIVE_DELAY);
+ private _container = inject(LIVE_CONTAINER) || this._document.body;
 
  ngOnDestroy() {
- const element = getLiveElement(this._document);
+ const element = getLiveElement(this._document, this._container);
  if (element) {
  // if exists, it will always be attached to the <body>
  element.parentElement!.removeChild(element);
  }
  }
 
  say(message: string) {
- const element = getLiveElement(this._document, true);
+ const element = getLiveElement(this._document, this._container, true);
  const delay = this._delay;
 
  if (element != null) {