From 4353a4c584431f52b5a2f74e4ddcdab181d9085f Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Fri, 1 Sep 2017 08:09:29 -0700
Subject: [PATCH] demo(progress-bar): Add progress bar accessibility demo page
 (#6339)

---
 src/demo-app/a11y/a11y-module.ts              |  2 ++
 src/demo-app/a11y/a11y.ts                     |  1 +
 .../a11y/progress-bar/progress-bar-a11y.html  | 24 +++++++++++++++++++
 .../a11y/progress-bar/progress-bar-a11y.ts    | 13 ++++++++++
 src/demo-app/a11y/routes.ts                   |  2 ++
 5 files changed, 42 insertions(+)
 create mode 100644 src/demo-app/a11y/progress-bar/progress-bar-a11y.html
 create mode 100644 src/demo-app/a11y/progress-bar/progress-bar-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index fec683d71a0..67ed6062762 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -27,6 +27,7 @@ import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {MenuAccessibilityDemo} from './menu/menu-a11y';
+import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
@@ -72,6 +73,7 @@ export class AccessibilityRoutingModule {}
     IconAccessibilityDemo,
     InputAccessibilityDemo,
     MenuAccessibilityDemo,
+    ProgressBarAccessibilityDemo,
     ProgressSpinnerAccessibilityDemo,
     RadioAccessibilityDemo,
     ToolbarAccessibilityDemo,
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index b70ea21504f..7a26c450a2a 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -31,6 +31,7 @@ export class AccessibilityDemo {
     {name: 'Icon', route: 'icon'},
     {name: 'Input', route: 'input'},
     {name: 'Menu', route: 'menu'},
+    {name: 'Progress bar', route: 'progress-bar'},
     {name: 'Progress spinner', route: 'progress-spinner'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
diff --git a/src/demo-app/a11y/progress-bar/progress-bar-a11y.html b/src/demo-app/a11y/progress-bar/progress-bar-a11y.html
new file mode 100644
index 00000000000..60c14531c45
--- /dev/null
+++ b/src/demo-app/a11y/progress-bar/progress-bar-a11y.html
@@ -0,0 +1,24 @@
+<section>
+  <h2>Survey progress (Determinate progress bar)</h2>
+  <md-progress-bar mode="determinate" [value]="surveyProgress" color="primary"
+                   aria-label="Survey progress">
+  </md-progress-bar>
+</section>
+
+<section>
+  <h2>Video progress (Progress bar with buffer) </h2>
+  <md-progress-bar [value]="videoPlayValue" [bufferValue]="videoBufferValue" mode="buffer"
+                   color="primary" aria-label="Video progress">
+  </md-progress-bar>
+</section>
+
+<section>
+  <h2>Loading content progress (Indeterminate progress bar)</h2>
+    <md-progress-bar mode="indeterminate" color="warn" aria-label="Loading content">
+    </md-progress-bar>
+</section>
+
+<section>
+  <h2>Search progress (Query progress bar)</h2>
+  <md-progress-bar mode="query" color="accent" aria-label="Searching"></md-progress-bar>
+</section>
diff --git a/src/demo-app/a11y/progress-bar/progress-bar-a11y.ts b/src/demo-app/a11y/progress-bar/progress-bar-a11y.ts
new file mode 100644
index 00000000000..38251b9f030
--- /dev/null
+++ b/src/demo-app/a11y/progress-bar/progress-bar-a11y.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'progress-bar-a11y',
+  templateUrl: 'progress-bar-a11y.html',
+})
+export class ProgressBarAccessibilityDemo {
+  surveyProgress: number = 30;
+  videoPlayValue: number = 20;
+  videoBufferValue: number = 60;
+}
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index 1d40d0cca55..7b011ad2e21 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -14,6 +14,7 @@ import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {MenuAccessibilityDemo} from './menu/menu-a11y';
+import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
@@ -34,6 +35,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'icon', component: IconAccessibilityDemo},
   {path: 'input', component: InputAccessibilityDemo},
   {path: 'menu', component: MenuAccessibilityDemo},
+  {path: 'progress-bar', component: ProgressBarAccessibilityDemo},
   {path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},