From a503e19898df2eaa7cf190fd38dfee88bac38e35 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Tue, 1 Aug 2017 14:39:35 -0700
Subject: [PATCH] Add more demos in button accessibility demo page (#6099)

---
 src/demo-app/a11y/button/button-a11y.html | 79 +++++++++++++++--------
 src/demo-app/a11y/button/button-a11y.scss | 12 ----
 src/demo-app/a11y/button/button-a11y.ts   |  6 +-
 3 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/src/demo-app/a11y/button/button-a11y.html b/src/demo-app/a11y/button/button-a11y.html
index 8167528a18c..875f983c217 100644
--- a/src/demo-app/a11y/button/button-a11y.html
+++ b/src/demo-app/a11y/button/button-a11y.html
@@ -1,29 +1,52 @@
-<section>
-  <h2>Button elements</h2>
-  <button md-button>check</button>
-  <button md-raised-button>raised</button>
-  <button md-fab aria-label="Activate floating action style button">
-    <md-icon class="md-24">check</md-icon>
-  </button>
-  <button md-mini-fab aria-label="Activate mini floating action style button">
-    <md-icon class="md-24">check</md-icon>
-  </button>
-  <button md-icon-button aria-label="Activate icon style button">
-    <md-icon class="md-24">check</md-icon>
-  </button>
-</section>
+<div class="demo-button">
+  <section>
+    <h2>Button elements</h2>
+    <p>Click on the buttons to increase the button counter.</p>
+    <p>Current number of clicks: {{counter}}</p>
+    <button md-button (click)="increase()">Check</button>
+    <button md-raised-button (click)="increase()">Pitch</button>
+    <button md-fab (click)="increase()"
+            aria-label="Activate floating action style button to increase the button counter">
+      <md-icon class="md-24">plus_one</md-icon>
+    </button>
+    <button md-mini-fab (click)="increase()"
+            aria-label="Mini floating action button to increase the button counter by 1">
+      <md-icon class="md-24">plus_one</md-icon>
+    </button>
+    <button md-icon-button (click)="increase()"
+            aria-label="Icon button to increase the button counter by 1">
+      <md-icon class="md-24">plus_one</md-icon>
+    </button>
+  </section>
 
-<section>
-  <h2>Anchor elements</h2>
-  <a href="http://www.google.com" md-button color="primary">Google search</a>
-  <a href="http://www.google.com" md-raised-button>Google search</a>
-  <a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
-    <md-icon class="md-24">check</md-icon>
-  </a>
-  <a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
-    <md-icon class="md-24">check</md-icon>
-  </a>
-  <a md-icon-button aria-label="Activate icon style link">
-    <md-icon class="md-24">check</md-icon>
-  </a>
-</section>
+  <section>
+    <h2>Anchor elements</h2>
+    <a href="http://www.google.com" md-button color="primary">Google search</a>
+    <a href="https://www.youtube.com/" md-raised-button>YouTube</a>
+    <a href="http://www.google.com" md-fab
+       aria-label="Activate floating action style google search link">
+      <md-icon class="md-24">search</md-icon>
+    </a>
+    <a href="http://www.google.com" md-mini-fab
+       aria-label="Activate mini floating action style google search link">
+      <md-icon class="md-24">search</md-icon>
+    </a>
+    <a href="http://www.google.com" md-icon-button
+       aria-label="Activate icon style google search link">
+      <md-icon class="md-24">search</md-icon>
+    </a>
+  </section>
+
+  <section>
+    <h2>Buttons in different colors</h2>
+    <button md-button color="primary">Primary</button>
+    <button md-button color="accent">Accent</button>
+    <button md-button color="warn">Warn</button>
+  </section>
+
+  <section>
+    <h2>Disabled button</h2>
+    <p>The following "cancel" button is disabled</p>
+    <button md-button [disabled]="true">Cancel</button>
+  </section>
+</div>
diff --git a/src/demo-app/a11y/button/button-a11y.scss b/src/demo-app/a11y/button/button-a11y.scss
index 2a39d15c12a..c418e5025e9 100644
--- a/src/demo-app/a11y/button/button-a11y.scss
+++ b/src/demo-app/a11y/button/button-a11y.scss
@@ -1,18 +1,6 @@
-
 .demo-button {
   button, a {
     margin: 8px;
     text-transform: uppercase;
   }
-
-  section {
-    display: flex;
-    align-items: center;
-    margin: 8px;
-  }
-
-  p {
-    padding: 5px 15px;
-  }
 }
-
diff --git a/src/demo-app/a11y/button/button-a11y.ts b/src/demo-app/a11y/button/button-a11y.ts
index d2ff4d484d9..616e8252d54 100644
--- a/src/demo-app/a11y/button/button-a11y.ts
+++ b/src/demo-app/a11y/button/button-a11y.ts
@@ -8,5 +8,9 @@ import {Component} from '@angular/core';
   styleUrls: ['button-a11y.css'],
 })
 export class ButtonAccessibilityDemo {
-  // TODO(tinayuangao): Add use cases
+  counter: number = 0;
+
+  increase() {
+    this.counter++;
+  }
 }