Skip to content

Commit 1f41cf0

Browse files
tinayuangaotinayuangao
committed
Add accessibility page
1 parent ac104c3 commit 1f41cf0

File tree

10 files changed

+243
-75
lines changed

10 files changed

+243
-75
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import {DemoMaterialModule} from '../demo-material-module';
4+
import {AccessibilityHome} from './accessibility';
5+
import {ButtonAccessibilityDemo} from './button/button-accessibility';
6+
7+
8+
@NgModule({
9+
imports: [
10+
CommonModule,
11+
DemoMaterialModule,
12+
],
13+
declarations: [
14+
AccessibilityHome,
15+
ButtonAccessibilityDemo,
16+
],
17+
})
18+
export class AccessibilityDemoModule {}

‎src/demo-app/accessibility/accessibility.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<md-sidenav-container class="demo-root" fullscreen>
2+
<md-sidenav #start>
3+
<md-nav-list>
4+
<a *ngFor="let navItem of navItems"
5+
md-list-item
6+
(click)="start.close()"
7+
[routerLink]="[navItem.route]">
8+
{{navItem.name}}
9+
</a>
10+
</md-nav-list>
11+
<button md-button (click)="start.close()">CLOSE</button>
12+
</md-sidenav>
13+
<div>
14+
<md-toolbar color="primary">
15+
<button md-icon-button (click)="start.open()">
16+
<md-icon class="md-24">menu</md-icon>
17+
</button>
18+
<div class="demo-toolbar">
19+
<h1>Angular Material Demos</h1>
20+
<div>
21+
<button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
22+
<md-icon class="md-24">fullscreen</md-icon>
23+
</button>
24+
<button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
25+
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
26+
{{root.dir.toUpperCase()}}
27+
</button>
28+
</div>
29+
</div>
30+
</md-toolbar>
31+
32+
<div #root="dir" dir="ltr" class="demo-content" >
33+
<router-outlet></router-outlet>
34+
</div>
35+
</div>
36+
</md-sidenav-container>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
2+
3+
@Component({
4+
moduleId: module.id,
5+
selector: 'accessibility-home',
6+
template: `<p>Welcome to the accessibility demos for Angular Material!</p>
7+
<p>Open the sidenav to select a demo.</p>`,
8+
})
9+
export class AccessibilityHome {}
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'accessibility-demo',
14+
templateUrl: './accessibility.html',
15+
host: {
16+
'[class.unicorn-dark-theme]': 'dark',
17+
},
18+
encapsulation: ViewEncapsulation.None,
19+
})
20+
export class AccessibilityDemo {
21+
dark = false;
22+
navItems = [
23+
{name: 'Button', route: 'button'},
24+
];
25+
26+
constructor(private _element: ElementRef) {}
27+
28+
toggleFullscreen() {
29+
let elem = this._element.nativeElement.querySelector('.demo-content');
30+
if (elem.requestFullscreen) {
31+
elem.requestFullscreen();
32+
} else if (elem.webkitRequestFullScreen) {
33+
elem.webkitRequestFullScreen();
34+
} else if (elem.mozRequestFullScreen) {
35+
elem.mozRequestFullScreen();
36+
} else if (elem.msRequestFullScreen) {
37+
elem.msRequestFullScreen();
38+
}
39+
}
40+
}

‎src/demo-app/accessibility/button/button-accessibility.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="demo-button">
2+
<section>
3+
<button md-button>Check</button>
4+
<button md-raised-button>raised</button>
5+
<button md-fab>
6+
<md-icon class="md-24">check</md-icon>
7+
</button>
8+
<button md-mini-fab>
9+
<md-icon class="md-24">check</md-icon>
10+
</button>
11+
</section>
12+
13+
<section>
14+
<a href="http://www.google.com" md-button color="primary">SEARCH</a>
15+
<a href="http://www.google.com" md-raised-button>SEARCH</a>
16+
<a href="http://www.google.com" md-fab>
17+
<md-icon class="md-24">check</md-icon>
18+
</a>
19+
<a href="http://www.google.com" md-mini-fab>
20+
<md-icon class="md-24">check</md-icon>
21+
</a>
22+
</section>
23+
</div>

