mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
mmalerba
parent
6a0b8f79a4
commit
6aa1a55ba7
@@ -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');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user