[data grid] VoiceOver (JAWS) reads wrong column / row when using column pinning feature

[Tucker-Gilligan]

Steps to reproduce 🕹

Link to live example:

Steps:

1. navigate to https://mui.com/x/react-data-grid/column-pinning
2. turn on JAWS voiceover
3. turn off virtual PC cursor (insert + z)
4. Navigate to unpinned column

Current behavior 😯

When navigating the data grid when there is a pinned column, the voiceover utility reads the incorrect row/column number for unpinned columns. For example, when there is one pinned column, navigating to the first data cell in the second column (first unpinned column), voiceover will read column 1 row 12 (should be column 2 row 2).

Expected behavior 🤔

Voiceover should read correct row/column number when navigating the grid

Context 🔦

The context of this issue involves working to bring our implementation of the data grid to meet WCAG AA compliance standards, and to pass VPAT accessibility testing. Current implementation requires a lot of hacking

Your environment 🌎

npx @mui/envinfo

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

Order ID or Support key 💳 (optional)

48138

[cherniavskii]

Hi @Tucker-Gilligan
I checked the aria attributes, and the columns are enumerated correctly.
Here's the VoiceOver output on MacOS:

Could you try using the ariaV7 experimental flag? It brings some accessibility improvements, maybe it could affect column pinning as well.
You can use this demo: https://codesandbox.io/s/elegant-http-v8ngy6

[Tucker-Gilligan]

Thank you @cherniavskii , I am able to reproduce the issue in the code sandbox you have provided (images attached). This grid with 11 rows is registering as a table with 30 rows due to the pinned columns. Unfortunately, ariaV7 experimental flag did not resolve this issue.

[romgrk]

Not sure why JAWS shows 30 rows. We clearly have the proper ARIA props, but it's receiving the count of [role=row] elements.

One thing to note, we might be able to solve this with the sticky headers change. We can use stickied cells within a row instead of having them in another container. We might also be able to use CSS hover again.

[Tucker-Gilligan]

The issue is replicable with MacOS voiceover, JAWS, and NVDA.

[cherniavskii]

@romgrk

We clearly have the proper ARIA props, but it's receiving the count of [role=row] elements.

Yes, I played with it a bit, and there's no way to tell the screen reader that multiple HTML elements are part of the same row element.

We can use stickied cells within a row instead of having them in another container

This is an interesting idea, worth exploring for sure!

[cherniavskii]

@Tucker-Gilligan

The issue is replicable with MacOS voiceover, JAWS, and NVDA.

Yes, I confirm.
This is the limitation of the column pinning feature (at least its current implementation).
This is not exclusive to MUI X DataGrid - see #5568 (comment) and https://www.ag-grid.com/javascript-data-grid/accessibility/#navigation-to-pinned-rowscolumns
We will explore a different approach to column pinning as per #10339 (comment)

[romgrk]

Yes, I played with it a bit, and there's no way to tell the screen reader that multiple HTML elements are part of the same row element.

I'm always a bit fuzzy on the details, would that be an issue with how the browser exposes its a11y tree or with screen readers (or with ARIA)? We could surface the issue to https://github.com/w3c/aria, they're quite responsive & helpful generally.

[cherniavskii]

Hi there!
We have reworked the column headers and improved the horizontal scrolling experience in v7, which is currently in beta! 🎉
You can try out the new Data Grid in the v7 beta docs: https://next.mui.com/x/react-data-grid/

Upgrading from Data Grid v6? Follow our migration guide.
New to the Data Grid? Follow our installation guide.
Let us know what you think!

[romgrk]

Only partially solved but we should complete this shortly, subscribe to #11949 to be notified of the complete fix.