From 890036064a825ddc44068d4b6fc71edfd7ddb43c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:55:17 +0100
Subject: [PATCH] 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 80fdf19c5a46ee82f869ab429ef2b42d2fd34d6f)
---
 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 66cbe031481a..a062d6dbc21d 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 940ba164e738..3da535033a2a 100644
--- a/src/cdk/table/table.ts
+++ b/src/cdk/table/table.ts
@@ -445,11 +445,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;