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)

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');
       });
     });
   });

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;