demo(card): add accessibility demo page for card (#6358)

src/demo-app/a11y/a11y-module.ts

@@ -8,6 +8,7 @@ import {AccessibilityDemo, AccessibilityHome} from './a11y';
 import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
+import {CardAccessibilityDemo} from './card/card-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {
@@ -56,6 +57,7 @@ export class AccessibilityRoutingModule {}
     AutocompleteAccessibilityDemo,
     ButtonAccessibilityDemo,
     ButtonToggleAccessibilityDemo,
+    CardAccessibilityDemo,
     CheckboxAccessibilityDemo,
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -20,6 +20,7 @@ export class AccessibilityDemo {
     {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},
     {name: 'Button toggle', route: 'button-toggle'},
+    {name: 'Card', route: 'card'},
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},

src/demo-app/a11y/card/card-a11y.html

@@ -0,0 +1,93 @@
+<section>
+  <h2>Dogs group</h2>
+  <p>Showing a card with a group of content</p>
+  <md-card class="example-card" role="group">
+    <md-card-content>
+      <p>Herding Group</p>
+      <p>Hound Group</p>
+      <p>Non-Sporting Group</p>
+      <p>Sporting Group</p>
+      <p>Terrier Group</p>
+      <p>Toy Group</p>
+      <p>Working Group</p>
+      <p>Foundation Stock Service</p>
+      <p>Miscellaneous Class</p>
+    </md-card-content>
+  </md-card>
+</section>
+
+<section>
+  <h2>Husky</h2>
+  <p>Showing a card with title only</p>
+  <md-card class="example-card">
+    Siberian Husky
+  </md-card>
+</section>
+
+<section>
+  <h2>Malamute</h2>
+  <p>Showing a Card with title and subtitle. </p>
+  <md-card class="example-card">
+    <md-card-title>Alaskan Malamute</md-card-title>
+    <md-card-subtitle>Dog breed</md-card-subtitle>
+  </md-card>
+</section>
+
+
+<section>
+  <h2>German Shepherd</h2>
+  <p>
+    Showing a card with title, subtitle, and a footer.
+  </p>
+  <md-card class="example-card">
+    <md-card-subtitle>Dog breed</md-card-subtitle>
+    <md-card-title>German Shepherd</md-card-title>
+    <md-card-content>
+      The German Shepherd is a breed of medium to large-sized working dog that originated in
+      Germany. The breed's officially recognized name is German Shepherd Dog in the English
+      language. The breed is also known as the Alsatian in Britain and Ireland.
+    </md-card-content>
+    <md-card-footer>
+      People also search for Rottweiler, Siberian Husky, Labrador Retriever, Doberman Pinscher
+    </md-card-footer>
+  </md-card>
+</section>
+
+<section>
+  <h2>Dachshund</h2>
+  <p>Showing a card with title, subtitle, and avatar as header and a card image.</p>
+  <md-card class="example-card">
+    <md-card-header>
+      <img md-card-avatar src="a11y/card/assets/dachshund-avatar.jpg" aria-label="Dachshund avatar">
+      <md-card-title>Dachshund</md-card-title>
+      <md-card-subtitle>Dog breed</md-card-subtitle>
+    </md-card-header>
+    <img md-card-image src="a11y/card/assets/dachshund.jpg"
+         aria-label="Dachshund">
+    <md-card-content>
+      The dachshund is a short-legged, long-bodied, hound-type dog breed.
+    </md-card-content>
+  </md-card>
+</section>
+
+<section>
+  <h2>Shiba Inu</h2>
+  <p>Showing a card with header, content, image, and two action buttons: "share" and "like".</p>
+  <md-card class="example-card">
+    <md-card-header>
+      <img md-card-avatar src="a11y/card/assets/shiba-inu-avatar.jpg" aria-label="Shiba Inu avatar">
+      <md-card-title>Shiba Inu</md-card-title>
+      <md-card-subtitle>Dog Breed</md-card-subtitle>
+    </md-card-header>
+    <img md-card-image  src="a11y/card/assets/shiba-inu.jpg" aria-label="Shiba Inu">
+    <md-card-content>
+      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+      bred for hunting.
+    </md-card-content>
+    <md-card-actions align="end">
+      <button md-button (click)="openSnackbar('Liked Shiba Inu')">like</button>
+      <button md-button (click)="openSnackbar('Shared Shiba Inu')">share</button>
+    </md-card-actions>
+  </md-card>
+</section>

src/demo-app/a11y/card/card-a11y.scss

@@ -0,0 +1,7 @@
+.example-card button {
+  text-transform: uppercase;
+}
+
+.example-card {
+  max-width: 450px;
+}

src/demo-app/a11y/card/card-a11y.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+@Component({
+  moduleId: module.id,
+  selector: 'card-a11y',
+  templateUrl: 'card-a11y.html',
+  styleUrls: ['card-a11y.css'],
+})
+export class CardAccessibilityDemo {
+  showProgress: boolean = false;
+
+  constructor(private snackBar: MdSnackBar) {}
+
+  openSnackbar(message: string) {
+    this.snackBar.open(message, '', {duration: 2000});
+  }
+}

src/demo-app/a11y/routes.ts

@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
 import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
+import {CardAccessibilityDemo} from './card/card-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
@@ -23,6 +24,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'autocomplete', component: AutocompleteAccessibilityDemo},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
+  {path: 'card', component: CardAccessibilityDemo},
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},