feature(dialogs): better a11y + exposed open/closeAll methods from Md…

…Dialog. closes(#170 and #171) (#190)

* added a11y to prompt dialog for enter keypress and left/right arrows  when buttons are focused

* added a11y to confirm dialog for left/right arrows  when buttons are focused

* prevent enter event propagation outside of dialog

* proxy the open and closeAll methods in the tdDialogService

* added open and closeAll usage in the docs

src/app/components/components/dialogs/dialogs.component.ts

@@ -21,6 +21,16 @@ export class DialogsDemoComponent {
     description: `Opens a prompt dialog with the provided config.`,
     name: 'openPrompt',
     type: 'function(IPromptConfig): MdDialogRef<TdPromptDialogComponent>',
+  }, {
+    description: `Wrapper function over the open() method in MdDialog.
+                  Opens a modal dialog containing the given component.`,
+    name: 'open',
+    type: 'function<T>(component: ComponentType<T>, config: MdDialogConfig): MdDialogRef<T>',
+  }, {
+    description: `Wrapper function over the closeAll() method in MdDialog.
+                  Closes all of the currently-open dialogs.`,
+    name: 'closeAll',
+    type: 'function()',
   }];
 
   constructor(private _dialogService: TdDialogService) {}

src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html

@@ -6,7 +6,14 @@
     {{message}}
   </td-dialog-content>
   <td-dialog-actions>
-    <button md-button (click)="cancel()">{{cancelButton}}</button>
-    <button md-button color="accent" (click)="accept()">{{acceptButton}}</button>
+    <button md-button
+            #closeBtn 
+            (keydown.arrowright)="acceptBtn.focus()"
+            (click)="cancel()">{{cancelButton}}</button>
+    <button md-button
+            color="accent"
+            #acceptBtn
+            (keydown.arrowleft)="closeBtn.focus()"
+            (click)="accept()">{{acceptButton}}</button>
   </td-dialog-actions>
 </td-dialog>

src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html

@@ -4,12 +4,25 @@
   </td-dialog-title>
   <td-dialog-content layout="column" class="md-subhead tc-grey-700">
     {{message}}
-    <form #form="ngForm" layout="row" flex>
-      <md-input [(ngModel)]="value" name="value" required flex></md-input>
+    <form #form="ngForm" layout="row" novalidate flex>
+      <md-input (keydown.enter)="$event.preventDefault(); form.valid && accept()"
+                [(ngModel)]="value"
+                name="value"
+                required
+                flex
+      ></md-input>
     </form>
   </td-dialog-content>
   <td-dialog-actions>
-    <button md-button (click)="cancel()">{{cancelButton}}</button>
-    <button md-button color="accent" [disabled]="!form.valid" (click)="accept()">{{acceptButton}}</button>
+    <button md-button
+            #closeBtn 
+            (keydown.arrowright)="acceptBtn.focus()"
+            (click)="cancel()">{{cancelButton}}</button>
+    <button md-button
+            color="accent"
+            #acceptBtn
+            (keydown.arrowleft)="closeBtn.focus()"
+            [disabled]="!form.valid"
+            (click)="accept()">{{acceptButton}}</button>
   </td-dialog-actions>
 </td-dialog>

src/platform/core/dialogs/services/dialog.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, ViewContainerRef } from '@angular/core';
-import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
+import { MdDialog, MdDialogRef, MdDialogConfig, ComponentType } from '@angular/material';
 
 import { TdAlertDialogComponent } from '../alert-dialog/alert-dialog.component';
 import { TdConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
@@ -30,6 +30,25 @@ export class TdDialogService {
 
   constructor(private _dialogService: MdDialog) {}
 
+  /**
+   * params:
+   * - component: ComponentType<T>
+   * - config: MdDialogConfig
+   * Wrapper function over the open() method in MdDialog.
+   * Opens a modal dialog containing the given component.
+   */
+  public open<T>(component: ComponentType<T>, config?: MdDialogConfig): MdDialogRef<T> {
+    return this._dialogService.open(component, config);
+  }
+
+  /**
+   * Wrapper function over the closeAll() method in MdDialog.
+   * Closes all of the currently-open dialogs.
+   */
+  public closeAll(): void {
+    this._dialogService.closeAll();
+  }
+
   /**
    * params:
    * - viewContainerRef: ViewContainerRef