False positive for "Certain ARIA roles must contain particular children"

[ryan-mcginty-alation]

Product

axe-core

Product Version

Extension: v4.78.1 axe-core: v4.8.4

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

Valid use of presentation within role="grid" should not be flagged as an invalid child

Actual

role="presentation" is flagged as an invalid child

How to Reproduce

1. Go to MUI X documentation page for Data Grid https://mui.com/x/react-data-grid/column-dimensions/#column-width
2. Run the chrome plugin scan (also fails in jest-axe and storybook plugin)
3. See the error regarding "Certain ARIA roles must container particular children"

Additional context

There is another message about aria-busy but can't find any issues there either. Am I missing something or is this a bug?

I have traced all the role=presentation and none of them have aria-hidden so it does not seem to be the case that they are ignored.

[straker]

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.