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

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

@@ -6,6 +6,7 @@ import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {DemoMaterialModule} from '../demo-material-module';
 import {AccessibilityHome, AccessibilityDemo} from './a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
+import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
@@ -26,6 +27,8 @@ export class AccessibilityRoutingModule {}
     FormsModule,
     ReactiveFormsModule,
     AccessibilityRoutingModule,
+    FormsModule,
+    ReactiveFormsModule,
     DemoMaterialModule,
     FormsModule,
     ReactiveFormsModule,
@@ -34,6 +37,7 @@ export class AccessibilityRoutingModule {}
     AccessibilityDemo,
     AccessibilityHome,
     ButtonAccessibilityDemo,
+    ButtonToggleAccessibilityDemo,
     CheckboxAccessibilityDemo,
     ChipsAccessibilityDemo,
     RadioAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -18,6 +18,7 @@ export class AccessibilityDemo {
   navItems = [
     {name: 'Home', route: '.'},
     {name: 'Button', route: 'button'},
+    {name: 'Button toggle', route: 'button-toggle'},
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Chips', route: 'chips'},
     {name: 'Radio buttons', route: 'radio'},

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

@@ -0,0 +1,62 @@
+<section>
+  <h2>Single button toggle</h2>
+  <md-button-toggle>Yes</md-button-toggle>
+</section>
+
+<section>
+  <h2>Button toggles with icons</h2>
+  <md-button-toggle-group name="alignment" aria-label="Alignments">
+    <md-button-toggle value="left" aria-label="Align left">
+      <md-icon>format_align_left</md-icon>
+    </md-button-toggle>
+    <md-button-toggle value="center" aria-label="Align center">
+      <md-icon>format_align_center</md-icon>
+    </md-button-toggle>
+    <md-button-toggle value="right" aria-label="Align right">
+      <md-icon>format_align_right</md-icon>
+    </md-button-toggle>
+    <md-button-toggle value="justify" aria-label="Align justify">
+      <md-icon>format_align_justify</md-icon>
+    </md-button-toggle>
+  </md-button-toggle-group>
+</section>
+
+<section>
+  <h2>Multi-selection button toggle group</h2>
+  <md-button-toggle-group multiple aria-label="Groceries">
+    <md-button-toggle>Flour</md-button-toggle>
+    <md-button-toggle>Eggs</md-button-toggle>
+    <md-button-toggle>Sugar</md-button-toggle>
+    <md-button-toggle>Milk</md-button-toggle>
+  </md-button-toggle-group>
+</section>
+
+<section>
+  <h2>Exclusive selection button toggle group</h2>
+  <md-button-toggle-group name="pies" [(ngModel)]="favoritePie"  aria-label="Pies">
+    <md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
+      {{pie}}
+    </md-button-toggle>
+  </md-button-toggle-group>
+  <p>Your favorite type of pie is: {{favoritePie}}</p>
+</section>
+
+<section>
+  <h2>Disabled button toggle group</h2>
+  <md-button-toggle-group [disabled]="true" aria-label="Groceries">
+    <md-button-toggle>Flour</md-button-toggle>
+    <md-button-toggle>Eggs</md-button-toggle>
+    <md-button-toggle>Sugar</md-button-toggle>
+    <md-button-toggle>Milk</md-button-toggle>
+  </md-button-toggle-group>
+</section>
+
+<section>
+  <h2>Vertical button toggle group</h2>
+  <md-button-toggle-group multiple [vertical]="true" aria-label="Groceries">
+    <md-button-toggle>Flour</md-button-toggle>
+    <md-button-toggle>Eggs</md-button-toggle>
+    <md-button-toggle>Sugar</md-button-toggle>
+    <md-button-toggle>Milk</md-button-toggle>
+  </md-button-toggle-group>
+</section>

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

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'button-toggle-a11y',
+  templateUrl: 'button-toggle-a11y.html',
+  styleUrls: ['button-toggle-a11y.css'],
+})
+export class ButtonToggleAccessibilityDemo {
+  favoritePie = 'Apple';
+  pieOptions = [
+    'Apple',
+    'Cherry',
+    'Pecan',
+    'Lemon',
+  ];
+}

src/demo-app/a11y/routes.ts

@@ -1,5 +1,6 @@
 import {Routes} from '@angular/router';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
+import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
@@ -8,6 +9,7 @@ import {AccessibilityHome} from './a11y';
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
   {path: 'button', component: ButtonAccessibilityDemo},
+  {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},

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

@@ -233,7 +233,8 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase
   inputs: ['disabled'],
   host: {
     'class': 'mat-button-toggle-group',
-    '[class.mat-button-toggle-vertical]': 'vertical'
+    '[class.mat-button-toggle-vertical]': 'vertical',
+    'role': 'group'
   }
 })
 export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase