Skip to content

Commit 9acd7a7

Browse files
ViktorSlavovjelbourn
authored andcommitted
docs(table): add aria-label to checkboxes in selection example (#15158)
Fixes #15021
1 parent 6ea0e96 commit 9acd7a7

File tree

2 files changed

+12
-2
lines changed

2 files changed

+12
-2
lines changed

src/material-examples/table-selection/table-selection-example.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
<th mat-header-cell *matHeaderCellDef>
66
<mat-checkbox (change)="$event ? masterToggle() : null"
77
[checked]="selection.hasValue() && isAllSelected()"
8-
[indeterminate]="selection.hasValue() && !isAllSelected()">
8+
[indeterminate]="selection.hasValue() && !isAllSelected()"
9+
[aria-label]="checkboxLabel()">
910
</mat-checkbox>
1011
</th>
1112
<td mat-cell *matCellDef="let row">
1213
<mat-checkbox (click)="$event.stopPropagation()"
1314
(change)="$event ? selection.toggle(row) : null"
14-
[checked]="selection.isSelected(row)">
15+
[checked]="selection.isSelected(row)"
16+
[aria-label]="checkboxLabel(row)">
1517
</mat-checkbox>
1618
</td>
1719
</ng-container>

src/material-examples/table-selection/table-selection-example.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,12 @@ export class TableSelectionExample {
4848
this.selection.clear() :
4949
this.dataSource.data.forEach(row => this.selection.select(row));
5050
}
51+
52+
/** The label for the checkbox on the passed row */
53+
checkboxLabel(row?: PeriodicElement): string {
54+
if (!row) {
55+
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
56+
}
57+
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
58+
}
5159
}

0 commit comments

Comments
 (0)