refactor(live-announcer): run outside NgZone

Switches to running the timeout from the `LiveAnnouncer` outside the `NgZone`, because it does all of its DOM manipulation directly on the element and it doesn't have to trigger Angular's change detection.

Author: crisbeto

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

@@ -14,6 +14,7 @@ import {
   Optional,
   Provider,
   SkipSelf,
+  NgZone,
 } from '@angular/core';
 import {LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer-token';
 
@@ -27,7 +28,8 @@ export class LiveAnnouncer implements OnDestroy {
 
   constructor(
       @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
-      @Inject(DOCUMENT) private _document: any) {
+      @Inject(DOCUMENT) private _document: any,
+      private _ngZone: NgZone) {
 
     // 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
@@ -52,11 +54,13 @@ export class LiveAnnouncer implements OnDestroy {
     // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
     //   second time without clearing and then using a non-zero delay.
     // (using JAWS 17 at time of this writing).
-    return new Promise(resolve => {
-      setTimeout(() => {
-        this._liveElement.textContent = message;
-        resolve();
-      }, 100);
+    return this._ngZone.runOutsideAngular(() => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          this._liveElement.textContent = message;
+          resolve();
+        }, 100);
+      });
     });
   }
 
@@ -67,7 +71,7 @@ export class LiveAnnouncer implements OnDestroy {
   }
 
   private _createLiveElement(): Element {
-    let liveEl = this._document.createElement('div');
+    const liveEl = this._document.createElement('div');
 
     liveEl.classList.add('cdk-visually-hidden');
     liveEl.setAttribute('aria-atomic', 'true');
@@ -83,8 +87,8 @@ export class LiveAnnouncer implements OnDestroy {
 
 /** @docs-private @deprecated @deletion-target 7.0.0 */
 export function LIVE_ANNOUNCER_PROVIDER_FACTORY(
-    parentDispatcher: LiveAnnouncer, liveElement: any, _document: any) {
-  return parentDispatcher || new LiveAnnouncer(liveElement, _document);
+    parentDispatcher: LiveAnnouncer, liveElement: any, _document: any, ngZone: NgZone) {
+  return parentDispatcher || new LiveAnnouncer(liveElement, _document, ngZone);
 }
 
 /** @docs-private @deprecated @deletion-target 7.0.0 */
@@ -95,6 +99,7 @@ export const LIVE_ANNOUNCER_PROVIDER: Provider = {
     [new Optional(), new SkipSelf(), LiveAnnouncer],
     [new Optional(), new Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN)],
     DOCUMENT,
+    NgZone,
   ],
   useFactory: LIVE_ANNOUNCER_PROVIDER_FACTORY
 };