DataGridPro fails AXE test due to invalid child role "presentation"

[ryan-mcginty-alation]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/

Steps:

1. Open the MUI demo page for data grid or data grid pro
2. Run Axe test with Axe Chrome plugin
3. Note errors:

   Element has children which are not allowed: [role=presentation]
   Element uses aria-busy="true" while showing a loader

   

Current behavior

DataGrid fails accessibility test out of the box

Expected behavior

Should not fail accessibility test

Context

No response

Your environment

npx @mui/envinfo

``` Using Chrome Version 124.0.6367.62 System: OS: macOS 14.4.1 Binaries: Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm pnpm: Not Found Browsers: Chrome: 124.0.6367.62 Edge: Not Found Safari: 17.4.1 npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: ^5.0.0-beta.24 => 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.15.15 => 5.15.15 @mui/lab: ^5.0.0-alpha.124 => 5.0.0-alpha.170 @mui/material: ^5.15.15 => 5.15.15 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/styled-engine-sc: ^5.14.12 => 5.14.12 @mui/system: ^5.15.14 => 5.15.15 @mui/types: ^7.2.14 => 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: 7.2.0 @mui/x-data-grid-generator: ~7.2.0 => 7.2.0 @mui/x-data-grid-premium: 7.2.0 @mui/x-data-grid-pro: ~7.2.0 => 7.2.0 @mui/x-date-pickers: ~7.2.0 => 7.2.0 @mui/x-date-pickers-pro: ~7.2.0 => 7.2.0 @mui/x-license: ^7.2.0 => 7.2.0 @mui/x-tree-view: ~7.2.0 => 7.2.0 @types/react: ^18.2.79 => 18.2.79 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 styled-components: ^5.3.11 => 5.3.11 typescript: 5.3.3 => 5.3.3 ```

Search keywords: invalid child role aria Order ID: Order #75258

[ryan-mcginty-alation]

One other note, the test passed in data-grid-pro v6 when experimentalFeatures -> ariaV7 was enabled like:

experimentalFeatures: {ariaV7: true},

[romgrk]

I don't think role=presentation is the problem, from the spec:

The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or can be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA.

Which is how we're using it. We tag presentational elements with role=presentation. I'm not familiar with your chrome extension, could you clarify which element it thinks is a problem and why?

[ryan-mcginty-alation]

Thank you for your response @romgrk and after looking at the output it does appear to be valid. I don't see any aria-hidden or other tags that would result in presentation being ignored. I have filed a ticket for false positive with the Deque team that creates the core used in Jest, Storybook and Chrome extensions / plugins. They are rather widely used so hopefully if it is indeed a false positive they can fix it and you won't see any more of these issues filed here. Thanks again. :)

https://github.com/dequelabs/axe-core/issues/4419

[romgrk]

Thanks. We receive reports from time to time from various ARIA checkers and they're not always accurate or consistent with one another, if we could have more clarity onto what specific element is rejected and why that would help a lot. Ideally if we can have a link to which section of the ARIA spec is not respected we can get more clarity about the change to make.

In case of discrepancies it's also best to validate with https://github.com/w3c/aria, they can add clarification notes or updates to the spec.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.