From bf2336d51f1cb3531132a766ca6724ef7eedfce8 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Mon, 31 Jul 2017 11:12:40 -0700
Subject: [PATCH] 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              |  4 ++
 src/demo-app/a11y/a11y.ts                     |  1 +
 .../button-toggle/button-toggle-a11y.html     | 62 +++++++++++++++++++
 .../button-toggle/button-toggle-a11y.scss     |  0
 .../a11y/button-toggle/button-toggle-a11y.ts  | 18 ++++++
 src/demo-app/a11y/routes.ts                   |  2 +
 src/lib/button-toggle/button-toggle.ts        |  3 +-
 7 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/demo-app/a11y/button-toggle/button-toggle-a11y.html
 create mode 100644 src/demo-app/a11y/button-toggle/button-toggle-a11y.scss
 create mode 100644 src/demo-app/a11y/button-toggle/button-toggle-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index c6f3f13900d..e064ce5d856 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/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,
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 70959026103..78c458f4b23 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/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'},
diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.html b/src/demo-app/a11y/button-toggle/button-toggle-a11y.html
new file mode 100644
index 00000000000..8f6677b7284
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.scss b/src/demo-app/a11y/button-toggle/button-toggle-a11y.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.ts b/src/demo-app/a11y/button-toggle/button-toggle-a11y.ts
new file mode 100644
index 00000000000..9818274aff5
--- /dev/null
+++ b/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',
+  ];
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index fee63e68acb..e8c21ca95c0 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/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},
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index 363767c0297..a03e063e8df 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/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