From 9bdd228618c4d5cce846d0bc355301d4bad9128a Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Tue, 15 Aug 2017 14:52:59 -0700
Subject: [PATCH] demo(snackbar): Add accessibility demo page for snack bar
 (#6362)

* demo(snackbar): Add accessibility demo page for snack bar

* Remove pizza example
---
 src/demo-app/a11y/a11y-module.ts              |  2 ++
 src/demo-app/a11y/a11y.ts                     |  1 +
 src/demo-app/a11y/routes.ts                   |  2 ++
 .../a11y/snack-bar/snack-bar-a11y.html        | 13 +++++++++++++
 src/demo-app/a11y/snack-bar/snack-bar-a11y.ts | 19 +++++++++++++++++++
 5 files changed, 37 insertions(+)
 create mode 100644 src/demo-app/a11y/snack-bar/snack-bar-a11y.html
 create mode 100644 src/demo-app/a11y/snack-bar/snack-bar-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 1ebbedea90c..11b41b405b1 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 {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 
 
 @NgModule({
@@ -52,6 +53,7 @@ export class AccessibilityRoutingModule {}
     ProgressSpinnerAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
+    SnackBarAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index b6b8b91e766..ecbb3596811 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -29,5 +29,6 @@ export class AccessibilityDemo {
     {name: 'Progress spinner', route: 'progress-spinner'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
+    {name: 'Snack bar', route: 'snack-bar'},
   ];
 }
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index a74903312d7..a43ea23f624 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 {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -27,4 +28,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
+  {path: 'snack-bar', component: SnackBarAccessibilityDemo},
 ];
diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.html b/src/demo-app/a11y/snack-bar/snack-bar-a11y.html
new file mode 100644
index 00000000000..0065282adcc
--- /dev/null
+++ b/src/demo-app/a11y/snack-bar/snack-bar-a11y.html
@@ -0,0 +1,13 @@
+<section>
+  <h2>Notification</h2>
+  <p>Showing a notification by snack bar without showing actions</p>
+  <button md-raised-button color="primary" (click)="openNotificationSnackBar()">
+    Support
+  </button>
+</section>
+
+<section>
+  <h2>Disco party </h2>
+  <p>Showing a notification by snack bar with a dismiss button</p>
+  <button md-button (click)="openDiscoPartySnackBar()">Disco</button>
+</section>
diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts b/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts
new file mode 100644
index 00000000000..8a4953fc806
--- /dev/null
+++ b/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts
@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+@Component({
+  moduleId: module.id,
+  selector: 'snack-bar-a11y',
+  templateUrl: 'snack-bar-a11y.html',
+})
+export class SnackBarAccessibilityDemo {
+  constructor(private snackBar: MdSnackBar) {}
+
+  openDiscoPartySnackBar() {
+    this.snackBar.open('Disco party!', 'Dismiss', {duration: 5000});
+  }
+
+  openNotificationSnackBar() {
+    this.snackBar.open('Thank you for your support!', '', {duration: 2000});
+  }
+}