From 0e4680f7822dfdeb17e26c48ef57ebec39a1f82e Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Wed, 9 Aug 2017 14:57:26 -0700
Subject: [PATCH] demo(progress-spinner): Add progress spinner accessibility
 demo page (#6347)

* demo(progress-spinner): Add progress spinner accessibility demo page

* address comments

* fix

* add aria-label

* portion of pizza eaten
---
 src/demo-app/a11y/a11y-module.ts                 |  2 ++
 src/demo-app/a11y/a11y.ts                        |  1 +
 .../progress-spinner/progress-spinner-a11y.html  | 16 ++++++++++++++++
 .../progress-spinner/progress-spinner-a11y.ts    | 10 ++++++++++
 src/demo-app/a11y/routes.ts                      |  2 ++
 5 files changed, 31 insertions(+)
 create mode 100644 src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html
 create mode 100644 src/demo-app/a11y/progress-spinner/progress-spinner-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 4df81e7693f..343dd585bbf 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -14,6 +14,7 @@ import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-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 {}
     DatepickerAccessibilityDemo,
     GridListAccessibilityDemo,
     InputAccessibilityDemo,
+    ProgressSpinnerAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
   ]
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 3d5eb527b80..28e348eb76c 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -25,6 +25,7 @@ export class AccessibilityDemo {
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Grid list', route: 'grid-list'},
     {name: 'Input', route: 'input'},
+    {name: 'Progress spinner', route: 'progress-spinner'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
   ];
diff --git a/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html b/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html
new file mode 100644
index 00000000000..ea7809a443e
--- /dev/null
+++ b/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html
@@ -0,0 +1,16 @@
+<section>
+  <h2>Loading indicator (Indeterminate progress spinner)</h2>
+  <md-spinner color="indeterminate" [strokeWidth]="1" aria-label="Loading"></md-spinner>
+  <md-spinner color="accent" aria-label="Loading"></md-spinner>
+</section>
+
+<section>
+  <h2>Portion of pizza eaten (Determinate progress spinner) </h2>
+  <md-progress-spinner [strokeWidth]="1" color="primary"
+                       [value]="portionValue" aria-label="Portion of pizza eaten">
+  </md-progress-spinner>
+  <md-progress-spinner color="warn" [value]="portionValue"
+                       aria-label="Portion of pizza eaten">
+  </md-progress-spinner>
+
+</section>
diff --git a/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.ts b/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.ts
new file mode 100644
index 00000000000..9cb0a66f801
--- /dev/null
+++ b/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'progress-spinner-a11y',
+  templateUrl: 'progress-spinner-a11y.html'
+})
+export class ProgressSpinnerAccessibilityDemo {
+  portionValue: number = 60;
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index b8bdc293fca..eae2b97f517 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -9,6 +9,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
@@ -21,6 +22,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
+  {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
 ];