‎src/demo-app/accessibility/button/button-accessibility.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
.demo-button {
3+
button, a {
4+
margin: 8px;
5+
text-transform: uppercase;
6+
}
7+
8+
section {
9+
display: flex;
10+
align-items: center;
11+
margin: 8px;
12+
}
13+
14+
p {
15+
padding: 5px 15px;
16+
}
17+
}
18+

‎src/demo-app/accessibility/button/button-accessibility.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'button-accessibility',
7+
templateUrl: 'button-accessibility.html',
8+
styleUrls: ['button-accessibility.css'],
9+
})
10+
export class ButtonAccessibilityDemo {
11+
// TODO(tinayuangao): Add use cases
12+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Routes} from '@angular/router';
2+
import {ButtonAccessibilityDemo} from './button/button-accessibility';
3+
import {AccessibilityHome} from './accessibility';
4+
5+
export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
6+
{path: '', component: AccessibilityHome},
7+
{path: 'button', component: ButtonAccessibilityDemo},
8+
];

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

Lines changed: 5 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -42,87 +42,15 @@ import {PeopleDatabase} from './table/people-database';
4242
import {DatepickerDemo} from './datepicker/datepicker-demo';
4343
import {TypographyDemo} from './typography/typography-demo';
4444
import {ExpansionDemo} from './expansion/expansion-demo';
45+
import {AccessibilityDemoModule} from './accessibility/accessibility-module';
46+
import {DemoMaterialModule} from './demo-material-module';
4547
import {
4648
FullscreenOverlayContainer,
47-
MdAutocompleteModule,
48-
MdButtonModule,
49-
MdButtonToggleModule,
50-
MdCardModule,
51-
MdCheckboxModule,
52-
MdChipsModule,
53-
MdCoreModule,
54-
MdTableModule,
55-
MdDatepickerModule,
56-
MdDialogModule,
57-
MdExpansionModule,
58-
MdGridListModule,
59-
MdIconModule,
60-
MdInputModule,
61-
MdListModule,
62-
MdMenuModule,
63-
MdNativeDateModule,
64-
MdPaginatorModule,
65-
MdProgressBarModule,
66-
MdProgressSpinnerModule,
67-
MdRadioModule,
68-
MdRippleModule,
69-
MdSelectModule,
70-
MdSidenavModule,
71-
MdSliderModule,
72-
MdSlideToggleModule,
73-
MdSnackBarModule,
74-
MdSortModule,
75-
MdTabsModule,
76-
MdToolbarModule,
77-
MdTooltipModule,
7849
OverlayContainer,
79-
StyleModule
8050
} from '@angular/material';
8151
import {CdkTableModule} from '@angular/cdk';
8252
import {TableHeaderDemo} from './table/table-header-demo';
83-
84-
/**
85-
* NgModule that includes all Material modules that are required to serve the demo-app.
86-
*/
87-
@NgModule({
88-
exports: [
89-
MdAutocompleteModule,
90-
MdButtonModule,
91-
MdButtonToggleModule,
92-
MdCardModule,
93-
MdCheckboxModule,
94-
MdChipsModule,
95-
MdTableModule,
96-
MdDatepickerModule,
97-
MdDialogModule,
98-
MdExpansionModule,
99-
MdGridListModule,
100-
MdIconModule,
101-
MdInputModule,
102-
MdListModule,
103-
MdMenuModule,
104-
MdCoreModule,
105-
MdPaginatorModule,
106-
MdProgressBarModule,
107-
MdProgressSpinnerModule,
108-
MdRadioModule,
109-
MdRippleModule,
110-
MdSelectModule,
111-
MdSidenavModule,
112-
MdSlideToggleModule,
113-
MdSliderModule,
114-
MdSnackBarModule,
115-
MdSortModule,
116-
MdTabsModule,
117-
MdToolbarModule,
118-
MdTooltipModule,
119-
MdNativeDateModule,
120-
CdkTableModule,
121-
StyleModule
122-
]
123-
})
124-
export class DemoMaterialModule {}
125-
53+
import {AccessibilityDemo} from './accessibility/accessibility';
12654

