fix(live-announcer): duplicate live element when coming in from the server (#12378)

Fixes the case where the user might get multiple live announcer elements, if they're coming in from a server-side-rendered page. Along the same lines as #11940.

Author: crisbeto

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

@@ -81,6 +81,33 @@ describe('LiveAnnouncer', () => {
       tick(100);
       expect(spy).toHaveBeenCalled();
     }));
+
+    it('should ensure that there is only one live element at a time', fakeAsync(() => {
+      announcer.ngOnDestroy();
+      fixture.destroy();
+
+      TestBed.resetTestingModule().configureTestingModule({
+        imports: [A11yModule],
+        declarations: [TestApp],
+      });
+
+      const extraElement = document.createElement('div');
+      extraElement.classList.add('cdk-live-announcer-element');
+      document.body.appendChild(extraElement);
+
+      inject([LiveAnnouncer], (la: LiveAnnouncer) => {
+        announcer = la;
+        ariaLiveElement = getLiveElement();
+        fixture = TestBed.createComponent(TestApp);
+      })();
+
+      announcer.announce('Hey Google');
+      tick(100);
+
+      expect(document.body.querySelectorAll('.cdk-live-announcer-element').length)
+          .toBe(1, 'Expected only one live announcer element in the DOM.');
+    }));
+
   });
 
   describe('with a custom element', () => {

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

@@ -29,15 +29,17 @@ export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
 
 @Injectable({providedIn: 'root'})
 export class LiveAnnouncer implements OnDestroy {
-  private readonly _liveElement: Element;
+  private readonly _liveElement: HTMLElement;
+  private _document: Document;
 
   constructor(
       @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
-      @Inject(DOCUMENT) private _document: any) {
+      @Inject(DOCUMENT) _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._document = _document;
     this._liveElement = elementToken || this._createLiveElement();
   }
 
@@ -72,9 +74,17 @@ export class LiveAnnouncer implements OnDestroy {
     }
   }
 
-  private _createLiveElement(): Element {
-    let liveEl = this._document.createElement('div');
+  private _createLiveElement(): HTMLElement {
+    const elementClass = 'cdk-live-announcer-element';
+    const previousElements = this._document.getElementsByClassName(elementClass);
 
+    // Remove any old containers. This can happen when coming in from a server-side-rendered page.
+    for (let i = 0; i < previousElements.length; i++) {
+      previousElements[i].parentNode!.removeChild(previousElements[i]);
+    }
+
+    const liveEl = this._document.createElement('div');
+    liveEl.classList.add(elementClass);
     liveEl.classList.add('cdk-visually-hidden');
     liveEl.setAttribute('aria-atomic', 'true');
     liveEl.setAttribute('aria-live', 'polite');