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 @@
+
+ Single button toggle
+ Yes
+
+
+
+ Button toggles with icons
+
+
+ format_align_left
+
+
+ format_align_center
+
+
+ format_align_right
+
+
+ format_align_justify
+
+
+
+
+
+ Multi-selection button toggle group
+
+ Flour
+ Eggs
+ Sugar
+ Milk
+
+
+
+
+ Exclusive selection button toggle group
+
+
+ {{pie}}
+
+
+ Your favorite type of pie is: {{favoritePie}}
+
+
+
+ Disabled button toggle group
+
+ Flour
+ Eggs
+ Sugar
+ Milk
+
+
+
+
+ Vertical button toggle group
+
+ Flour
+ Eggs
+ Sugar
+ Milk
+
+
\ 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