ARIA attributes are positioned incorrectly in datagrid structure #9908
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example:
Steps:
- Install the Deque Axe dev tools plugin in Chrome
- Go to https://mui.com/x/react-data-grid/editing/ and scan the page in Axe
- You will find the first issue listed is "certain ARIA roles must contain particular children" pointing to the first datagrid
Current behavior 😯
The component is placing the role=grid and related aria attributes on the outer most container of the datagrid (MuiDataGrid-root)
Expected behavior 🤔
Instead all these attributes should be positioned on the child MuiDataGrid-main
Context 🔦
As currently implemented the component fails WCAG 2.1 AA
Your environment 🌎
note I have provided this as requested but the bug is reproducible in any instance of MUI Datagrid one can find anywhere including as noted above, MUI's own examples.
System:
OS: macOS 13.4.1
Binaries:
Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
Browsers:
Chrome: 115.0.5790.170
Edge: 110.0.1587.50
Safari: 16.5.2
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.8
@mui/core-downloads-tracker: 5.14.2
@mui/icons-material: ^5.13.7 => 5.14.1
@mui/material: ^5.14.2 => 5.14.2
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.1
@mui/types: 7.2.4
@mui/utils: 5.14.1
@mui/x-data-grid: ^6.10.2 => 6.10.2
@mui/x-data-grid-generator: ^6.10.2 => 6.10.2
@mui/x-data-grid-premium: 6.10.2
@mui/x-data-grid-pro: 6.10.2
@mui/x-license-pro: 6.10.2
@types/react: ^18.2.17 => 18.2.17
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.1.6 => 5.1.6
Order ID or Support key 💳 (optional)
No response