Skip to content

Commit e0c8789

Browse files
tinayuangaotinayuangao
committed
demo(dialog): Add accessibility demo page for dialog
1 parent 333ec80 commit e0c8789

File tree

9 files changed

+161
-0
lines changed

9 files changed

+161
-0
lines changed

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
1010
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
1111
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
1212
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
13+
import {
14+
DialogAccessibilityDemo,
15+
DialogFruitExampleDialog,
16+
DialogNeptuneExampleDialog,
17+
DialogNeptuneIFrameDialog,
18+
DialogWelcomeExampleDialog
19+
} from './dialog/dialog-a11y';
20+
1321
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
1422
import {RadioAccessibilityDemo} from './radio/radio-a11y';
1523
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
@@ -44,10 +52,22 @@ export class AccessibilityRoutingModule {}
4452
CheckboxAccessibilityDemo,
4553
ChipsAccessibilityDemo,
4654
DatepickerAccessibilityDemo,
55+
DialogAccessibilityDemo,
56+
DialogFruitExampleDialog,
57+
DialogNeptuneExampleDialog,
58+
DialogNeptuneIFrameDialog,
59+
DialogWelcomeExampleDialog,
4760
GridListAccessibilityDemo,
4861
InputAccessibilityDemo,
4962
RadioAccessibilityDemo,
5063
SliderAccessibilityDemo,
64+
],
65+
entryComponents: [
66+
DialogAccessibilityDemo,
67+
DialogFruitExampleDialog,
68+
DialogNeptuneExampleDialog,
69+
DialogNeptuneIFrameDialog,
70+
DialogWelcomeExampleDialog,
5171
]
5272
})
5373
export class AccessibilityDemoModule {}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class AccessibilityDemo {
2323
{name: 'Checkbox', route: 'checkbox'},
2424
{name: 'Chips', route: 'chips'},
2525
{name: 'Datepicker', route: 'datepicker'},
26+
{name: 'Dialog', route: 'dialog'},
2627
{name: 'Grid list', route: 'grid-list'},
2728
{name: 'Input', route: 'input'},
2829
{name: 'Radio buttons', route: 'radio'},

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<section>
2+
<h2>Welcome message (Dialog with simple message)</h2>
3+
<button md-button (click)="openWelcomeDialog()">Welcome</button>
4+
</section>
5+
6+
<section>
7+
<h2>Choose a fruit(Dialog with an answer</h2>
8+
<button md-button (click)="openFruitDialog()">Fruit</button>
9+
<p *ngIf="fruitSelectedOption">
10+
You chose: {{fruitSelectedOption}}
11+
</p>
12+
</section>
13+
14+
<section>
15+
<h2>Neptune (Nested dialog)</h2>
16+
<button md-button (click)="openNeptuneDialog()">Learn Neptune</button>
17+
</section>

‎src/demo-app/a11y/dialog/dialog-a11y.scss‎

Whitespace-only changes.

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {Component} from '@angular/core';
2+
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
3+
4+
5+
@Component({
6+
moduleId: module.id,
7+
selector: 'dialog-a11y',
8+
templateUrl: 'dialog-a11y.html',
9+
styleUrls: ['dialog-a11y.css'],
10+
})
11+
export class DialogAccessibilityDemo {
12+
fruitSelectedOption: string = '';
13+
14+
constructor(public dialog: MdDialog) {}
15+
16+
openFruitDialog() {
17+
let dialogRef = this.dialog.open(DialogFruitExampleDialog);
18+
dialogRef.afterClosed().subscribe(result => {
19+
this.fruitSelectedOption = result;
20+
});
21+
}
22+
23+
openWelcomeDialog() {
24+
this.dialog.open(DialogWelcomeExampleDialog);
25+
}
26+
27+
openNeptuneDialog() {
28+
this.dialog.open(DialogNeptuneExampleDialog);
29+
}
30+
}
31+
32+
@Component({
33+
moduleId: module.id,
34+
selector: 'dialog-fruit-a11y',
35+
templateUrl: 'dialog-fruit-a11y.html'
36+
})
37+
export class DialogFruitExampleDialog {}
38+
39+
@Component({
40+
moduleId: module.id,
41+
selector: 'dialog-welcome-a11y',
42+
template: `Welcome to Angular Material dialog demo page!`
43+
})
44+
export class DialogWelcomeExampleDialog {}
45+
46+
@Component({
47+
moduleId: module.id,
48+
selector: 'dialog-neptune-a11y-dialog',
49+
templateUrl: './dialog-neptune-a11y.html'
50+
})
51+
export class DialogNeptuneExampleDialog {
52+
constructor(public dialog: MdDialog) { }
53+
54+
showInStackedDialog() {
55+
this.dialog.open(DialogNeptuneIFrameDialog);
56+
}
57+
}
58+
59+
@Component({
60+
moduleId: module.id,
61+
selector: 'dialog-neptune-iframe-dialog',
62+
styles: [
63+
`iframe {
64+
width: 800px;
65+
}`
66+
],
67+
templateUrl: './dialog-neptune-iframe-a11y.html'
68+
})
69+
export class DialogNeptuneIFrameDialog {
70+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<h2 md-dialog-title>Fruit</h2>
2+
<div md-dialog-content>Which would you like to choose?</div>
3+
<div md-dialog-actions>
4+
<button md-button md-dialog-close="apple" aria-label="Apple">Apple</button>
5+
<button md-button md-dialog-close="peach" aria-label="Peach">Peach</button>
6+
</div>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h2 md-dialog-title>Neptune</h2>
2+
3+
<md-dialog-content>
4+
<img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg"/>
5+
6+
<p>
7+
Neptune is the eighth and farthest known planet from the Sun in the Solar System. In the
8+
Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet,
9+
and the densest giant planet. Neptune is 17 times the mass of Earth and is slightly more
10+
massive than its near-twin Uranus, which is 15 times the mass of Earth and slightly larger
11+
than Neptune. Neptune orbits the Sun once every 164.8 years at an average distance of 30.1
12+
astronomical units (4.50×109 km). It is named after the Roman god of the sea and has the
13+
astronomical symbol ♆, a stylised version of the god Neptune's trident.
14+
</p>
15+
</md-dialog-content>
16+
17+
<md-dialog-actions [attr.align]="actionsAlignment">
18+
<button md-raised-button
19+
color="primary"
20+
md-dialog-close>Close</button>
21+
22+
<a
23+
md-button
24+
color="primary"
25+
href="https://en.wikipedia.org/wiki/Neptune"
26+
target="_blank">Read more on Wikipedia</a>
27+
28+
<button
29+
md-button
30+
color="secondary"
31+
(click)="showInStackedDialog()">
32+
Show in dialog</button>
33+
</md-dialog-actions>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<h2 md-dialog-title>Neptune</h2>
2+
3+
<md-dialog-content>
4+
<iframe frameborder="0" src="https://en.wikipedia.org/wiki/Neptune"></iframe>
5+
</md-dialog-content>
6+
7+
<md-dialog-actions>
8+
<button
9+
md-raised-button
10+
color="primary"
11+
md-dialog-close>Close</button>
12+
</md-dialog-actions>

‎src/demo-app/a11y/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {ButtonAccessibilityDemo} from './button/button-a11y';
44
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
55
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
66
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
7+
import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
78
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
89
import {RadioAccessibilityDemo} from './radio/radio-a11y';
910
import {AccessibilityHome} from './a11y';
@@ -19,6 +20,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
1920
{path: 'checkbox', component: CheckboxAccessibilityDemo},
2021
{path: 'chips', component: ChipsAccessibilityDemo},
2122
{path: 'datepicker', component: DatepickerAccessibilityDemo},
23+
{path: 'dialog', component: DialogAccessibilityDemo},
2224
{path: 'grid-list', component: GridListAccessibilityDemo},
2325
{path: 'input', component: InputAccessibilityDemo},
2426
{path: 'radio', component: RadioAccessibilityDemo},

0 commit comments

Comments
 (0)