Skip to content

Commit 2df9f8d

Browse files
tinayuangaotinayuangao
committed
demo(list): Add accessibility demo page for list
1 parent 5ccf25d commit 2df9f8d

File tree

6 files changed

+152
-0
lines changed

6 files changed

+152
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y'
1111
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
1212
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
1313
import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
14+
import {ListAccessibilityDemo} from './list/list-a11y';
1415
import {RadioAccessibilityDemo} from './radio/radio-a11y';
1516
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
1617
import {IconAccessibilityDemo} from './icon/icon-a11y';
@@ -49,6 +50,7 @@ export class AccessibilityRoutingModule {}
4950
GridListAccessibilityDemo,
5051
IconAccessibilityDemo,
5152
InputAccessibilityDemo,
53+
ListAccessibilityDemo,
5254
ProgressSpinnerAccessibilityDemo,
5355
RadioAccessibilityDemo,
5456
SliderAccessibilityDemo,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export class AccessibilityDemo {
2626
{name: 'Grid list', route: 'grid-list'},
2727
{name: 'Icon', route: 'icon'},
2828
{name: 'Input', route: 'input'},
29+
{name: 'List', route: 'list'},
2930
{name: 'Progress spinner', route: 'progress-spinner'},
3031
{name: 'Radio buttons', route: 'radio'},
3132
{name: 'Slider', route: 'slider'},

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<div class="demo-list">
2+
<section>
3+
<h2> Seasoning </h2>
4+
<p>Showing a non-interactive list of seasonings.</p>
5+
<md-list>
6+
<md-list-item *ngFor="let item of items"> {{item}} </md-list-item>
7+
</md-list>
8+
</section>
9+
10+
11+
<section>
12+
<h2>Mailbox navigation</h2>
13+
<p>Showing a navigation list with links to google search, and "more information" icon button</p>
14+
<md-nav-list>
15+
<md-list-item *ngFor="let link of links">
16+
<a md-line href="https://www.google.com/search?q={{link.name}}">{{ link.name }}</a>
17+
<button md-icon-button aria-label="Show info" (click)="showInfo(link.name)">
18+
<md-icon>info</md-icon>
19+
</button>
20+
</md-list-item>
21+
</md-nav-list>
22+
<div *ngIf="infoClicked">
23+
More information about {{infoClicked}}!
24+
</div>
25+
</section>
26+
27+
<section>
28+
<h2>Messages </h2>
29+
<p>
30+
Showing a list of messages, where each message item has sender's name, sender's avatar,
31+
message subject, and content of the message.
32+
</p>
33+
<md-list>
34+
<md-list-item *ngFor="let message of messages">
35+
<img md-list-avatar [src]="message.image" [alt]="message.from">
36+
<h3 md-line> {{message.from}} </h3>
37+
<p md-line> {{message.subject}} </p>
38+
<p md-line class="demo-secondary-text"> {{message.message}} </p>
39+
</md-list-item>
40+
</md-list>
41+
42+
</section>
43+
44+
<section>
45+
<h2> Seasoning</h2>
46+
<p>Showing a non-interactive list of seasonings with dense style.</p>
47+
<md-list dense>
48+
<md-list-item *ngFor="let item of items"> {{item}} </md-list-item>
49+
</md-list>
50+
</section>
51+
52+
<section>
53+
<h2>Folders and notes for mailbox </h2>
54+
<p>Showing a list with two sections, "folders" and "notes".</p>
55+
<md-list>
56+
<h3 md-subheader>Folders</h3>
57+
<md-list-item *ngFor="let folder of folders">
58+
<md-icon md-list-icon>folder</md-icon>
59+
<h4 md-line>{{folder.name}}</h4>
60+
<p md-line class="demo-secondary-text"> {{folder.updated}} </p>
61+
</md-list-item>
62+
<md-divider></md-divider>
63+
<h3 md-subheader>Notes</h3>
64+
<md-list-item *ngFor="let note of notes">
65+
<md-icon md-list-icgon>note</md-icon>
66+
<h4 md-line>{{note.name}}</h4>
67+
<p md-line class="demo-secondary-text"> {{note.updated}} </p>
68+
</md-list-item>
69+
</md-list>
70+
</section>
71+
</div>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.demo-list {
2+
.mat-list, .mat-nav-list {
3+
border: 1px solid rgba(0, 0, 0, 0.12);
4+
max-width: 350px;
5+
margin: 20px 20px 0 0;
6+
}
7+
8+
.demo-secondary-text {
9+
color: rgba(0, 0, 0, 0.54);
10+
}
11+
}

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
moduleId: module.id,
5+
selector: 'list-a11y',
6+
templateUrl: 'list-a11y.html',
7+
styleUrls: ['list-a11y.css']
8+
})
9+
export class ListAccessibilityDemo {
10+
items: string[] = [
11+
'Pepper',
12+
'Salt',
13+
'Paprika'
14+
];
15+
16+
infoClicked: string | undefined;
17+
18+
messages: any[] = [
19+
{
20+
from: 'Nancy',
21+
subject: 'Brunch?',
22+
message: 'Did you want to go on Sunday? I was thinking that might work.',
23+
image: 'https://angular.io/generated/images/bios/julie-ralph.jpg'
24+
},
25+
{
26+
from: 'Mary',
27+
subject: 'Summer BBQ',
28+
message: 'Wish I could come, but I have some prior obligations.',
29+
image: 'https://angular.io/generated/images/bios/juleskremer.jpg'
30+
},
31+
{
32+
from: 'Bobby',
33+
subject: 'Oui oui',
34+
message: 'Do you have Paris reservations for the 15th? I just booked!',
35+
image: 'https://angular.io/generated/images/bios/jelbourn.jpg'
36+
}
37+
];
38+
39+
links: any[] = [
40+
{name: 'Inbox'},
41+
{name: 'Outbox'},
42+
{name: 'Spam'},
43+
{name: 'Trash'}
44+
45+
];
46+
47+
folders: any[] = [
48+
{name: 'Imported', updated: 'Miles'},
49+
{name: 'Important', updated: 'Tina'},
50+
{name: 'Unread', updated: 'Jeremy'},
51+
];
52+
53+
notes: any[] = [
54+
{name: 'Update screenshots', updated: 'Kara'},
55+
{name: 'Install new application', updated: 'Andrew'},
56+
];
57+
58+
showInfo(name: string) {
59+
if (this.infoClicked === name) {
60+
this.infoClicked = undefined;
61+
} else {
62+
this.infoClicked = name;
63+
}
64+
}
65+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {AccessibilityHome} from './a11y';
1010
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
1111
import {IconAccessibilityDemo} from './icon/icon-a11y';
1212
import {InputAccessibilityDemo} from './input/input-a11y';
13+
import {ListAccessibilityDemo} from './list/list-a11y';
1314
import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
1415
import {SliderAccessibilityDemo} from './slider/slider-a11y';
1516

@@ -24,6 +25,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
2425
{path: 'grid-list', component: GridListAccessibilityDemo},
2526
{path: 'icon', component: IconAccessibilityDemo},
2627
{path: 'input', component: InputAccessibilityDemo},
28+
{path: 'list', component: ListAccessibilityDemo},
2729
{path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
2830
{path: 'radio', component: RadioAccessibilityDemo},
2931
{path: 'slider', component: SliderAccessibilityDemo},

0 commit comments

Comments
 (0)