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)
This commit is contained in:
Paul Gschwendtner
2018-07-25 04:27:39 +02:00
committed by mmalerba
parent 6a0b8f79a4
commit 6aa1a55ba7
2 changed files with 9 additions and 7 deletions
@@ -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: `<button (click)="announceText('Test')">Announce</button>`})
@@ -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');