Skip to content

Commit e498af3

Browse files
mmalerbammalerba
committed
dual demo
1 parent a52f7b8 commit e498af3

File tree

7 files changed

+70
-9
lines changed

7 files changed

+70
-9
lines changed

‎src/demo-app/a11y/sidenav/basic-sidenav-a11y.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<button md-icon-button aria-label="Navigation menu" (click)="snav.toggle()">
33
<md-icon aria-hidden="true">menu</md-icon>
44
</button>
5-
<span class="a11y-demo-sidenav-app-name">Basic Sidenav App</span>
5+
<h1 class="a11y-demo-sidenav-app-name">Basic Sidenav App</h1>
66
</md-toolbar>
77

88
<md-sidenav-container class="a11y-demo-sidenav-container">
9-
<md-sidenav #snav mode="side">
9+
<md-sidenav #snav mode="side" role="navigation">
1010
<md-nav-list>
1111
<a md-list-item routerLink="..">Home</a>
1212
<a md-list-item routerLink="../basic">Basic sidenav example</a>
@@ -15,7 +15,7 @@
1515
</md-nav-list>
1616
</md-sidenav>
1717

18-
<md-sidenav-content>
18+
<md-sidenav-content role="region">
1919
<button md-raised-button aria-label="Close basic sidenav example" color="primary"
2020
class="a11y-demo-sidenav-close" routerLink="..">
2121
Close example

‎src/demo-app/a11y/sidenav/dual-sidenav-a11y.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<md-toolbar color="primary" role="header" aria-label="Dual sidenav app">
2+
<button md-icon-button aria-label="Navigation menu" (click)="startSnav.toggle()">
3+
<md-icon aria-hidden="true">menu</md-icon>
4+
</button>
5+
<h1 class="a11y-demo-sidenav-app-name">Dual Sidenav App</h1>
6+
<span class="a11y-demo-sidenav-spacer" aria-hidden="true"></span>
7+
<button md-icon-button aria-label="Playlist menu" (click)="endSnav.toggle()">
8+
<md-icon aria-hidden="true">playlist_play</md-icon>
9+
</button>
10+
</md-toolbar>
11+
12+
<md-sidenav-container class="a11y-demo-sidenav-container">
13+
<md-sidenav #startSnav mode="side" role="navigation">
14+
<md-nav-list>
15+
<a md-list-item routerLink="..">Home</a>
16+
<a md-list-item routerLink="../basic">Basic sidenav example</a>
17+
<a md-list-item routerLink="../mobile">Responsive sidenav example</a>
18+
<a md-list-item routerLink="../dual">Dual sidenavs example</a>
19+
</md-nav-list>
20+
</md-sidenav>
21+
22+
<md-sidenav-content role="region">
23+
<button md-raised-button aria-label="Close dual sidenav example" color="primary"
24+
class="a11y-demo-sidenav-close" routerLink="..">
25+
Close example
26+
</button>
27+
</md-sidenav-content>
28+
29+
<md-sidenav #endSnav mode="side" position="end" class="a11y-demo-sidenav-playlist" role="region">
30+
<h2 class="a11y-demo-sidenav-playlist-header">Playlists</h2>
31+
<button md-button aria-label="Thumbs up playlist" (click)="play('Thumbs up')">
32+
Thumbs up
33+
</button>
34+
<button md-button aria-label="Last added playlist" (click)="play('Last added')">
35+
Last added
36+
</button>
37+
<button md-button aria-label="Free and purchased playlist" (click)="play('Free and purchased')">
38+
Free and purchased
39+
</button>
40+
</md-sidenav>
41+
</md-sidenav-container>

‎src/demo-app/a11y/sidenav/dual-sidenav-a11y.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.a11y-demo-sidenav-spacer {
2+
flex: 1;
3+
}
4+
5+
md-sidenav.a11y-demo-sidenav-playlist {
6+
display: flex;
7+
flex-direction: column;
8+
width: 200px;
9+
}
10+
11+
.a11y-demo-sidenav-playlist-header {
12+
text-align: center;
13+
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import {Component, ViewEncapsulation} from '@angular/core';
2+
import {MdSnackBar} from '@angular/material';
23

34

45
@Component({
56
moduleId: module.id,
67
selector: 'dual-sidenav-a11y',
78
templateUrl: 'dual-sidenav-a11y.html',
8-
styleUrls: ['shared.css'],
9+
styleUrls: ['shared.css', 'dual-sidenav-a11y.css'],
910
host: {'class': 'a11y-demo-sidenav-app'},
1011
encapsulation: ViewEncapsulation.None,
1112
})
12-
export class SidenavDualAccessibilityDemo {}
13+
export class SidenavDualAccessibilityDemo {
14+
constructor(private _snackbar: MdSnackBar) {}
15+
16+
play(list: string) {
17+
this._snackbar.open(`Playing "${list}"`, '', {duration: 1000});
18+
}
19+
}

‎src/demo-app/a11y/sidenav/mobile-sidenav-a11y.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
<button md-icon-button aria-label="Navigation menu" (click)="snav.toggle()">
44
<md-icon aria-hidden="true">menu</md-icon>
55
</button>
6-
<span class="a11y-demo-sidenav-app-name">Responsive Sidenav App</span>
6+
<h1 class="a11y-demo-sidenav-app-name">Responsive Sidenav App</h1>
77
</md-toolbar>
88

99
<md-sidenav-container
1010
class="a11y-demo-sidenav-container"
1111
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
1212
<md-sidenav
1313
#snav
14+
role="navigation"
1415
[mode]="mobileQuery.matches ? 'over' : 'side'"
1516
[fixedInViewport]="mobileQuery.matches">
1617
<md-nav-list>
@@ -21,7 +22,7 @@
2122
</md-nav-list>
2223
</md-sidenav>
2324

24-
<md-sidenav-content>
25+
<md-sidenav-content role="region">
2526
<button md-raised-button aria-label="Close responsive sidenav example" color="primary"
2627
class="a11y-demo-sidenav-close" routerLink="..">
2728
Close example

‎src/demo-app/a11y/sidenav/shared.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
flex: 1;
1313
}
1414

15-
.a11y-demo-sidenav-app-name {
15+
h1.a11y-demo-sidenav-app-name {
1616
margin-left: 8px;
1717
}
1818

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,3 @@ <h2>Dual sidenavs (e.g. music app with hamburger menu and playlist sidenav)</h2>
1818
View example
1919
</a>
2020
</section>
21-

0 commit comments

Comments
 (0)