demo(dialog): add accessibility demo page for dialog (#6360)

src/demo-app/a11y/a11y-module.ts

@@ -10,6 +10,15 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
+import {
+  DialogAccessibilityDemo,
+  DialogAddressFormDialog,
+  DialogFruitExampleDialog,
+  DialogNeptuneExampleDialog,
+  DialogNeptuneIFrameDialog,
+  DialogWelcomeExampleDialog
+} from './dialog/dialog-a11y';
+
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
@@ -50,6 +59,12 @@ export class AccessibilityRoutingModule {}
     CheckboxAccessibilityDemo,
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,
+    DialogAccessibilityDemo,
+    DialogAddressFormDialog,
+    DialogFruitExampleDialog,
+    DialogNeptuneExampleDialog,
+    DialogNeptuneIFrameDialog,
+    DialogWelcomeExampleDialog,
     GridListAccessibilityDemo,
     IconAccessibilityDemo,
     InputAccessibilityDemo,
@@ -60,6 +75,14 @@ export class AccessibilityRoutingModule {}
     SlideToggleAccessibilityDemo,
     SnackBarAccessibilityDemo,
     SelectAccessibilityDemo,
+  ],
+  entryComponents: [
+    DialogAccessibilityDemo,
+    DialogAddressFormDialog,
+    DialogFruitExampleDialog,
+    DialogNeptuneExampleDialog,
+    DialogNeptuneIFrameDialog,
+    DialogWelcomeExampleDialog,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -23,6 +23,7 @@ export class AccessibilityDemo {
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},
+    {name: 'Dialog', route: 'dialog'},
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},

src/demo-app/a11y/dialog/dialog-a11y.html

@@ -0,0 +1,31 @@
+<section>
+  <h2>Welcome message</h2>
+  <p>Activate the button to see a welcome dialog with a simple message and a close button.</p>
+  <button md-button (click)="openWelcomeDialog()">Welcome</button>
+</section>
+
+<section>
+  <h2>Choose a fruit</h2>
+  <p>Active the button to choose apple or peach in a dialog.</p>
+  <button md-button (click)="openFruitDialog()">Fruit</button>
+  <p *ngIf="fruitSelectedOption">
+    You chose: {{fruitSelectedOption}}
+  </p>
+</section>
+
+<section>
+  <h2>Neptune</h2>
+  <p>
+    Active the button to see a dialog showing information of Neptune.
+    A Wikipedia page can be opened either in a new tab or in a stacked dialog.
+  </p>
+  <button md-button (click)="openNeptuneDialog()">Learn Neptune</button>
+</section>
+
+<section>
+  <h2>Address form</h2>
+  <p>
+    Active the button to fill out shipping address information in a dialog.
+  </p>
+  <button md-button (click)="openAddressDialog()">Add address</button>
+</section>

src/demo-app/a11y/dialog/dialog-a11y.ts

@@ -0,0 +1,80 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-a11y',
+  templateUrl: 'dialog-a11y.html',
+  styleUrls: ['dialog-a11y.css'],
+})
+export class DialogAccessibilityDemo {
+  fruitSelectedOption: string = '';
+
+  constructor(public dialog: MdDialog) {}
+
+  openFruitDialog() {
+    let dialogRef = this.dialog.open(DialogFruitExampleDialog);
+    dialogRef.afterClosed().subscribe(result => {
+      this.fruitSelectedOption = result;
+    });
+  }
+
+  openWelcomeDialog() {
+    this.dialog.open(DialogWelcomeExampleDialog);
+  }
+
+  openNeptuneDialog() {
+    this.dialog.open(DialogNeptuneExampleDialog);
+  }
+
+  openAddressDialog() {
+    this.dialog.open(DialogAddressFormDialog);
+  }
+}
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-fruit-a11y',
+  templateUrl: 'dialog-fruit-a11y.html'
+})
+export class DialogFruitExampleDialog {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-welcome-a11y',
+  templateUrl: 'dialog-welcome-a11y.html'
+})
+export class DialogWelcomeExampleDialog {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-neptune-a11y-dialog',
+  templateUrl: './dialog-neptune-a11y.html'
+})
+export class DialogNeptuneExampleDialog {
+  constructor(public dialog: MdDialog) { }
+
+  showInStackedDialog() {
+    this.dialog.open(DialogNeptuneIFrameDialog);
+  }
+}
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-neptune-iframe-dialog',
+  styles: [
+    `iframe {
+      width: 800px;
+    }`
+  ],
+  templateUrl: './dialog-neptune-iframe-a11y.html'
+})
+export class DialogNeptuneIFrameDialog {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-address-form-a11y',
+  templateUrl: 'dialog-address-form-a11y.html'
+})
+export class DialogAddressFormDialog {}

