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 @@
+ Activate the button to see a welcome dialog with a simple message and a close button. Active the button to choose apple or peach in a dialog.
+ You chose: {{fruitSelectedOption}}
+
+ 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.
+
+ Active the button to fill out shipping address information in a dialog.
+ Welcome message
+ Choose a fruit
+ Neptune
+ Address form
+
+
+ + 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. +
++ 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. }