[data grid] Column header sort buttons should use unique labels

[dil-pvajda]

Relates to #16454

Steps to reproduce

Steps:

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

Current behavior

All the sort buttons have identical labels, "Sort", which makes them hard to tell apart from each other.
Screen reader users will be unable to determine the purpose of these buttons, because they don't know what is being sorted.

Expected behavior

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

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, sort button

Order ID: 75534

[KenanYusuf]

Thanks again for raising the issue.

Perhaps something like Sort {columnName} by {sortType}?