feat(): add aria live announcer

Author: devversion

screenshots/demo_page__index.screenshot.png

@@ -0,0 +1,37 @@
+# MdAriaLive
+`MdAriaLive` is component, which announces messages to several screenreaders.
+
+## `<md-aria-live>`
+### Methods
+
+| Name |  Description |
+| --- | --- |
+| `announce(message: string)` | This announces a text message to the screenreader |
+
+### Examples
+A basic local variable can be assigned to the `md-aria-live` component.
+```html
+<md-aria-live #live>
+  <button (click)="live.announce('Hey Google')">Announce Text</button>
+</md-toolbar>
+```
+
+The component is also useable through the Dependency Injection.
+
+```ts
+export class ChildComponent {
+
+  constructor(private live: MdAriaLive) { }
+  
+  announceText() {
+    this.live.announce("Hey Google");
+  }
+
+}
+```
+
+### Supported Screenreaders
+- JAWS (Windows)
+- NVDA (Windows)
+- VoiceOver (OSX and iOS)
+- TalkBack (Android)

screenshots/initial state.screenshot.png

@@ -0,0 +1,2 @@
+<ng-content></ng-content>
+<div class="_md-aria-announcer" aria-live="polite" aria-atomic="true"></div>

src/components/aria-live/README.md

@@ -0,0 +1,17 @@
+:host {
+
+  // This hides the announcer element visually.
+  // That means it's still accessible for screen-readers but not visible.
+  ._md-aria-announcer {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    text-transform: none;
+    width: 1px;
+  }
+
+}

src/components/aria-live/aria-live.html

@@ -0,0 +1,95 @@
+import {
+  inject,
+  TestComponentBuilder, ComponentFixture
+} from 'angular2/testing';
+import {
+  it,
+  describe,
+  expect,
+  beforeEach,
+} from '../../core/facade/testing';
+import {Component} from 'angular2/core';
+import {By} from 'angular2/platform/browser';
+import {MdAriaLive} from './aria-live';
+
+export function main() {
+  describe('MdAriaLive', () => {
+    let builder: TestComponentBuilder;
+    let timeoutMock: any;
+
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+      builder = tcb;
+    }));
+
+    beforeAll(() => {
+      timeoutMock = mockTimeout();
+    });
+
+    afterAll(() => {
+      timeoutMock.restoreTimeout();
+    });
+
+    it('should correctly update the announce text', (done: () => void) => {
+      return builder
+        .createAsync(TestApp)
+        .then((view: ComponentFixture) => {
+          let announcerElement = view.debugElement.query(By.css('._md-aria-announcer'));
+          let buttonElement = view.debugElement.query(By.css('button'));
+
+          view.detectChanges();
+
+          buttonElement.nativeElement.click();
+
+          timeoutMock.flushTimeout();
+
+          expect(announcerElement.nativeElement.textContent).toBe('Test');
+
+          done();
+      });
+    });
+
+    function mockTimeout() {
+      let browserTimeout = window.setTimeout;
+      let stack: any = {};
+
+      window.setTimeout = (fn: Function, timeout: number) => {
+        var id = browserTimeout(() => {
+          stack[id] = null;
+          fn();
+        }, timeout);
+
+        stack[id] = fn;
+        return id;
+      };
+
+      return {
+        flushTimeout: () => {
+          for (let id in stack) {
+            if (stack.hasOwnProperty(id)) {
+              stack[id]();
+              stack[id] = null;
+            }
+          }
+        },
+        restoreTimeout: () => {
+          window.setTimeout = browserTimeout;
+        }
+      };
+    }
+
+  });
+}
+
+
+@Component({
+  selector: 'test-app',
+  template: `
+    <md-aria-live #announcer>
+      <button (click)="announcer.announce('Test')">Announce</button>
+    </md-aria-live>
+  `,
+  directives: [MdAriaLive],
+})
+class TestApp {
+}
+

src/components/aria-live/aria-live.scss

@@ -0,0 +1,31 @@
+import {
+  Component,
+  ElementRef,
+  AfterContentInit
+} from 'angular2/core';
+
+import {DOM} from '../../core/platform/dom/dom_adapter';
+
+@Component({
+  selector: 'md-aria-live',
+  templateUrl: './components/aria-live/aria-live.html',
+  styleUrls: ['./components/aria-live/aria-live.css'],
+})
+export class MdAriaLive implements AfterContentInit {
+
+  private announcerEl: HTMLElement;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngAfterContentInit() {
+    this.announcerEl = DOM.querySelector(this.elementRef.nativeElement, '._md-aria-announcer');
+  }
+
+  announce(message: string): void {
+    this.announcerEl.textContent = '';
+
+    // The most screen-readers need a delay after the clear action, to probably recognise the
+    // announcement. 100ms is a average delay, which works for the most supported readers.
+    setTimeout(() => this.announcerEl.textContent = message, 100);
+  }
+}

src/components/aria-live/aria-live.spec.ts

@@ -0,0 +1,5 @@
+<md-aria-live #ariaLive>
+
+  <button md-button (click)="ariaLive.announce('Hey Google')">Announce Text</button>
+
+</md-aria-live>

src/components/aria-live/aria-live.ts

@@ -0,0 +1,9 @@
+import {Component} from 'angular2/core';
+import {MdAriaLive} from '../../components/aria-live/aria-live';
+
+@Component({
+  selector: 'toolbar-demo',
+  templateUrl: 'demo-app/aria-live/aria-live-demo.html',
+  directives: [MdAriaLive]
+})
+export class AriaLiveDemo {}

src/demo-app/aria-live/aria-live-demo.html

@@ -11,6 +11,7 @@ <h1>Angular Material2 Demos</h1>
     <li><a [routerLink]="['ToolbarDemo']">Toolbar demo</a></li>
     <li><a [routerLink]="['RadioDemo']">Radio demo</a></li>
     <li><a [routerLink]="['ListDemo']">List demo</a></li>
+    <li><a [routerLink]="['AriaLiveDemo']">Aria Live demo</a></li>
   </ul>
   <button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
     {{root.dir.toUpperCase()}}