Add more demos in button accessibility demo page (#6099)

Author: tinayuangao

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>

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;
-  }
 }
-

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++;
+  }
 }