From dfd3d7133b3f25748f60a29f30d9d1758cda3ade Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Mon, 21 Aug 2017 13:56:45 -0700
Subject: [PATCH] demo(slide-toggle): add accessibility demo page for slide
 toggle (#6349)

---
 src/demo-app/a11y/a11y-module.ts              |  2 ++
 src/demo-app/a11y/a11y.ts                     |  1 +
 src/demo-app/a11y/routes.ts                   |  2 ++
 .../a11y/slide-toggle/slide-toggle-a11y.html  | 28 +++++++++++++++++++
 .../a11y/slide-toggle/slide-toggle-a11y.ts    | 20 +++++++++++++
 5 files changed, 53 insertions(+)
 create mode 100644 src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html
 create mode 100644 src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 2ca041402fb..0d05281f0e0 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -17,6 +17,7 @@ import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
 
@@ -54,6 +55,7 @@ export class AccessibilityRoutingModule {}
     ProgressSpinnerAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
+    SlideToggleAccessibilityDemo,
     SnackBarAccessibilityDemo,
     SelectAccessibilityDemo,
   ]
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 17e258e6282..7d63ede8bbe 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -29,6 +29,7 @@ export class AccessibilityDemo {
     {name: 'Progress spinner', route: 'progress-spinner'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
+    {name: 'Slide toggle', route: 'slide-toggle'},
     {name: 'Snack bar', route: 'snack-bar'},
     {name: 'Select', route: 'select'},
   ];
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index 871b9913245..24215c7fdd3 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -12,6 +12,7 @@ import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
 
@@ -29,6 +30,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
+  {path: 'slide-toggle', component: SlideToggleAccessibilityDemo},
   {path: 'snack-bar', component: SnackBarAccessibilityDemo},
   {path: 'select', component: SelectAccessibilityDemo},
 ];
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html
new file mode 100644
index 00000000000..3fe2d1ef16b
--- /dev/null
+++ b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html
@@ -0,0 +1,28 @@
+<section>
+  <h2>Receive email update</h2>
+  <p>Showing a toggle to manage whether receive email update.</p>
+  <md-slide-toggle color="primary" [(ngModel)]="emailToggle">
+    Receive email update
+  </md-slide-toggle>
+</section>
+
+<section>
+  <h2>Music</h2>
+  <p>Showing a disabled toggle to control music on/off status.</p>
+  <md-slide-toggle color="accent" [disabled]="true" [(ngModel)]="musicToggle">
+    Music {{musicToggle ? 'on' : 'off'}}   (disabled)
+  </md-slide-toggle>
+</section>
+
+<section>
+  <h2>Terms and conditions</h2>
+  <p>Showing a required toggle to accept terms and conditions in a form.</p>
+  <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>
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts
new file mode 100644
index 00000000000..6975bcfcd8b
--- /dev/null
+++ b/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});
+  }
+}