From 8eaaa962a8dffbc6cac9e9b3109639c7459e501f Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 4 Sep 2024 09:57:59 +0200 Subject: [PATCH 1/5] remove aria-label for the default column header since the screen reader is able to read it from the content --- .../src/components/columnHeaders/GridGenericColumnHeaderItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx index 6e397e2aa408..412bb46be9a1 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} >
Date: Thu, 5 Sep 2024 09:41:20 +0200 Subject: [PATCH 2/5] Put back aria label for the details panel toggle header item --- .../hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ce3a18b882aa..0fc2a55a7878 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) => , - renderHeader: () => null, + renderHeader: (params) =>
, }; From 1ad6a1c0591d8dcc52ca42eb0d43bf16c5902efb Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 5 Sep 2024 10:28:08 +0200 Subject: [PATCH 3/5] Remove aria-label from the string header title --- .../src/components/columnHeaders/GridColumnHeaderTitle.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx index 11f99b8ac0c3..e1761b3f8304 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 >(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); From 16ad8e7b728354eb210842915d0f04810afe6809 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 5 Sep 2024 10:45:33 +0200 Subject: [PATCH 4/5] Adjust test --- .../src/tests/columnGrouping.DataGrid.test.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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 7d0a1002e2c4..05f69a2dbd07 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(' - Column grouping', () => { fireEvent.click(screen.getByRole('button', { name: /Update columns/ })); const row1Headers = document.querySelectorAll( - '[aria-rowindex="1"] [role="columnheader"]', + '[aria-rowindex="1"] [role="columnheader"] .MuiDataGrid-columnHeaderTitle', ); const row2Headers = document.querySelectorAll( - '[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', + ]); }); }); From ae67fd4c451c87c0056b74838ea9d2b025ab3fa2 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Date: Wed, 11 Sep 2024 23:26:31 +0200 Subject: [PATCH 5/5] destruct params Co-authored-by: Bilal Shafi Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> --- .../hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0fc2a55a7878..76e80c840299 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) => , - renderHeader: (params) =>
, + renderHeader: ({ colDef }) =>
, };