From 3072871f0d6d438bd17a9d3e661d1d8423c635d6 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Thu, 12 Sep 2024 00:07:27 +0200
Subject: [PATCH] [DataGrid] Fix Voice Over reading the column name twice
 (#14482)

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
---
 .../detailPanel/gridDetailPanelToggleColDef.tsx    |  2 +-
 .../columnHeaders/GridColumnHeaderTitle.tsx        |  4 +++-
 .../columnHeaders/GridGenericColumnHeaderItem.tsx  |  1 -
 .../src/tests/columnGrouping.DataGrid.test.tsx     | 14 ++++++--------
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx b/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx
index ce3a18b882aa1..76e80c840299e 100644
--- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx
@@ -29,5 +29,5 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef = {
     return expandedRowIds.includes(rowId);
   },
   renderCell: (params) => <GridDetailPanelToggleCell {...params} />,
-  renderHeader: () => null,
+  renderHeader: ({ colDef }) => <div aria-label={colDef.headerName} />,
 };
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
index 11f99b8ac0c34..e1761b3f8304b 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
@@ -36,7 +36,9 @@ const ColumnHeaderInnerTitle = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(function ColumnHeaderInnerTitle(props, ref) {
-  const { className, ...other } = props;
+  // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
+  // See https://github.com/mui/mui-x/pull/14482
+  const { className, 'aria-label': ariaLabel, ...other } = props;
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
 
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx
index 6e397e2aa4086..412bb46be9a17 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx
@@ -109,7 +109,6 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
       tabIndex={tabIndex}
       aria-colindex={colIndex + 1}
       aria-sort={ariaSort}
-      aria-label={headerComponent == null ? label : undefined}
       {...other}
     >
       <div
diff --git a/packages/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx
index 7d0a1002e2c43..05f69a2dbd078 100644
--- a/packages/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/columnGrouping.DataGrid.test.tsx
@@ -363,18 +363,16 @@ describe('<DataGrid /> - Column grouping', () => {
       fireEvent.click(screen.getByRole('button', { name: /Update columns/ }));
 
       const row1Headers = document.querySelectorAll<HTMLElement>(
-        '[aria-rowindex="1"] [role="columnheader"]',
+        '[aria-rowindex="1"] [role="columnheader"] .MuiDataGrid-columnHeaderTitle',
       );
       const row2Headers = document.querySelectorAll<HTMLElement>(
-        '[aria-rowindex="2"] [role="columnheader"]',
+        '[aria-rowindex="2"] [role="columnheader"] .MuiDataGrid-columnHeaderTitle',
       );
 
-      expect(
-        Array.from(row1Headers).map((header) => header.getAttribute('aria-label')),
-      ).to.deep.equal(['Group']);
-      expect(
-        Array.from(row2Headers).map((header) => header.getAttribute('aria-label')),
-      ).to.deep.equal(['field_1']);
+      expect(Array.from(row1Headers).map((header) => header.textContent)).to.deep.equal(['Group']);
+      expect(Array.from(row2Headers).map((header) => header.textContent)).to.deep.equal([
+        'field_1',
+      ]);
     });
   });