[DataGrid] Fix accessibility issues in panels and toolbar buttons

[romgrk]

Fixes #5796

Based on #5806

Changes:

• set aria-controls to buttons only when the menu / panel is open
• connect buttons & panels/menu via aria attributes
• clear/reset aria attributes when menu / panel is not open

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8862--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	670.3	1,136.8	1,136.8	931.98	186.41
Sort 100k rows	ms	703.9	1,421.1	1,292.1	1,127.46	245.531
Select 100k rows	ms	221.5	384.9	287.6	302.16	65.581
Deselect 100k rows	ms	137.9	329.1	198.5	209.52	71.109

Generated by 🚫 dangerJS against 6f58022

[MBilalShafi]

Nice improvements accessibility-wise. Thank you 👍

A couple small suggestions:

diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx
index 5eb94358b..ec2d48da4 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridActionsCell.tsx
@@ -200,8 +200,8 @@ function GridActionsCell(props: GridActionsCellProps) {
           id={buttonId}
           aria-label={apiRef.current.getLocaleText('actionsCellMore')}
           aria-controls={menuId}
-          aria-expanded={open ? 'true' : undefined}
-          aria-haspopup="true"
+          aria-expanded={open}
+          aria-haspopup
           role="menuitem"
           size="small"
           onClick={showMenu}
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
index 1eb387b8e..2d119e398 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx
@@ -59,9 +59,9 @@ export const ColumnHeaderMenuIcon = React.memo((props: ColumnHeaderMenuIconProps
           aria-label={apiRef.current.getLocaleText('columnMenuLabel')}
           size="small"
           onClick={handleMenuIconClick}
-          aria-expanded={open ? 'true' : undefined}
-          aria-haspopup="true"
-          aria-controls={columnMenuId}
+          aria-expanded={open}
+          aria-haspopup
+          aria-controls={open ? columnMenuId : undefined}
           id={columnMenuButtonId}
           {...rootProps.slotProps?.baseIconButton}
         >

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[romgrk]

I've addressed the comments.

@MBilalShafi I've added an explicit aria-haspopup="menu" everywhere, it keeps it consistent with other locations in the codebase that also use aria-haspopup="menu". Both "menu" and "true" are equivalent: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
I didn't like aria-haspopup because the type of the aria attribute is a string, not a boolean.