src/demo-app/a11y/dialog/dialog-address-form-a11y.html

@@ -0,0 +1,45 @@
+<h2 md-dialog-title>Company</h2>
+
+<md-dialog-content>
+  <form class="example-form">
+    <md-form-field class="example-full-width">
+      <input mdInput placeholder="Company (disabled)" disabled value="Google">
+    </md-form-field>
+
+    <table class="example-full-width" cellspacing="0"><tr>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="First name">
+      </md-form-field></td>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="Long Last Name That Will Be Truncated">
+      </md-form-field></td>
+    </tr></table>
+
+    <p>
+      <md-form-field class="example-full-width">
+        <textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
+      </md-form-field>
+      <md-form-field class="example-full-width">
+        <textarea mdInput placeholder="Address 2"></textarea>
+      </md-form-field>
+    </p>
+
+    <table class="example-full-width" cellspacing="0"><tr>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="City">
+      </md-form-field></td>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="State">
+      </md-form-field></td>
+      <td><md-form-field class="example-full-width">
+        <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+        <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+      </md-form-field></td>
+    </tr></table>
+  </form>
+</md-dialog-content>
+
+<md-dialog-actions>
+  <button md-raised-button color="primary" md-dialog-close>Submit</button>
+  <button md-raised-button md-dialog-close>Close</button>
+</md-dialog-actions>

src/demo-app/a11y/dialog/dialog-fruit-a11y.html

@@ -0,0 +1,6 @@
+<h2 md-dialog-title>Fruit</h2>
+<div md-dialog-content>Which would you like to choose?</div>
+<div md-dialog-actions>
+  <button md-button md-dialog-close="apple" aria-label="Apple">Apple</button>
+  <button md-button md-dialog-close="peach" aria-label="Peach">Peach</button>
+</div>

src/demo-app/a11y/dialog/dialog-neptune-a11y.html

@@ -0,0 +1,27 @@
+<h2 md-dialog-title>Neptune</h2>
+
+<md-dialog-content>
+  <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"
+       alt="Neptune"/>
+
+  <p>
+    Neptune is the eighth and farthest known planet from the Sun in the Solar System. In the
+    Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet,
+    and the densest giant planet. Neptune is 17 times the mass of Earth and is slightly more
+    massive than its near-twin Uranus, which is 15 times the mass of Earth and slightly larger
+    than Neptune. Neptune orbits the Sun once every 164.8 years at an average distance of 30.1
+    astronomical units (4.50×109 km). It is named after the Roman god of the sea and has the
+    astronomical symbol ♆, a stylised version of the god Neptune's trident.
+  </p>
+</md-dialog-content>
+
+<md-dialog-actions>
+  <button md-raised-button color="primary" md-dialog-close>Close</button>
+
+  <a md-button color="primary" href="https://en.wikipedia.org/wiki/Neptune" target="_blank">
+    Read more on Wikipedia
+  </a>
+
+  <button md-button color="secondary" (click)="showInStackedDialog()">
+    Show in dialog</button>
+</md-dialog-actions>

src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html

@@ -0,0 +1,9 @@
+<h2 md-dialog-title>Neptune</h2>
+
+<md-dialog-content>
+  <iframe frameborder="0" src="https://en.wikipedia.org/wiki/Neptune"></iframe>
+</md-dialog-content>
+
+<md-dialog-actions>
+  <button md-raised-button color="primary" md-dialog-close>Close</button>
+</md-dialog-actions>

src/demo-app/a11y/dialog/dialog-welcome-a11y.html

@@ -0,0 +1,13 @@
+<h2>Welcome to Angular Material dialog demo page!</h2>
+
+<p>
+  The Web is fundamentally designed to work for all people, whatever their hardware, software,
+  language, culture, location, or physical or mental ability. When the Web meets this goal, it is
+  accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
+</p>
+<p>
+  The mission of the Web Accessibility Initiative (WAI) is to lead the Web to its full potential to
+  be accessible, enabling people with disabilities to participate equally on the Web.
+</p>
+
+<button md-button color="primary" md-dialog-close>Close</button>

src/demo-app/a11y/routes.ts

@@ -4,6 +4,7 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
+import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
@@ -25,6 +26,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
+  {path: 'dialog', component: DialogAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'icon', component: IconAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},

src/lib/dialog/dialog-config.ts

@@ -69,5 +69,6 @@ export class MdDialogConfig {
   /** ID of the element that describes the dialog.  */
   ariaDescribedBy?: string | null = null;
 
+
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }