diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index 711f19849def..09cf5910300b 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -563,8 +563,7 @@ describe('CdkTable', () => { getRows(tableElement).forEach(row => { expect(row.getAttribute('role')).toBe('row'); getCells(row).forEach(cell => { - // Native role of TD elements is row. - expect(cell.getAttribute('role')).toBe(null); + expect(cell.getAttribute('role')).toBe('cell'); }); }); }); diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index f287b9adb8b9..7d0b5141a200 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -459,11 +459,12 @@ export class CdkTable /** Aria role to apply to the table's cells based on the table's own role. */ _getCellRole(): string | null { + // Perform this lazily in case the table's role was updated by a directive after construction. if (this._cellRoleInternal === undefined) { - // Perform this lazily in case the table's role was updated by a directive after construction. - const role = this._elementRef.nativeElement.getAttribute('role'); - const cellRole = role === 'grid' || role === 'treegrid' ? 'gridcell' : 'cell'; - this._cellRoleInternal = this._isNativeHtmlTable && cellRole === 'cell' ? null : cellRole; + // Note that we set `role="cell"` even on native `td` elements, + // because some browsers seem to require it. See #29784. + const tableRole = this._elementRef.nativeElement.getAttribute('role'); + return tableRole === 'grid' || tableRole === 'treegrid' ? 'gridcell' : 'cell'; } return this._cellRoleInternal;