mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs(table): add aria-label to checkboxes in selection example (#15158)
Fixes #15021
This commit is contained in:
committed by
Jeremy Elbourn
parent
6ea0e96d2e
commit
9acd7a7c7f
@@ -5,13 +5,15 @@
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox (change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()">
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
[aria-label]="checkboxLabel()">
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-checkbox (click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)">
|
||||
[checked]="selection.isSelected(row)"
|
||||
[aria-label]="checkboxLabel(row)">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
@@ -48,4 +48,12 @@ export class TableSelectionExample {
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
}
|
||||
|
||||
/** The label for the checkbox on the passed row */
|
||||
checkboxLabel(row?: PeriodicElement): string {
|
||||
if (!row) {
|
||||
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
|
||||
}
|
||||
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user