Skip to content

Commit 679c5dc

Browse files
tinayuangaotinayuangao
committed
demo(dialog): Add accessibility demo page for dialog
1 parent 5ccf25d commit 679c5dc

File tree

10 files changed

+177
-0
lines changed

10 files changed

+177
-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';
@@ -46,12 +54,24 @@ export class AccessibilityRoutingModule {}
4654
CheckboxAccessibilityDemo,
4755
ChipsAccessibilityDemo,
4856
DatepickerAccessibilityDemo,
57+
DialogAccessibilityDemo,
58+
DialogFruitExampleDialog,
59+
DialogNeptuneExampleDialog,
60+
DialogNeptuneIFrameDialog,
61+
DialogWelcomeExampleDialog,
4962
GridListAccessibilityDemo,
5063
IconAccessibilityDemo,
5164
InputAccessibilityDemo,
5265
ProgressSpinnerAccessibilityDemo,
5366
RadioAccessibilityDemo,
5467
SliderAccessibilityDemo,
68+
],
69+
entryComponents: [
70+
DialogAccessibilityDemo,
71+
DialogFruitExampleDialog,
72+
DialogNeptuneExampleDialog,
73+
DialogNeptuneIFrameDialog,
74+
DialogWelcomeExampleDialog,
5575
]
5676
})
5777
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>Activat 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: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
<md-dialog-actions>
45+
<button
46+
md-raised-button
47+
color="primary"
48+
md-dialog-close>Close</button>
49+
</md-dialog-actions>`
50+
})
51+
export class DialogWelcomeExampleDialog {}
52+
53+
@Component({
54+
moduleId: module.id,
55+
selector: 'dialog-neptune-a11y-dialog',
56+
templateUrl: './dialog-neptune-a11y.html'
57+
})
58+
export class DialogNeptuneExampleDialog {
59+
constructor(public dialog: MdDialog) { }
60+
61+
showInStackedDialog() {
62+
this.dialog.open(DialogNeptuneIFrameDialog);
63+
}
64+
}
65+
66+
@Component({
67+
moduleId: module.id,
68+
selector: 'dialog-neptune-iframe-dialog',
69+
styles: [
70+
`iframe {
71+
width: 800px;
72+
}`
73+
],
74+
templateUrl: './dialog-neptune-iframe-a11y.html'
75+
})
76+
export class DialogNeptuneIFrameDialog {
77+
}

‎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/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';
@@ -21,6 +22,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
2122
{path: 'checkbox', component: CheckboxAccessibilityDemo},
2223
{path: 'chips', component: ChipsAccessibilityDemo},
2324
{path: 'datepicker', component: DatepickerAccessibilityDemo},
25+
{path: 'dialog', component: DialogAccessibilityDemo},
2426
{path: 'grid-list', component: GridListAccessibilityDemo},
2527
{path: 'icon', component: IconAccessibilityDemo},
2628
{path: 'input', component: InputAccessibilityDemo},

0 commit comments

Comments
 (0)