Skip to content

Commit bf2336d

Browse files
tinayuangaotinayuangao
authored
a11y(button-toggle): Add accessibility demo page for button toggle (#5948)
* Add accessibility page for button toggle * Add role group. Add labels for button toggle groups
1 parent 1ab4b7e commit bf2336d

File tree

7 files changed

+89
-1
lines changed

7 files changed

+89
-1
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
66
import {DemoMaterialModule} from '../demo-material-module';
77
import {AccessibilityHome, AccessibilityDemo} from './a11y';
88
import {ButtonAccessibilityDemo} from './button/button-a11y';
9+
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
910
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
1011
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
1112
import {RadioAccessibilityDemo} from './radio/radio-a11y';
@@ -26,6 +27,8 @@ export class AccessibilityRoutingModule {}
2627
FormsModule,
2728
ReactiveFormsModule,
2829
AccessibilityRoutingModule,
30+
FormsModule,
31+
ReactiveFormsModule,
2932
DemoMaterialModule,
3033
FormsModule,
3134
ReactiveFormsModule,
@@ -34,6 +37,7 @@ export class AccessibilityRoutingModule {}
3437
AccessibilityDemo,
3538
AccessibilityHome,
3639
ButtonAccessibilityDemo,
40+
ButtonToggleAccessibilityDemo,
3741
CheckboxAccessibilityDemo,
3842
ChipsAccessibilityDemo,
3943
RadioAccessibilityDemo,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export class AccessibilityDemo {
1818
navItems = [
1919
{name: 'Home', route: '.'},
2020
{name: 'Button', route: 'button'},
21+
{name: 'Button toggle', route: 'button-toggle'},
2122
{name: 'Checkbox', route: 'checkbox'},
2223
{name: 'Chips', route: 'chips'},
2324
{name: 'Radio buttons', route: 'radio'},

‎src/demo-app/a11y/button-toggle/button-toggle-a11y.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<section>
2+
<h2>Single button toggle</h2>
3+
<md-button-toggle>Yes</md-button-toggle>
4+
</section>
5+
6+
<section>
7+
<h2>Button toggles with icons</h2>
8+
<md-button-toggle-group name="alignment" aria-label="Alignments">
9+
<md-button-toggle value="left" aria-label="Align left">
10+
<md-icon>format_align_left</md-icon>
11+
</md-button-toggle>
12+
<md-button-toggle value="center" aria-label="Align center">
13+
<md-icon>format_align_center</md-icon>
14+
</md-button-toggle>
15+
<md-button-toggle value="right" aria-label="Align right">
16+
<md-icon>format_align_right</md-icon>
17+
</md-button-toggle>
18+
<md-button-toggle value="justify" aria-label="Align justify">
19+
<md-icon>format_align_justify</md-icon>
20+
</md-button-toggle>
21+
</md-button-toggle-group>
22+
</section>
23+
24+
<section>
25+
<h2>Multi-selection button toggle group</h2>
26+
<md-button-toggle-group multiple aria-label="Groceries">
27+
<md-button-toggle>Flour</md-button-toggle>
28+
<md-button-toggle>Eggs</md-button-toggle>
29+
<md-button-toggle>Sugar</md-button-toggle>
30+
<md-button-toggle>Milk</md-button-toggle>
31+
</md-button-toggle-group>
32+
</section>
33+
34+
<section>
35+
<h2>Exclusive selection button toggle group</h2>
36+
<md-button-toggle-group name="pies" [(ngModel)]="favoritePie" aria-label="Pies">
37+
<md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
38+
{{pie}}
39+
</md-button-toggle>
40+
</md-button-toggle-group>
41+
<p>Your favorite type of pie is: {{favoritePie}}</p>
42+
</section>
43+
44+
<section>
45+
<h2>Disabled button toggle group</h2>
46+
<md-button-toggle-group [disabled]="true" aria-label="Groceries">
47+
<md-button-toggle>Flour</md-button-toggle>
48+
<md-button-toggle>Eggs</md-button-toggle>
49+
<md-button-toggle>Sugar</md-button-toggle>
50+
<md-button-toggle>Milk</md-button-toggle>
51+
</md-button-toggle-group>
52+
</section>
53+
54+
<section>
55+
<h2>Vertical button toggle group</h2>
56+
<md-button-toggle-group multiple [vertical]="true" aria-label="Groceries">
57+
<md-button-toggle>Flour</md-button-toggle>
58+
<md-button-toggle>Eggs</md-button-toggle>
59+
<md-button-toggle>Sugar</md-button-toggle>
60+
<md-button-toggle>Milk</md-button-toggle>
61+
</md-button-toggle-group>
62+
</section>

‎src/demo-app/a11y/button-toggle/button-toggle-a11y.scss‎

Whitespace-only changes.

‎src/demo-app/a11y/button-toggle/button-toggle-a11y.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'button-toggle-a11y',
7+
templateUrl: 'button-toggle-a11y.html',
8+
styleUrls: ['button-toggle-a11y.css'],
9+
})
10+
export class ButtonToggleAccessibilityDemo {
11+
favoritePie = 'Apple';
12+
pieOptions = [
13+
'Apple',
14+
'Cherry',
15+
'Pecan',
16+
'Lemon',
17+
];
18+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Routes} from '@angular/router';
22
import {ButtonAccessibilityDemo} from './button/button-a11y';
3+
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
34
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
45
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
56
import {RadioAccessibilityDemo} from './radio/radio-a11y';
@@ -8,6 +9,7 @@ import {AccessibilityHome} from './a11y';
89
export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
910
{path: '', component: AccessibilityHome},
1011
{path: 'button', component: ButtonAccessibilityDemo},
12+
{path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
1113
{path: 'checkbox', component: CheckboxAccessibilityDemo},
1214
{path: 'chips', component: ChipsAccessibilityDemo},
1315
{path: 'radio', component: RadioAccessibilityDemo},

‎src/lib/button-toggle/button-toggle.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,8 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase
233233
inputs: ['disabled'],
234234
host: {
235235
'class': 'mat-button-toggle-group',
236-
'[class.mat-button-toggle-vertical]': 'vertical'
236+
'[class.mat-button-toggle-vertical]': 'vertical',
237+
'role': 'group'
237238
}
238239
})
239240
export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase

0 commit comments

Comments
 (0)