Skip to content

Commit c248045

Browse files
tinayuangaotinayuangao
committed
demo(card): Add accessibility demo page for card
1 parent 372436c commit c248045

File tree

10 files changed

+115
-0
lines changed

10 files changed

+115
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {AccessibilityDemo, AccessibilityHome} from './a11y';
88
import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
99
import {ButtonAccessibilityDemo} from './button/button-a11y';
1010
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
11+
import {CardAccessibilityDemo} from './card/card-a11y';
1112
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
1213
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
1314
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
@@ -44,6 +45,7 @@ export class AccessibilityRoutingModule {}
4445
AutocompleteAccessibilityDemo,
4546
ButtonAccessibilityDemo,
4647
ButtonToggleAccessibilityDemo,
48+
CardAccessibilityDemo,
4749
CheckboxAccessibilityDemo,
4850
ChipsAccessibilityDemo,
4951
DatepickerAccessibilityDemo,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export class AccessibilityDemo {
2020
{name: 'Autocomplete', route: 'autocomplete'},
2121
{name: 'Button', route: 'button'},
2222
{name: 'Button toggle', route: 'button-toggle'},
23+
{name: 'Card', route: 'card'},
2324
{name: 'Checkbox', route: 'checkbox'},
2425
{name: 'Chips', route: 'chips'},
2526
{name: 'Datepicker', route: 'datepicker'},

‎src/demo-app/a11y/card/assets/dachshund-avatar.jpg

38.1 KB
Loading

‎src/demo-app/a11y/card/assets/dachshund.jpg

325 KB
Loading

‎src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg

12.4 KB
Loading

‎src/demo-app/a11y/card/assets/shiba-inu.jpg

64.1 KB
Loading

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<section>
2+
<h2>Husky</h2>
3+
<p>Showing a card with title only</p>
4+
<md-card class="example-card">
5+
Siberian Husky
6+
</md-card>
7+
</section>
8+
9+
<section>
10+
<h2>Malamute</h2>
11+
<p>Showing a Card with title and subtitle. </p>
12+
<md-card class="example-card">
13+
<md-card-title>Alaskan Malamute</md-card-title>
14+
<md-card-subtitle>Dog breed</md-card-subtitle>
15+
</md-card>
16+
</section>
17+
18+
19+
<section>
20+
<h2>German Shepherd</h2>
21+
<p>
22+
Showing a card with title, subtitle, and a footer. The footer displays a progress bar when
23+
user search for more dogs.
24+
</p>
25+
<md-card class="example-card">
26+
<md-card-subtitle>Dog breed</md-card-subtitle>
27+
<md-card-title>German Shepherd</md-card-title>
28+
<md-card-content>
29+
The German Shepherd is a breed of medium to large-sized working dog that originated in
30+
Germany. The breed's officially recognized name is German Shepherd Dog in the English
31+
language. The breed is also known as the Alsatian in Britain and Ireland.
32+
</md-card-content>
33+
<md-card-actions>
34+
Search for more dogs...
35+
<button md-button (click)="showProgress = !showProgress">
36+
{{showProgress ? 'Cancel' : 'Search'}}
37+
</button>
38+
</md-card-actions>
39+
<md-card-footer>
40+
<md-progress-bar mode="indeterminate" aria-label="Loading" *ngIf="showProgress">
41+
</md-progress-bar>
42+
</md-card-footer>
43+
44+
</md-card>
45+
</section>
46+
47+
<section>
48+
<h2>Dachshund</h2>
49+
<p>Showing a card with title, subtitle, and avatar as header and a card image.</p>
50+
<md-card class="example-card">
51+
<md-card-header>
52+
<img md-card-avatar src="a11y/card/assets/dachshund-avatar.jpg" aria-label="Dachshund avatar">
53+
<md-card-title>Dachshund</md-card-title>
54+
<md-card-subtitle>Dog breed</md-card-subtitle>
55+
</md-card-header>
56+
<img md-card-image src="a11y/card/assets/dachshund.jpg"
57+
aria-label="Dachshund">
58+
<md-card-content>
59+
The dachshund is a short-legged, long-bodied, hound-type dog breed.
60+
</md-card-content>
61+
</md-card>
62+
</section>
63+
64+
<section>
65+
<h2>Shiba Inu</h2>
66+
<p>Showing a card with header, content, image, and two action buttons: "share" and "like".</p>
67+
<md-card class="example-card">
68+
<md-card-header>
69+
<img md-card-avatar src="a11y/card/assets/shiba-inu-avatar.jpg" aria-label="Shiba Inu avatar">
70+
<md-card-title>Shiba Inu</md-card-title>
71+
<md-card-subtitle>Dog Breed</md-card-subtitle>
72+
</md-card-header>
73+
<img md-card-image src="a11y/card/assets/shiba-inu.jpg" aria-label="Shiba Inu">
74+
<md-card-content>
75+
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
76+
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
77+
bred for hunting.
78+
</md-card-content>
79+
<md-card-actions align="end">
80+
<button md-button (click)="openSnackbar('Liked Shiba Inu')">like</button>
81+
<button md-button (click)="openSnackbar('Shared Shiba Inu')">share</button>
82+
</md-card-actions>
83+
</md-card>
84+
85+
</section>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.example-card button {
2+
text-transform: uppercase;
3+
}
4+
5+
.example-card {
6+
max-width: 450px;
7+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from '@angular/core';
2+
import {MdSnackBar} from '@angular/material';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'card-a11y',
7+
templateUrl: 'card-a11y.html',
8+
styleUrls: ['card-a11y.css'],
9+
})
10+
export class CardAccessibilityDemo {
11+
showProgress: boolean = false;
12+
13+
constructor(private snackBar: MdSnackBar) {}
14+
15+
openSnackbar(message: string) {
16+
this.snackBar.open(message, '', {duration: 2000});
17+
}
18+
}

‎src/demo-app/a11y/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
22
import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
33
import {ButtonAccessibilityDemo} from './button/button-a11y';
44
import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
5+
import {CardAccessibilityDemo} from './card/card-a11y';
56
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
67
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
78
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
@@ -19,6 +20,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
1920
{path: 'autocomplete', component: AutocompleteAccessibilityDemo},
2021
{path: 'button', component: ButtonAccessibilityDemo},
2122
{path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
23+
{path: 'card', component: CardAccessibilityDemo},
2224
{path: 'checkbox', component: CheckboxAccessibilityDemo},
2325
{path: 'chips', component: ChipsAccessibilityDemo},
2426
{path: 'datepicker', component: DatepickerAccessibilityDemo},

0 commit comments

Comments
 (0)