Column header menu button aria-labels should be descriptive and unique

[dil-pvajda]

Steps to reproduce

Steps:

1. Open any MUI DataGrid example, eg.: https://mui.com/x/react-data-grid/column-definition/
2. Inspect the menu button inside column headers with DevTools

Current behavior

• All the menu buttons have identical labels, "Menu", which makes them hard to tell apart from each other.
• Because of aria-haspopup, the menu button will be announced to a screen reader user as "Menu menu button", which is inappropriate.
• Screen reader users will be unable to determine the purpose of these buttons

Expected behavior

Ideally we'd be able to customize the label that is used for each column, possibly adding the name of the column and more descriptive text about the purpose of the button.

The default localization of the component should probably be revisited to resolve the underlying issue.

Context

We're in an accessibility audit with our design system and we cannot resolve these issues.
Originally identified by Level Access.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.3
  Binaries:
    Node: 20.18.0 - ~/.local/share/nvm/v20.18.0/bin/node
    npm: 10.8.2 - ~/.local/share/nvm/v20.18.0/bin/npm
    pnpm: 10.1.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 18.3
  npmPackages:
    @emotion/react: 11.13.5 => 11.13.5 
    @mui/icons-material: ^6.1.9 => 6.1.9 
    @mui/lab: 6.0.0-beta.25 => 6.0.0-beta.25 
    @mui/material: ^6.4.2 => 6.4.2 
    @mui/system: ^6.4.2 => 6.4.2 
    @mui/utils: ^6.4.2 => 6.4.2 
    @mui/x-data-grid-pro: ^7.25.0 => 7.25.0 
    @mui/x-date-pickers: ^7.25.0 => 7.25.0 
    @mui/x-date-pickers-pro: ^7.25.0 => 7.25.0 
    @types/react: ^18.2.51 => 18.3.12 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^4.8.4 => 4.9.5 

Search keywords: accessibility, a11y, column header, menu button

Order ID: 75534