Skip to content

Commit 215ff3c

Browse files
tinayuangaokara
tinayuangao
authored and
kara
committed
demo(card): add accessibility demo page for card (#6358)
1 parent 7b54e1d commit 215ff3c

10 files changed

+123
-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 {
@@ -56,6 +57,7 @@ export class AccessibilityRoutingModule {}
5657
AutocompleteAccessibilityDemo,
5758
ButtonAccessibilityDemo,
5859
ButtonToggleAccessibilityDemo,
60+
CardAccessibilityDemo,
5961
CheckboxAccessibilityDemo,
6062
ChipsAccessibilityDemo,
6163
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: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<section>
2+
<h2>Dogs group</h2>
3+
<p>Showing a card with a group of content</p>
4+
<md-card class="example-card" role="group">
5+
<md-card-content>
6+
<p>Herding Group</p>
7+
<p>Hound Group</p>
8+
<p>Non-Sporting Group</p>
9+
<p>Sporting Group</p>
10+
<p>Terrier Group</p>
11+
<p>Toy Group</p>
12+
<p>Working Group</p>
13+
<p>Foundation Stock Service</p>
14+
<p>Miscellaneous Class</p>
15+
</md-card-content>
16+
</md-card>
17+
</section>
18+
19+
<section>
20+
<h2>Husky</h2>
21+
<p>Showing a card with title only</p>
22+
<md-card class="example-card">
23+
Siberian Husky
24+
</md-card>
25+
</section>
26+
27+
<section>
28+
<h2>Malamute</h2>
29+
<p>Showing a Card with title and subtitle. </p>
30+
<md-card class="example-card">
31+
<md-card-title>Alaskan Malamute</md-card-title>
32+
<md-card-subtitle>Dog breed</md-card-subtitle>
33+
</md-card>
34+
</section>
35+
36+
37+
<section>
38+
<h2>German Shepherd</h2>
39+
<p>
40+
Showing a card with title, subtitle, and a footer.
41+
</p>
42+
<md-card class="example-card">
43+
<md-card-subtitle>Dog breed</md-card-subtitle>
44+
<md-card-title>German Shepherd</md-card-title>
45+
<md-card-content>
46+
The German Shepherd is a breed of medium to large-sized working dog that originated in
47+
Germany. The breed's officially recognized name is German Shepherd Dog in the English
48+
language. The breed is also known as the Alsatian in Britain and Ireland.
49+
</md-card-content>
50+
<md-card-footer>
51+
People also search for Rottweiler, Siberian Husky, Labrador Retriever, Doberman Pinscher
52+
</md-card-footer>
53+
</md-card>
54+
</section>
55+
56+
<section>
57+
<h2>Dachshund</h2>
58+
<p>Showing a card with title, subtitle, and avatar as header and a card image.</p>
59+
<md-card class="example-card">
60+
<md-card-header>
61+
<img md-card-avatar src="a11y/card/assets/dachshund-avatar.jpg" aria-label="Dachshund avatar">
62+
<md-card-title>Dachshund</md-card-title>
63+
<md-card-subtitle>Dog breed</md-card-subtitle>
64+
</md-card-header>
65+
<img md-card-image src="a11y/card/assets/dachshund.jpg"
66+
aria-label="Dachshund">
67+
<md-card-content>
68+
The dachshund is a short-legged, long-bodied, hound-type dog breed.
69+
</md-card-content>
70+
</md-card>
71+
</section>
72+
73+
<section>
74+
<h2>Shiba Inu</h2>
75+
<p>Showing a card with header, content, image, and two action buttons: "share" and "like".</p>
76+
<md-card class="example-card">
77+
<md-card-header>
78+
<img md-card-avatar src="a11y/card/assets/shiba-inu-avatar.jpg" aria-label="Shiba Inu avatar">
79+
<md-card-title>Shiba Inu</md-card-title>
80+
<md-card-subtitle>Dog Breed</md-card-subtitle>
81+
</md-card-header>
82+
<img md-card-image src="a11y/card/assets/shiba-inu.jpg" aria-label="Shiba Inu">
83+
<md-card-content>
84+
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
85+
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
86+
bred for hunting.
87+
</md-card-content>
88+
<md-card-actions align="end">
89+
<button md-button (click)="openSnackbar('Liked Shiba Inu')">like</button>
90+
<button md-button (click)="openSnackbar('Shared Shiba Inu')">share</button>
91+
</md-card-actions>
92+
</md-card>
93+
</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 {DialogAccessibilityDemo} from './dialog/dialog-a11y';
@@ -23,6 +24,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
2324
{path: 'autocomplete', component: AutocompleteAccessibilityDemo},
2425
{path: 'button', component: ButtonAccessibilityDemo},
2526
{path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
27+
{path: 'card', component: CardAccessibilityDemo},
2628
{path: 'checkbox', component: CheckboxAccessibilityDemo},
2729
{path: 'chips', component: ChipsAccessibilityDemo},
2830
{path: 'datepicker', component: DatepickerAccessibilityDemo},

0 commit comments

Comments
 (0)