[DataGrid] Add ariaV7 experimental flag#9496
Conversation
cherniavskii
added
accessibility
Netlify deploy previewNetlify deploy preview: https://deploy-preview-9496--material-ui-x.netlify.app/ Updated pagesThese are the results for the performance tests:
|
| const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector); | ||
|
|
||
| return { | ||
| role: 'grid', |
There was a problem hiding this comment.
Per https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/ we might have the wrong role when treeData={true}
| role: 'grid', | |
| role: rootProps.treeData ? 'treegrid' : 'grid', |
AG Grid seems to make it a treegrid in all the cases, e.g. https://ag-grid.com/react-data-grid/column-definitions/ which feels broken.
There was a problem hiding this comment.
On a related note, I would argue that role="cell" is wrong too, it should be role="gridcell". Two sources that points in this direction:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role
There was a problem hiding this comment.
we might have the wrong role when treeData={true}
Updated to use treegrid role when treeData={true} and ariaV7 experimental flag is enabled to avoid breaking changes 👍
I would argue that role="cell" is wrong too, it should be role="gridcell"
Yup, done! I've also fixed a few accessibility tree issues and tested with VoiceOver - it's more usable now (both with ariaV7 flag and without it) 👍
4 participants
Fixes #9403
Fixes #8525
Fixes #8624
Using an experimental flag allows us to:
Preview: https://deploy-preview-9496--material-ui-x.netlify.app/x/react-data-grid/accessibility/#accessibility-changes-in-v7
TODO:
ariaV7flag removal in [discussion] Preparing v7 #7902