demo(slide-toggle): Add accessibility demo page for slide toggle

Author: tinayuangao

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

@@ -15,6 +15,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 
 
 @NgModule({
@@ -48,6 +49,7 @@ export class AccessibilityRoutingModule {}
     InputAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
+    SlideToggleAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -27,5 +27,6 @@ export class AccessibilityDemo {
     {name: 'Input', route: 'input'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
+    {name: 'Slide toggle', route: 'slide-toggle'},
   ];
 }

src/demo-app/a11y/routes.ts

@@ -10,6 +10,7 @@ import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -23,4 +24,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'input', component: InputAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
+  {path: 'slide-toggle', component: SlideToggleAccessibilityDemo},
 ];

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

@@ -0,0 +1,25 @@
+<section>
+  <h2>Receive email update (Default slide toggle) </h2>
+  <md-slide-toggle color="primary" [(ngModel)]="emailToggle">
+    Receive email update
+  </md-slide-toggle>
+</section>
+
+<section>
+  <h2>Music (Disabled slide toggle)</h2>
+  <md-slide-toggle color="accent" [disabled]="true" [(ngModel)]="musicToggle">
+    Music on/off (disabled)
+  </md-slide-toggle>
+</section>
+
+<section>
+  <h2>Terms and conditions (Required slide toggle in a form) </h2>
+  <form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
+    <md-slide-toggle name="termsToggle" required ngModel>
+      I agree to terms and conditions
+    </md-slide-toggle>
+    <p>
+      <button md-raised-button type="submit">Submit</button>
+    </p>
+  </form>
+</section>

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

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'slide-toggle-a11y',
+  templateUrl: 'slide-toggle-a11y.html'
+})
+export class SlideToggleAccessibilityDemo {
+  emailToggle: boolean = true;
+  termsToggle: boolean = false;
+  musicToggle: boolean = false;
+
+  constructor(private snackBar: MdSnackBar) {}
+
+  onFormSubmit() {
+    this.snackBar.open('Terms and condistions accepted!', '', {duration: 2000});
+  }
+}