feat(live-announcer): add possibility to use a custom live element

src/core/live-announcer/live-announcer.spec.ts

@@ -9,11 +9,12 @@ import {
   fakeAsync,
   flushMicrotasks,
   tick,
-  beforeEachProviders
+  beforeEachProviders,
+  getTestInjector
 } from 'angular2/testing';
-import {Component} from 'angular2/core';
+import {Component, provide} from 'angular2/core';
 import {By} from 'angular2/platform/browser';
-import {MdLiveAnnouncer} from './live-announcer';
+import {MdLiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer';
 
 export function main() {
   describe('MdLiveAnnouncer', () => {
@@ -92,6 +93,28 @@ export function main() {
       expect(liveEl.getAttribute('aria-live')).toBe('polite');
     }));
 
+    it('should allow to use a custom live element', fakeAsyncTest(() => {
+      let customLiveEl = document.createElement('div');
+
+      // We need to reset our test injector here, because it is already instantiated above.
+      getTestInjector().reset();
+
+      getTestInjector().addProviders([
+        provide(LIVE_ANNOUNCER_ELEMENT_TOKEN, {useValue: customLiveEl}),
+        MdLiveAnnouncer
+      ]);
+
+      let injector = getTestInjector().createInjector();
+      let liveService: MdLiveAnnouncer = injector.get(MdLiveAnnouncer);
+
+      liveService.announce('Custom Element');
+
+      // This flushes our 100ms timeout for the screenreaders.
+      tick(100);
+
+      expect(customLiveEl.textContent).toBe('Custom Element');
+    }));
+
   });
 }
 

src/core/live-announcer/live-announcer.ts

@@ -1,4 +1,11 @@
-import {Injectable} from 'angular2/core';
+import {
+  Injectable,
+  OpaqueToken,
+  Optional,
+  Inject
+} from 'angular2/core';
+
+export const LIVE_ANNOUNCER_ELEMENT_TOKEN  = new OpaqueToken('mdLiveAnnouncerElement');
 
 export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
 
@@ -7,8 +14,8 @@ export class MdLiveAnnouncer {
 
   private _liveElement: Element;
 
-  constructor() {
-    this._liveElement = this._createLiveElement();
+  constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: Element) {
+    this._liveElement = elementToken || this._createLiveElement();
   }
 
   /**

src/core/overlay/overlay.ts

@@ -1,9 +1,10 @@
 import {
-    DynamicComponentLoader,
-    AppViewManager,
-    OpaqueToken,
-    Inject,
-    Injectable, ElementRef
+  DynamicComponentLoader,
+  AppViewManager,
+  OpaqueToken,
+  Inject,
+  Injectable,
+  ElementRef
 } from 'angular2/core';
 import {OverlayState} from './overlay-state';
 import {DomPortalHost} from '../portal/dom-portal-host';