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.14k stars 1.29k forks source link

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

Open sagar1111212121 opened 6 days ago

sagar1111212121 commented 6 days ago

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

DataGridScrollIssue

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 commented 5 days ago

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

sagar1111212121 commented 4 days ago

@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 commented 4 days ago

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 commented 4 days ago

image

@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 commented 4 days ago

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.