[data grid] Expandable rows are not accessible #10032
Description
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/x/react-data-grid/tree-data/
Steps:
- Expand one of the rows
- Inspect the accessibility tree
Order ID: 65425
Current behavior 😯
The current data grid example for expandable rows is not accessible as it does not follow an the correct pattern.
To illustrate the issue, lets look at the component and its the accessibility tree:
As the accessibility tree illustrates, there is nothing to relate to non-sighted users that one of the rows is expanded and that some of the rows are child rows of another.
Expected behavior 🤔
When expandable rows are present the Treegrid pattern should be employed.
From an aria property point of view, this means adding properties like:
role=treegridto indicate this is a tree gridaria-levelto determine the deptharia-expandedto say if the current row is expanded (leave itundefinedto say this is a leaf node)aria-setsizeto determine how many children there arearia-posinsetto say what item you are on at the current level
I've not had a proper look at the keyboard interactions. They may be fine as or or require some changes too.
Context 🔦
We've started using MUI recently, and are looking to replace our expandable row patterns with poor accessibility with standard approaches, and were hoping MUI had an out-of-the-box solution.
We pay for MUI-X, and were hoping data-grid would implement these correctly, but that doesn't seem to currently be the case.
Your environment 🌎
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Chrome Version 115.0.5790.171 (Official Build) (64-bit)