Skip to content

Commit 8dfbbed

Browse files
forsti0506forsti0506
authored
fix(material/table): accessibility improvements on table examples
 (#23821)
1 parent ed9463b commit 8dfbbed

File tree

14 files changed

+39
-28
lines changed

14 files changed

+39
-28
lines changed

‎src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
1010
<ng-container matColumnDef="expandedDetail">
11-
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
11+
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
1212
<div class="example-element-detail"
1313
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
1414
<div class="example-element-diagram">
@@ -25,8 +25,8 @@
2525
</td>
2626
</ng-container>
2727

28-
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
29-
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
28+
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
29+
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
3030
class="example-element-row"
3131
[class.example-expanded-row]="expandedElement === element"
3232
(click)="expandedElement = expandedElement === element ? null : element">

‎src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
1919
export class TableExpandableRowsExample {
2020
dataSource = ELEMENT_DATA;
2121
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
22+
columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand'];
2223
expandedElement: PeriodicElement | null;
2324
}
2425

‎src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="example-container mat-elevation-z8">
1+
<section class="example-container mat-elevation-z8" tabindex="0">
22
<table mat-table [dataSource]="dataSource">
33

44
<!-- Name Column -->
@@ -27,7 +27,7 @@
2727

2828
<!-- Star Column -->
2929
<ng-container matColumnDef="star" stickyEnd>
30-
<th mat-header-cell *matHeaderCellDef></th>
30+
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
3131
<td mat-cell *matCellDef="let element">
3232
<mat-icon>more_vert</mat-icon>
3333
</td>
@@ -36,4 +36,4 @@
3636
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
3737
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
3838
</table>
39-
</div>
39+
</section>

‎src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</mat-button-toggle-group>
3636
</div>
3737

38-
<div class="example-container mat-elevation-z8">
38+
<section class="example-container mat-elevation-z8" tabindex="0">
3939
<mat-table [dataSource]="dataSource" *ngFor="let table of tables">
4040
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
4141
<mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
@@ -75,4 +75,4 @@
7575
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
7676
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
7777
</mat-table>
78-
</div>
78+
</section>

‎src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</mat-button-toggle-group>
3636
</div>
3737

38-
<div class="example-container mat-elevation-z8">
38+
<section class="example-container mat-elevation-z8" tabindex="0">
3939
<table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
4040
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
4141
<th mat-header-cell *matHeaderCellDef> Position </th>
@@ -75,4 +75,4 @@
7575
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
7676
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
7777
</table>
78-
</div>
78+
</section>

‎src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="example-container mat-elevation-z8">
1+
<section class="example-container mat-elevation-z8" tabindex="0">
22
<table mat-table [dataSource]="transactions">
33
<!-- Item Column -->
44
<ng-container matColumnDef="item">
@@ -18,4 +18,4 @@
1818
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
1919
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
2020
</table>
21-
</div>
21+
</section>

‎src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="example-container mat-elevation-z8">
1+
<section class="example-container mat-elevation-z8" tabindex="0">
22
<table mat-table [dataSource]="dataSource">
33

44
<!-- Position Column -->
@@ -28,4 +28,4 @@
2828
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
2929
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
3030
</table>
31-
</div>
31+
</section>

‎src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,19 @@
55
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
66
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
77
</ng-container>
8+
<ng-container matColumnDef="expand">
9+
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
10+
<td mat-cell *matCellDef="let element">
11+
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
12+
<mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
13+
<mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
14+
</button>
15+
</td>
16+
</ng-container>
817

918
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
1019
<ng-container matColumnDef="expandedDetail">
11-
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
20+
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
1221
<div class="example-element-detail"
1322
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
1423
<div class="example-element-diagram">
@@ -25,8 +34,8 @@
2534
</td>
2635
</ng-container>
2736

28-
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
29-
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
37+
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
38+
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
3039
class="example-element-row"
3140
[class.example-expanded-row]="expandedElement === element"
3241
(click)="expandedElement = expandedElement === element ? null : element">

‎src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
1919
export class TableExpandableRowsExample {
2020
dataSource = ELEMENT_DATA;
2121
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
22+
columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand'];
2223
expandedElement: PeriodicElement | null;
2324
}
2425

‎src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="example-container mat-elevation-z8">
1+
<section class="example-container mat-elevation-z8" tabindex="0">
22
<table mat-table [dataSource]="dataSource">
33

44
<!-- Name Column -->
@@ -27,7 +27,7 @@
2727

2828
<!-- Star Column -->
2929
<ng-container matColumnDef="star" stickyEnd>
30-
<th mat-header-cell *matHeaderCellDef></th>
30+
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
3131
<td mat-cell *matCellDef="let element">
3232
<mat-icon>more_vert</mat-icon>
3333
</td>
@@ -36,4 +36,4 @@
3636
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
3737
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
3838
</table>
39-
</div>
39+
</section>

‎src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</mat-button-toggle-group>
3636
</div>
3737

38-
<div class="example-container mat-elevation-z8">
38+
<section class="example-container mat-elevation-z8" tabindex="0">
3939
<mat-table [dataSource]="dataSource" *ngFor="let table of tables">
4040
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
4141
<mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
@@ -75,4 +75,4 @@
7575
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
7676
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
7777
</mat-table>
78-
</div>
78+
</section>

‎src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</mat-button-toggle-group>
3636
</div>
3737

38-
<div class="example-container mat-elevation-z8">
38+
<section class="example-container mat-elevation-z8" tabindex="0">
3939
<table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
4040
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
4141
<th mat-header-cell *matHeaderCellDef> Position </th>
@@ -75,4 +75,4 @@
7575
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
7676
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
7777
</table>
78-
</div>
78+
</section>

‎src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="example-container mat-elevation-z8">
1+
<section class="example-container mat-elevation-z8" tabindex="0">
22
<table mat-table [dataSource]="transactions">
33
<!-- Item Column -->
44
<ng-container matColumnDef="item">
@@ -18,4 +18,4 @@
1818
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
1919
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
2020
</table>
21-
</div>
21+
</section>

‎src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="example-container mat-elevation-z8">
1+
<section class="example-container mat-elevation-z8" tabindex="0">
22
<table mat-table [dataSource]="dataSource">
33

44
<!-- Position Column -->
@@ -28,4 +28,4 @@
2828
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
2929
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
3030
</table>
31-
</div>
31+
</section>

0 commit comments

Comments
 (0)