Skip to content

Commit 7b54e1d

Browse files
tinayuangaokara
tinayuangao
authored and
kara
committed
demo(dialog): add accessibility demo page for dialog (#6360)
1 parent 5bd0c3a commit 7b54e1d

12 files changed

+238
-0
lines changed

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@ 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+
DialogAddressFormDialog,
16+
DialogFruitExampleDialog,
17+
DialogNeptuneExampleDialog,
18+
DialogNeptuneIFrameDialog,
19+
DialogWelcomeExampleDialog
20+
} from './dialog/dialog-a11y';
21+
1322
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
1423
import {RadioAccessibilityDemo} from './radio/radio-a11y';
1524
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
@@ -50,6 +59,12 @@ export class AccessibilityRoutingModule {}
5059
CheckboxAccessibilityDemo,
5160
ChipsAccessibilityDemo,
5261
DatepickerAccessibilityDemo,
62+
DialogAccessibilityDemo,
63+
DialogAddressFormDialog,
64+
DialogFruitExampleDialog,
65+
DialogNeptuneExampleDialog,
66+
DialogNeptuneIFrameDialog,
67+
DialogWelcomeExampleDialog,
5368
GridListAccessibilityDemo,
5469
IconAccessibilityDemo,
5570
InputAccessibilityDemo,
@@ -60,6 +75,14 @@ export class AccessibilityRoutingModule {}
6075
SlideToggleAccessibilityDemo,
6176
SnackBarAccessibilityDemo,
6277
SelectAccessibilityDemo,
78+
],
79+
entryComponents: [
80+
DialogAccessibilityDemo,
81+
DialogAddressFormDialog,
82+
DialogFruitExampleDialog,
83+
DialogNeptuneExampleDialog,
84+
DialogNeptuneIFrameDialog,
85+
DialogWelcomeExampleDialog,
6386
]
6487
})
6588
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: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>
24+
25+
<section>
26+
<h2>Address form</h2>
27+
<p>
28+
Active the button to fill out shipping address information in a dialog.
29+
</p>
30+
<button md-button (click)="openAddressDialog()">Add address</button>
31+
</section>

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

Whitespace-only changes.

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import {Component} from '@angular/core';
2+
import {MdDialog} 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+
openAddressDialog() {
32+
this.dialog.open(DialogAddressFormDialog);
33+
}
34+
}
35+
36+
@Component({
37+
moduleId: module.id,
38+
selector: 'dialog-fruit-a11y',
39+
templateUrl: 'dialog-fruit-a11y.html'
40+
})
41+
export class DialogFruitExampleDialog {}
42+
43+
@Component({
44+
moduleId: module.id,
45+
selector: 'dialog-welcome-a11y',
46+
templateUrl: 'dialog-welcome-a11y.html'
47+
})
48+
export class DialogWelcomeExampleDialog {}
49+
50+
@Component({
51+
moduleId: module.id,
52+
selector: 'dialog-neptune-a11y-dialog',
53+
templateUrl: './dialog-neptune-a11y.html'
54+
})
55+
export class DialogNeptuneExampleDialog {
56+
constructor(public dialog: MdDialog) { }
57+
58+
showInStackedDialog() {
59+
this.dialog.open(DialogNeptuneIFrameDialog);
60+
}
61+
}
62+
63+
@Component({
64+
moduleId: module.id,
65+
selector: 'dialog-neptune-iframe-dialog',
66+
styles: [
67+
`iframe {
68+
width: 800px;
69+
}`
70+
],
71+
templateUrl: './dialog-neptune-iframe-a11y.html'
72+
})
73+
export class DialogNeptuneIFrameDialog {}
74+
75+
@Component({
76+
moduleId: module.id,
77+
selector: 'dialog-address-form-a11y',
78+
templateUrl: 'dialog-address-form-a11y.html'
79+
})
80+
export class DialogAddressFormDialog {}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<h2 md-dialog-title>Company</h2>
2+
3+
<md-dialog-content>
4+
<form class="example-form">
5+
<md-form-field class="example-full-width">
6+
<input mdInput placeholder="Company (disabled)" disabled value="Google">
7+
</md-form-field>
8+
9+
<table class="example-full-width" cellspacing="0"><tr>
10+
<td><md-form-field class="example-full-width">
11+
<input mdInput placeholder="First name">
12+
</md-form-field></td>
13+
<td><md-form-field class="example-full-width">
14+
<input mdInput placeholder="Long Last Name That Will Be Truncated">
15+
</md-form-field></td>
16+
</tr></table>
17+
18+
<p>
19+
<md-form-field class="example-full-width">
20+
<textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
21+
</md-form-field>
22+
<md-form-field class="example-full-width">
23+
<textarea mdInput placeholder="Address 2"></textarea>
24+
</md-form-field>
25+
</p>
26+
27+
<table class="example-full-width" cellspacing="0"><tr>
28+
<td><md-form-field class="example-full-width">
29+
<input mdInput placeholder="City">
30+
</md-form-field></td>
31+
<td><md-form-field class="example-full-width">
32+
<input mdInput placeholder="State">
33+
</md-form-field></td>
34+
<td><md-form-field class="example-full-width">
35+
<input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
36+
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
37+
</md-form-field></td>
38+
</tr></table>
39+
</form>
40+
</md-dialog-content>
41+
42+
<md-dialog-actions>
43+
<button md-raised-button color="primary" md-dialog-close>Submit</button>
44+
<button md-raised-button md-dialog-close>Close</button>
45+
</md-dialog-actions>

‎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>
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: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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 md-raised-button color="primary" md-dialog-close>Close</button>
9+
</md-dialog-actions>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<h2>Welcome to Angular Material dialog demo page!</h2>
2+
3+
<p>
4+
The Web is fundamentally designed to work for all people, whatever their hardware, software,
5+
language, culture, location, or physical or mental ability. When the Web meets this goal, it is
6+
accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
7+
</p>
8+
<p>
9+
The mission of the Web Accessibility Initiative (WAI) is to lead the Web to its full potential to
10+
be accessible, enabling people with disabilities to participate equally on the Web.
11+
</p>
12+
13+
<button md-button color="primary" md-dialog-close>Close</button>

0 commit comments

Comments
 (0)