From de8925519c5bada6210f6d101b1a63a8e579d47b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 8 Nov 2024 13:06:06 +0100
Subject: [PATCH] fix(cdk/table): set explicit role on all cells

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.
---
 src/cdk/table/table.spec.ts | 3 +--
 src/cdk/table/table.ts      | 9 +++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

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<T>
 
   /** 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;