Skip to content

Commit 80fdf19

Browse files
authored
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.
1 parent d4adbaa commit 80fdf19

File tree

2 files changed

+6
-6
lines changed

2 files changed

+6
-6
lines changed

src/cdk/table/table.spec.ts

Lines changed: 1 addition & 2 deletions
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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -459,11 +459,12 @@ export class CdkTable<T>
459459

460460
/** Aria role to apply to the table's cells based on the table's own role. */
461461
_getCellRole(): string | null {
462+
// Perform this lazily in case the table's role was updated by a directive after construction.
462463
if (this._cellRoleInternal === undefined) {
463-
// Perform this lazily in case the table's role was updated by a directive after construction.
464-
const role = this._elementRef.nativeElement.getAttribute('role');
465-
const cellRole = role === 'grid' || role === 'treegrid' ? 'gridcell' : 'cell';
466-
this._cellRoleInternal = this._isNativeHtmlTable && cellRole === 'cell' ? null : cellRole;
464+
// Note that we set `role="cell"` even on native `td` elements,
465+
// because some browsers seem to require it. See #29784.
466+
const tableRole = this._elementRef.nativeElement.getAttribute('role');
467+
return tableRole === 'grid' || tableRole === 'treegrid' ? 'gridcell' : 'cell';
467468
}
468469

469470
return this._cellRoleInternal;

0 commit comments

Comments
 (0)