[DataGrid] Fix Voice Over reading the column name twice (mui#14482)

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
arthurbalduini · Sep 30, 2024 · 9d9f9c2 · 9d9f9c2
1 parent 85ae4dc
commit 9d9f9c2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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',
+      ]);
     });
   });