[data grid] Axe DevTool reports 1 serious issue for DataGrid having scroll enabled

[sagar1111212121]

Steps to reproduce

Link to live example: (required)

Steps:

1. Install Axe DevTool in chrome or edge browser
2. Open MUI's Data grid scroll document page - https://mui.com/x/react-data-grid/scrolling/
3. Right click -> Inspect Element -> Open Axe Devtool
4. Run full page scan
5. You will see one issue 'Scrollable region must have keyboard access'

Live Preview of Error

Current behavior

Axe Devtool gives one serious issue when there is a scroll visible inside grid. Same issue is getting replicated in our site where we have used this grid.

Expected behavior

We should not have any issue even with scroll enabled in the grid.

Context

We are implementing accessibility on our website where we are trying to resolve all axe devtool error and other manual errors

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Grid Accessibility
Order ID: 81479

[michelengelen]

I'll add it to the board. Thanks for opening an issue on this!

[sagar1111212121]

@michelengelen - We are using below Mui X version. FYI

"@mui/x-data-grid-pro": "6.18.6",
"@mui/x-license-pro": "6.10.2",

[romgrk]

Could you clarify the accessibility issue that's being reported by your devtool? As in, the actual navigation problem from an end-user standpoint.

I would also suggest upgrading to v7 if possible, we prefer to avoid porting fixes back to v6 at this point.

[sagar1111212121]

@romgrk This is the we are getting.

Regarding upgrade, I understand your point but, we are at position where we cannot do upgrade at this point but we need to clear all accessibility issue with this version and release the product.

[romgrk]

I have seen what your tool reports, I don't understand what it means. Could you showcase the actual a11y issue? E.g. with reproduction steps, like "1. Press Tab to focus the grid, 2. Press Arrow key to focus subelement, 3. etc". Alternatively, if you could clarify what needs to change to satisfy that checker, that would also work.

If you need to fix all a11y issues, you will also need to upgrade to v7. The v6 had a DOM layout that made it impossible to correctly pass along the row/col counts to screen readers (it's a browser/ARIA issue, nothing we could do otherwise). We redid the layout in v7 to fix a11y (among other concerns), so you'll want to use that version.

[github-actions]

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