[data grid] 508 compliance issue with GridToolbarColumnsButton in CustomToolbar()

[ShyamDhingani]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

https://mui.com/material-ui/react-table/

Steps:
1.go to data grid
2.click on columns
3.toggle the button from on and off and the screen reader should announce the number of items found.

Current behavior 😯

Within` this function there is a liv-search option to narrow columns to be managed. At present, there is no interaction with a screen reader regarding which columns are selected by the the live search.
Expected Behavior: when search results changes, the screen reader should announce "# matches found". For example, when two search
results are found, the screen reader should announce "2 matches found, press a tab key to navigate to the results".
Recommendation: Use Off- screen notification text within "aria-live region". For example,

2 matches found, press
a tab key to navigate to the results

.

`function CustomToolbar() {
const [isColumnsOpen, setColumnsOpen] = React.useState(false);
const [isFiltersOpen, setFiltersOpen] = React.useState(false);
const [isDensityOpen, setDensityOpen] = React.useState(false);
const [isExportOpen, setExportOpen] = React.useState(false);
const [numMatches, setNumMatches] = React.useState(0);

const updateMatches = (count) => {
    setNumMatches(count);
  };


const handleSearch = (searchText) => {
    // Perform the search based on the searchText and update the search results
    const matches = searchFunction(searchText);
    setSearchResults(matches);
  
    // Update the number of matches using the updateMatches function
    updateMatches(matches.length);
  };
  
  

return (
    <GridToolbarContainer>
        <GridToolbarColumnsButton
            aria-expanded={isColumnsOpen}
            aria-live="polite"
            onClick={() => setColumnsOpen(!isColumnsOpen)}
        />
        <div aria-live="polite">
            {numMatches > 0 && `${numMatches} matches found, press a tab key to navigate to the results`}
        </div>
        <GridToolbarFilterButton
            componentsProps={{ 
                button: {
                    'aria-expanded': isFiltersOpen,
                    'aria-live': 'polite',
                    onClick: () => setFiltersOpen(!isFiltersOpen)
                } 
             }}
        />
        <GridToolbarDensitySelector
            aria-expanded={isDensityOpen}
            aria-live="polite"
            onClick={() => setDensityOpen(!isDensityOpen)}
        />
        <GridToolbarExport
            aria-expanded={isExportOpen}
            aria-live="polite"
            onClick={() => setExportOpen(!isExportOpen)}
        />
    </GridToolbarContainer>
);

}`

Expected behavior 🤔

When using the buttons to toggle on and off under columns it should announce the # of matches found

Context 🔦

Trying to make the application 508 compliant.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.37)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.122
    @mui/core-downloads-tracker:  5.11.14
    @mui/icons-material: ^5.11.0 => 5.11.0
    @mui/material: ^5.11.14 => 5.11.14
    @mui/private-theming:  5.11.13
    @mui/styled-engine:  5.11.11
    @mui/system:  5.11.14
    @mui/types:  7.2.3
    @mui/utils:  5.11.13
    @mui/x-data-grid: ^6.0.3 => 6.0.3
    @mui/x-date-pickers: ^6.0.3 => 6.0.3
    @types/react:  18.0.26
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  4.9.4` goes here.

Order ID or Support key 💳 (optional)

No response

[m4theushw]

We plan to improve the columns panel in #5700 and we should certainly address these accessibility issues too.