From 6aa1a55ba75e73b8eb1a146db54332804c192e08 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 25 Jul 2018 04:27:39 +0200 Subject: [PATCH] refactor(live-announcer): add unique class to identify live element (#12309) * Adds a unique class to the live announcer element that is automatically created by the `LiveAnnouncer`. Similarly to the overlay container, the live announcer should be also distinguishable (e.g. for testing) --- src/cdk/a11y/live-announcer/live-announcer.spec.ts | 4 ++-- src/cdk/a11y/live-announcer/live-announcer.ts | 12 +++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/cdk/a11y/live-announcer/live-announcer.spec.ts b/src/cdk/a11y/live-announcer/live-announcer.spec.ts index 5de2ea9ae33..1d6285cc3ec 100644 --- a/src/cdk/a11y/live-announcer/live-announcer.spec.ts +++ b/src/cdk/a11y/live-announcer/live-announcer.spec.ts @@ -69,7 +69,7 @@ describe('LiveAnnouncer', () => { // Call the lifecycle hook manually since Angular won't do it in tests. announcer.ngOnDestroy(); - expect(document.body.querySelector('[aria-live]')) + expect(document.body.querySelector('.cdk-live-announcer-element')) .toBeFalsy('Expected that the aria-live element was remove from the DOM.'); })); @@ -184,7 +184,7 @@ describe('CdkAriaLive', () => { function getLiveElement(): Element { - return document.body.querySelector('[aria-live]')!; + return document.body.querySelector('.cdk-live-announcer-element')!; } @Component({template: ``}) diff --git a/src/cdk/a11y/live-announcer/live-announcer.ts b/src/cdk/a11y/live-announcer/live-announcer.ts index 67748555c46..f06eb5da903 100644 --- a/src/cdk/a11y/live-announcer/live-announcer.ts +++ b/src/cdk/a11y/live-announcer/live-announcer.ts @@ -29,15 +29,15 @@ export type AriaLivePoliteness = 'off' | 'polite' | 'assertive'; @Injectable({providedIn: 'root'}) export class LiveAnnouncer implements OnDestroy { - private readonly _liveElement: Element; + private readonly _liveElement: HTMLElement; constructor( @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any, @Inject(DOCUMENT) private _document: any) { - // We inject the live element as `any` because the constructor signature cannot reference - // browser globals (HTMLElement) on non-browser environments, since having a class decorator - // causes TypeScript to preserve the constructor signature types. + // We inject the live element and document as `any` because the constructor signature cannot + // reference browser globals (HTMLElement, Document) on non-browser environments, since having + // a class decorator causes TypeScript to preserve the constructor signature types. this._liveElement = elementToken || this._createLiveElement(); } @@ -72,10 +72,12 @@ export class LiveAnnouncer implements OnDestroy { } } - private _createLiveElement(): Element { + private _createLiveElement(): HTMLElement { let liveEl = this._document.createElement('div'); + liveEl.classList.add('cdk-live-announcer-element'); liveEl.classList.add('cdk-visually-hidden'); + liveEl.setAttribute('aria-atomic', 'true'); liveEl.setAttribute('aria-live', 'polite');