[data grid] AXE test fails 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. :)

dequelabs/axe-core#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]

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

[ryan-mcginty-alation]

@romgrk it appears the issue is with the negative tab index being read by screen readers and invalidating the role="presentation", see the comment here -> dequelabs/axe-core#4419 (comment)

Thanks for the issue. So there's two things going on and I'm not sure which is the correct answer at the moment.

The first is that the issue is that there's a div with tabindex=-1 and role=presentation. When that happens screen readers must ignore the presentation role and use the elements implicit role instead, which means it's not presentational and becomes an element with a role that is not supported in the grid. So the fix would be to remove the tabindex.

However the question then becomes what is the implicit role that screen readers apply to that element and does it cause problems? It use to be that it would, but I'll need to do some testing to see what the state of screen readers are today and how they treat that element.