search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.12k stars 1.28k forks source link

ARIA attributes are positioned incorrectly in datagrid structure #9908

Closed shawnharvell closed 1 year ago

shawnharvell commented 1 year ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example:

Steps:

  1. Install the Deque Axe dev tools plugin in Chrome
  2. Go to https://mui.com/x/react-data-grid/editing/ and scan the page in Axe
  3. 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)

image

Expected behavior 🤔

Instead all these attributes should be positioned on the child MuiDataGrid-main

image

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

romgrk commented 1 year ago

Is this solved by #9496?

shawnharvell commented 1 year ago

Is this solved by #9496?

@romgrk had to update to the latest released but yes now appears to be working correctly, thanks!