Skip to content

Commit c5cbe18

Browse files
amcdnlmmalerba
amcdnl
authored and
mmalerba
committed
a11y(table): add basic, sort, pager demos for a11y #6498 (#6653)
* a11y(table): add basic, sort, pager demos for a11y #6498 * chore(nit): few tweaks * a11y(table): add readonly flag * chore(nit): export interface * chore(tests): fix old prefixes * chore(build): update comp names from md to mat
1 parent 10c1c06 commit c5cbe18

File tree

6 files changed

+197
-1
lines changed

6 files changed

+197
-1
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y';
3333
import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
3434
import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
3535
import {SelectAccessibilityDemo} from './select/select-a11y';
36+
import {TableAccessibilityDemo} from './table/table-a11y';
3637
import {
3738
TabsAccessibilityDemo,
3839
SunnyTabContent,
@@ -45,7 +46,6 @@ import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
4546
import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
4647
import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
4748

48-
4949
@NgModule({
5050
imports: [
5151
RouterModule.forChild(ACCESSIBILITY_DEMO_ROUTES)
@@ -98,6 +98,7 @@ export class AccessibilityRoutingModule {}
9898
SliderAccessibilityDemo,
9999
SlideToggleAccessibilityDemo,
100100
SnackBarAccessibilityDemo,
101+
TableAccessibilityDemo,
101102
SunnyTabContent,
102103
TabsAccessibilityDemo,
103104
ToolbarAccessibilityDemo,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export class AccessibilityDemo implements OnDestroy {
5050
{name: 'Slide toggle', route: 'slide-toggle'},
5151
{name: 'Slider', route: 'slider'},
5252
{name: 'Snack bar', route: 'snack-bar'},
53+
{name: 'Table', route: 'table'},
5354
{name: 'Tabs', route: 'tabs'},
5455
{name: 'Toolbar', route: 'toolbar'},
5556
{name: 'Tooltip', route: 'tooltip'},

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y';
2121
import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
2222
import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
2323
import {SelectAccessibilityDemo} from './select/select-a11y';
24+
import {TableAccessibilityDemo} from './table/table-a11y';
2425
import {TabsAccessibilityDemo} from './tabs/tabs-a11y';
2526
import {TABS_DEMO_ROUTES} from './tabs/routes';
2627
import {TooltipAccessibilityDemo} from './tooltip/tooltip-a11y';
@@ -57,5 +58,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
5758
{path: 'snack-bar', component: SnackBarAccessibilityDemo},
5859
{path: 'tabs', component: TabsAccessibilityDemo, children: TABS_DEMO_ROUTES},
5960
{path: 'toolbar', component: ToolbarAccessibilityDemo},
61+
{path: 'table', component: TableAccessibilityDemo},
6062
{path: 'tooltip', component: TooltipAccessibilityDemo},
6163
];

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<div>
2+
<section>
3+
<h2>Basic Table</h2>
4+
<p>Shows name, color and age data.</p>
5+
<mat-table aria-readonly="true"
6+
[dataSource]="basicDataSource"
7+
aria-label="Users favorite colors and age">
8+
<ng-container cdkColumnDef="name">
9+
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
10+
<mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
11+
</ng-container>
12+
<ng-container cdkColumnDef="color">
13+
<mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
14+
<mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
15+
</ng-container>
16+
<ng-container cdkColumnDef="age">
17+
<mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
18+
<mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
19+
</ng-container>
20+
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
21+
<mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
22+
</mat-table>
23+
</section>
24+
25+
<section>
26+
<h2>Sortable Table</h2>
27+
<p>Shows name, color and age data. Sorted ascending by age.</p>
28+
<mat-table [dataSource]="sortDataSource"
29+
aria-label="Users favorite colors and age"
30+
aria-readonly="true"
31+
mdSort mdSortActive="age"
32+
mdSortDirection="asc">
33+
<ng-container cdkColumnDef="name">
34+
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
35+
<mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
36+
</ng-container>
37+
<ng-container cdkColumnDef="color">
38+
<mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
39+
<mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
40+
</ng-container>
41+
<ng-container cdkColumnDef="age">
42+
<mat-header-cell *cdkHeaderCellDef mat-sort-header>Age</mat-header-cell>
43+
<mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
44+
</ng-container>
45+
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
46+
<mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
47+
</mat-table>
48+
</section>
49+
50+
<section>
51+
<h2>Paginated Table</h2>
52+
<p>Shows name, color and age data. Shows only first 5 until paginated.</p>
53+
<mat-table [dataSource]="paginatedDataSource"
54+
aria-readonly="true"
55+
aria-label="Users favorite colors and age">
56+
<ng-container cdkColumnDef="name">
57+
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
58+
<mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
59+
</ng-container>
60+
<ng-container cdkColumnDef="color">
61+
<mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
62+
<mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
63+
</ng-container>
64+
<ng-container cdkColumnDef="age">
65+
<mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
66+
<mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
67+
</ng-container>
68+
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
69+
<mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
70+
</mat-table>
71+
<mat-paginator #paginator
72+
[length]="6"
73+
[pageIndex]="0"
74+
[pageSize]="3"
75+
[pageSizeOptions]="[1, 3, 5]">
76+
</mat-paginator>
77+
</section>
78+
</div>

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

Whitespace-only changes.

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {Component, ViewChild} from '@angular/core';
2+
import {DataSource} from '@angular/cdk/table';
3+
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
4+
import {Observable} from 'rxjs/Observable';
5+
import {MatSort, MatPaginator} from '@angular/material';
6+
7+
export interface UserData {
8+
name: string;
9+
color: string;
10+
age: number;
11+
}
12+
13+
const exampleData = [
14+
{name: 'Austin', color: 'blue', age: 30},
15+
{name: 'Jeremy', color: 'green', age: 33},
16+
{name: 'Kara', color: 'purple', age: 29},
17+
{name: 'Tina', color: 'yellow', age: 35},
18+
{name: 'Brad', color: 'pink', age: 40},
19+
{name: 'Jules', color: 'red', age: 21},
20+
];
21+
22+
@Component({
23+
moduleId: module.id,
24+
selector: 'table-a11y',
25+
templateUrl: 'table-a11y.html',
26+
styleUrls: ['table-a11y.css'],
27+
})
28+
export class TableAccessibilityDemo {
29+
@ViewChild(MatSort) sort: MatSort;
30+
@ViewChild(MatPaginator) pager: MatPaginator;
31+
32+
displayedColumns = ['name', 'color', 'age'];
33+
basicDataSource: BasicDataSource;
34+
sortDataSource: SortDataSource;
35+
paginatedDataSource: PaginatedDataSource;
36+
37+
ngOnInit(): void {
38+
this.basicDataSource = new BasicDataSource();
39+
this.sortDataSource = new SortDataSource(this.sort);
40+
this.paginatedDataSource = new PaginatedDataSource(this.pager);
41+
}
42+
}
43+
44+
export class BasicDataSource extends DataSource<UserData> {
45+
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
46+
47+
constructor() {
48+
super();
49+
this.dataChange.next(exampleData);
50+
}
51+
52+
connect(): Observable<UserData[]> {
53+
return this.dataChange;
54+
}
55+
56+
disconnect() {}
57+
}
58+
59+
export class SortDataSource extends DataSource<UserData> {
60+
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
61+
62+
constructor(private _sort: MatSort) {
63+
super();
64+
this.dataChange.next(exampleData);
65+
}
66+
67+
connect(): Observable<UserData[]> {
68+
const displayDataChanges = [
69+
this.dataChange,
70+
this._sort.sortChange,
71+
];
72+
73+
return Observable.merge(...displayDataChanges).map(() => {
74+
return this.getSortedData();
75+
});
76+
}
77+
78+
disconnect() {}
79+
80+
getSortedData(): UserData[] {
81+
const data = [...exampleData];
82+
if (!this._sort.active || this._sort.direction == '') {
83+
return data;
84+
}
85+
86+
return data.sort((a: UserData, b: UserData) => {
87+
return (a.age < b.age ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
88+
});
89+
}
90+
}
91+
92+
export class PaginatedDataSource extends DataSource<UserData> {
93+
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
94+
95+
constructor(private _paginator: MatPaginator) {
96+
super();
97+
this.dataChange.next(exampleData);
98+
}
99+
100+
connect(): Observable<UserData[]> {
101+
const displayDataChanges = [
102+
this.dataChange,
103+
this._paginator.page,
104+
];
105+
106+
return Observable.merge(...displayDataChanges).map(() => {
107+
const data = [...exampleData];
108+
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
109+
return data.splice(startIndex, this._paginator.pageSize);
110+
});
111+
}
112+
113+
disconnect() {}
114+
}

0 commit comments

Comments
 (0)