diff --git a/src/core/live-announcer/live-announcer.spec.ts b/src/core/live-announcer/live-announcer.spec.ts index e89706547604..46d8136617cb 100644 --- a/src/core/live-announcer/live-announcer.spec.ts +++ b/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'); + })); + }); } diff --git a/src/core/live-announcer/live-announcer.ts b/src/core/live-announcer/live-announcer.ts index 560145ca69c8..51c02166f9a6 100644 --- a/src/core/live-announcer/live-announcer.ts +++ b/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(); } /** diff --git a/src/core/overlay/overlay.ts b/src/core/overlay/overlay.ts index c681dda2b981..f10b3f5be267 100644 --- a/src/core/overlay/overlay.ts +++ b/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';