diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts index 22c4e55b30e..d97cf334715 100644 --- a/src/demo-app/a11y/a11y-module.ts +++ b/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 {} diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts index becf1f9657a..fd731a26091 100644 --- a/src/demo-app/a11y/a11y.ts +++ b/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'}, diff --git a/src/demo-app/a11y/dialog/dialog-a11y.html b/src/demo-app/a11y/dialog/dialog-a11y.html new file mode 100644 index 00000000000..e1593db566a --- /dev/null +++ b/src/demo-app/a11y/dialog/dialog-a11y.html @@ -0,0 +1,31 @@ +
+

Welcome message

+

Activate the button to see a welcome dialog with a simple message and a close button.

+ +
+ +
+

Choose a fruit

+

Active the button to choose apple or peach in a dialog.

+ +

+ You chose: {{fruitSelectedOption}} +

+
+ +
+

Neptune

+

+ 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. +

+ +
+ +
+

Address form

+

+ Active the button to fill out shipping address information in a dialog. +

+ +
diff --git a/src/demo-app/a11y/dialog/dialog-a11y.scss b/src/demo-app/a11y/dialog/dialog-a11y.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/demo-app/a11y/dialog/dialog-a11y.ts b/src/demo-app/a11y/dialog/dialog-a11y.ts new file mode 100644 index 00000000000..73fb3fe565f --- /dev/null +++ b/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 {} diff --git a/src/demo-app/a11y/dialog/dialog-address-form-a11y.html b/src/demo-app/a11y/dialog/dialog-address-form-a11y.html new file mode 100644 index 00000000000..fd3a29c9fa5 --- /dev/null +++ b/src/demo-app/a11y/dialog/dialog-address-form-a11y.html @@ -0,0 +1,45 @@ +

Company

+ + +
+ + + + + + + +
+ + + +
+ +

+ + + + + + +

+ + + + + +
+ + + + + + {{postalCode.value.length}} / 5 +
+
+
+ + + + + diff --git a/src/demo-app/a11y/dialog/dialog-fruit-a11y.html b/src/demo-app/a11y/dialog/dialog-fruit-a11y.html new file mode 100644 index 00000000000..f3086a812c2 --- /dev/null +++ b/src/demo-app/a11y/dialog/dialog-fruit-a11y.html @@ -0,0 +1,6 @@ +

Fruit

+
Which would you like to choose?
+
+ + +
diff --git a/src/demo-app/a11y/dialog/dialog-neptune-a11y.html b/src/demo-app/a11y/dialog/dialog-neptune-a11y.html new file mode 100644 index 00000000000..e247e83c771 --- /dev/null +++ b/src/demo-app/a11y/dialog/dialog-neptune-a11y.html @@ -0,0 +1,27 @@ +

Neptune

+ + + Neptune + +

+ 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. +

+
+ + + + + + Read more on Wikipedia + + + + diff --git a/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html b/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html new file mode 100644 index 00000000000..a51b3ad5a95 --- /dev/null +++ b/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html @@ -0,0 +1,9 @@ +

Neptune

+ + + + + + + + diff --git a/src/demo-app/a11y/dialog/dialog-welcome-a11y.html b/src/demo-app/a11y/dialog/dialog-welcome-a11y.html new file mode 100644 index 00000000000..25c8355f7f5 --- /dev/null +++ b/src/demo-app/a11y/dialog/dialog-welcome-a11y.html @@ -0,0 +1,13 @@ +

Welcome to Angular Material dialog demo page!

+ +

+ 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. +

+

+ 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. +

+ + diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts index 20fcbdf3d34..4caf24d0e69 100644 --- a/src/demo-app/a11y/routes.ts +++ b/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}, diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 3fa7e657765..a9a53e8826f 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/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. }