Skip to content

Commit 8900360

Browse files
committedNov 11, 2024·
fix(cdk/table): set explicit role on all cells (#29987)
We were omitting `role="cell"` on native `td` elements, because the browser should be setting it implicitly, but based on the discussion in #29784, it seems like Safari doesn't do it. These changes switch to always setting the `role`. Fixes #29784. (cherry picked from commit 80fdf19)
1 parent 1ea3ba3 commit 8900360

File tree

2 files changed

+6
-6
lines changed

2 files changed

+6
-6
lines changed
 

‎src/cdk/table/table.spec.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -563,8 +563,7 @@ describe('CdkTable', () => {
563563
getRows(tableElement).forEach(row => {
564564
expect(row.getAttribute('role')).toBe('row');
565565
getCells(row).forEach(cell => {
566-
// Native role of TD elements is row.
567-
expect(cell.getAttribute('role')).toBe(null);
566+
expect(cell.getAttribute('role')).toBe('cell');
568567
});
569568
});
570569
});

‎src/cdk/table/table.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -445,11 +445,12 @@ export class CdkTable<T>
445445

446446
/** Aria role to apply to the table's cells based on the table's own role. */
447447
_getCellRole(): string | null {
448+
// Perform this lazily in case the table's role was updated by a directive after construction.
448449
if (this._cellRoleInternal === undefined) {
449-
// Perform this lazily in case the table's role was updated by a directive after construction.
450-
const role = this._elementRef.nativeElement.getAttribute('role');
451-
const cellRole = role === 'grid' || role === 'treegrid' ? 'gridcell' : 'cell';
452-
this._cellRoleInternal = this._isNativeHtmlTable && cellRole === 'cell' ? null : cellRole;
450+
// Note that we set `role="cell"` even on native `td` elements,
451+
// because some browsers seem to require it. See #29784.
452+
const tableRole = this._elementRef.nativeElement.getAttribute('role');
453+
return tableRole === 'grid' || tableRole === 'treegrid' ? 'gridcell' : 'cell';
453454
}
454455

455456
return this._cellRoleInternal;

0 commit comments

Comments
 (0)