From d48b95723bf0cd9aefd41b6bacc161990a92a6fc Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Wed, 9 Aug 2017 14:57:59 -0700
Subject: [PATCH] demo(icon): Add an accessibility demo page for icon (#6348)

* demo(icon): Add an accessibility demo page for icon

* Changed to use cases in material.angular.io

* addressed comments
---
 src/demo-app/a11y/a11y-module.ts      |  2 ++
 src/demo-app/a11y/a11y.ts             |  1 +
 src/demo-app/a11y/icon/icon-a11y.html | 30 +++++++++++++++++++++++++++
 src/demo-app/a11y/icon/icon-a11y.ts   | 16 ++++++++++++++
 src/demo-app/a11y/routes.ts           |  2 ++
 5 files changed, 51 insertions(+)
 create mode 100644 src/demo-app/a11y/icon/icon-a11y.html
 create mode 100644 src/demo-app/a11y/icon/icon-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 343dd585bbf..1ebbedea90c 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -13,6 +13,7 @@ import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
+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';
@@ -46,6 +47,7 @@ export class AccessibilityRoutingModule {}
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,
     GridListAccessibilityDemo,
+    IconAccessibilityDemo,
     InputAccessibilityDemo,
     ProgressSpinnerAccessibilityDemo,
     RadioAccessibilityDemo,
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 28e348eb76c..b6b8b91e766 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -24,6 +24,7 @@ export class AccessibilityDemo {
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Grid list', route: 'grid-list'},
+    {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},
     {name: 'Progress spinner', route: 'progress-spinner'},
     {name: 'Radio buttons', route: 'radio'},
diff --git a/src/demo-app/a11y/icon/icon-a11y.html b/src/demo-app/a11y/icon/icon-a11y.html
new file mode 100644
index 00000000000..3b8bc223aa4
--- /dev/null
+++ b/src/demo-app/a11y/icon/icon-a11y.html
@@ -0,0 +1,30 @@
+<section>
+  <h2>Fingerprint status</h2>
+  <p>Showing a status message with a purely decorative icon</p>
+  <md-icon color="primary">fingerprint</md-icon>
+  Your fingerprint was recorded!
+</section>
+
+<section>
+  <h2>Delete icon button </h2>
+  <p>Showing a button with interactive icon which can perform an action</p>
+  <button md-icon-button aria-label="Delete" (click)="deleteIcon()">
+    <md-icon color="accent">delete</md-icon>
+  </button>
+</section>
+
+<section>
+  <h2>Home link </h2>
+  <p>Showing a link with interactive icon</p>
+  <a md-icon-button aria-label="Home" href="http://www.google.com">
+    <md-icon color="warn">home</md-icon>
+  </a>
+</section>
+
+<section>
+  <h2>Done status </h2>
+  <p>Showing a status indicator with an indicator icon</p>
+  <md-icon color="primary">done</md-icon>
+  <span class="cdk-visually-hidden">Done</span>
+  Tasks
+</section>
diff --git a/src/demo-app/a11y/icon/icon-a11y.ts b/src/demo-app/a11y/icon/icon-a11y.ts
new file mode 100644
index 00000000000..dfac7d4c04e
--- /dev/null
+++ b/src/demo-app/a11y/icon/icon-a11y.ts
@@ -0,0 +1,16 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+@Component({
+  moduleId: module.id,
+  selector: 'icon-a11y',
+  templateUrl: 'icon-a11y.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class IconAccessibilityDemo {
+  constructor(private snackBar: MdSnackBar) {}
+
+  deleteIcon() {
+    this.snackBar.open('Item deleted', '', {duration: 2000});
+  }
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index eae2b97f517..a74903312d7 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -8,6 +8,7 @@ import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
+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';
@@ -21,6 +22,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
+  {path: 'icon', component: IconAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
   {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},