Skip to content

Commit f7a11ad

Browse files
tinayuangaotinayuangao
committed
demo(dialog): Add accessibility demo page for dialog
1 parent c86d13c commit f7a11ad

File tree

10 files changed

+167
-0
lines changed

10 files changed

+167
-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';
@@ -48,6 +56,11 @@ export class AccessibilityRoutingModule {}
4856
CheckboxAccessibilityDemo,
4957
ChipsAccessibilityDemo,
5058
DatepickerAccessibilityDemo,
59+
DialogAccessibilityDemo,
60+
DialogFruitExampleDialog,
61+
DialogNeptuneExampleDialog,
62+
DialogNeptuneIFrameDialog,
63+
DialogWelcomeExampleDialog,
5164
GridListAccessibilityDemo,
5265
IconAccessibilityDemo,
5366
InputAccessibilityDemo,
@@ -56,6 +69,13 @@ export class AccessibilityRoutingModule {}
5669
SliderAccessibilityDemo,
5770
SnackBarAccessibilityDemo,
5871
SelectAccessibilityDemo,
72+
],
73+
entryComponents: [
74+
DialogAccessibilityDemo,
75+
DialogFruitExampleDialog,
76+
DialogNeptuneExampleDialog,
77+
DialogNeptuneIFrameDialog,
78+
DialogWelcomeExampleDialog,
5979
]
6080
})
6181
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: 'Icon', route: 'icon'},
2829
{name: 'Input', route: 'input'},

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<section>
2+
<h2>Welcome message</h2>
3+
<p>Activate the button to see a welcome dialog with a simple message and a close button.</p>
4+
<button md-button (click)="openWelcomeDialog()">Welcome</button>
5+
</section>
6+
7+
<section>
8+
<h2>Choose a fruit</h2>
9+
<p>Active the button to choose apple or peach in a dialog.</p>
10+
<button md-button (click)="openFruitDialog()">Fruit</button>
11+
<p *ngIf="fruitSelectedOption">
12+
You chose: {{fruitSelectedOption}}
13+
</p>
14+
</section>
15+
16+
<section>
17+
<h2>Neptune</h2>
18+
<p>
19+
Active the button to see a dialog showing information of Neptune.
20+
A Wikipedia page can be opened either in a new tab or in a stacked dialog.
21+
</p>
22+
<button md-button (click)="openNeptuneDialog()">Learn Neptune</button>
23+
</section>

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

Whitespace-only changes.

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
<md-dialog-actions>
44+
<button md-raised-button color="primary" md-dialog-close>Close</button>
45+
</md-dialog-actions>`
46+
})
47+
export class DialogWelcomeExampleDialog {}
48+
49+
@Component({
50+
moduleId: module.id,
51+
selector: 'dialog-neptune-a11y-dialog',
52+
templateUrl: './dialog-neptune-a11y.html'
53+
})
54+
export class DialogNeptuneExampleDialog {
55+
constructor(public dialog: MdDialog) { }
56+
57+
showInStackedDialog() {
58+
this.dialog.open(DialogNeptuneIFrameDialog);
59+
}
60+
}
61+
62+
@Component({
63+
moduleId: module.id,
64+
selector: 'dialog-neptune-iframe-dialog',
65+
styles: [
66+
`iframe {
67+
width: 800px;
68+
}`
69+
],
70+
templateUrl: './dialog-neptune-iframe-a11y.html'
71+
})
72+
export class DialogNeptuneIFrameDialog {
73+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Welcome to Angular Material dialog demo page!
2+
3+
<button md-button color="primary" md-dialog-close>Close</button>

‎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';
@@ -23,6 +24,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
2324
{path: 'checkbox', component: CheckboxAccessibilityDemo},
2425
{path: 'chips', component: ChipsAccessibilityDemo},
2526
{path: 'datepicker', component: DatepickerAccessibilityDemo},
27+
{path: 'dialog', component: DialogAccessibilityDemo},
2628
{path: 'grid-list', component: GridListAccessibilityDemo},
2729
{path: 'icon', component: IconAccessibilityDemo},
2830
{path: 'input', component: InputAccessibilityDemo},

0 commit comments

Comments
 (0)