12755
@NgModule({
12856
imports: [
@@ -133,8 +61,10 @@ export class DemoMaterialModule {}
13361
ReactiveFormsModule,
13462
RouterModule.forRoot(DEMO_APP_ROUTES),
13563
DemoMaterialModule,
64+
AccessibilityDemoModule,
13665
],
13766
declarations: [
67+
AccessibilityDemo,
13868
AutocompleteDemo,
13969
BaselineDemo,
14070
ButtonDemo,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
3636
import {TableDemo} from '../table/table-demo';
3737
import {TypographyDemo} from '../typography/typography-demo';
3838
import {ExpansionDemo} from '../expansion/expansion-demo';
39+
import {AccessibilityDemo} from '../accessibility/accessibility';
40+
import {ACCESSIBILITY_DEMO_ROUTES} from '../accessibility/routes';
3941

4042
export const DEMO_APP_ROUTES: Routes = [
4143
{path: '', component: Home},
@@ -74,4 +76,5 @@ export const DEMO_APP_ROUTES: Routes = [
7476
{path: 'style', component: StyleDemo},
7577
{path: 'typography', component: TypographyDemo},
7678
{path: 'expansion', component: ExpansionDemo},
79+
{path: 'accessibility', component: AccessibilityDemo, children : ACCESSIBILITY_DEMO_ROUTES},
7780
];

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import {NgModule} from '@angular/core';
2+
import {
3+
FullscreenOverlayContainer,
4+
MdAutocompleteModule,
5+
MdButtonModule,
6+
MdButtonToggleModule,
7+
MdCardModule,
8+
MdCheckboxModule,
9+
MdChipsModule,
10+
MdCoreModule,
11+
MdTableModule,
12+
MdDatepickerModule,
13+
MdDialogModule,
14+
MdExpansionModule,
15+
MdGridListModule,
16+
MdIconModule,
17+
MdInputModule,
18+
MdListModule,
19+
MdMenuModule,
20+
MdNativeDateModule,
21+
MdPaginatorModule,
22+
MdProgressBarModule,
23+
MdProgressSpinnerModule,
24+
MdRadioModule,
25+
MdRippleModule,
26+
MdSelectModule,
27+
MdSidenavModule,
28+
MdSliderModule,
29+
MdSlideToggleModule,
30+
MdSnackBarModule,
31+
MdSortModule,
32+
MdTabsModule,
33+
MdToolbarModule,
34+
MdTooltipModule,
35+
OverlayContainer,
36+
StyleModule
37+
} from '@angular/material';
38+
import {CdkTableModule} from '@angular/cdk';
39+
40+
/**
41+
* NgModule that includes all Material modules that are required to serve the demo-app.
42+
*/
43+
@NgModule({
44+
exports: [
45+
MdAutocompleteModule,
46+
MdButtonModule,
47+
MdButtonToggleModule,
48+
MdCardModule,
49+
MdCheckboxModule,
50+
MdChipsModule,
51+
MdTableModule,
52+
MdDatepickerModule,
53+
MdDialogModule,
54+
MdExpansionModule,
55+
MdGridListModule,
56+
MdIconModule,
57+
MdInputModule,
58+
MdListModule,
59+
MdMenuModule,
60+
MdCoreModule,
61+
MdPaginatorModule,
62+
MdProgressBarModule,
63+
MdProgressSpinnerModule,
64+
MdRadioModule,
65+
MdRippleModule,
66+
MdSelectModule,
67+
MdSidenavModule,
68+
MdSlideToggleModule,
69+
MdSliderModule,
70+
MdSnackBarModule,
71+
MdSortModule,
72+
MdTabsModule,
73+
MdToolbarModule,
74+
MdTooltipModule,
75+
MdNativeDateModule,
76+
CdkTableModule,
77+
StyleModule
78+
]
79+
})
80+
export class DemoMaterialModule {}

0 commit comments

Comments
 (0)