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/
3.91k stars 1.19k forks source link

[data grid] The provided aria label prop is attached on the wrong grid element, causing issues with accessibility #13522

Open lemmylem opened 1 week ago

lemmylem commented 1 week ago

The problem in depth

I am a MUI Pro license user and customers are experiencing accessibility issues with the data grid. The problem is that the aria label that MUI provides is attached to the "wrong" element. It should be attached to the div with the role="grid", so screen readers can pick it up.

Currently, for example, the NVDA screen reader does not correctly read the aria label, in the grid, failing our accessibility requirements. In the below image, the red circle is where the aria label is currently attached, and the green is where it should be (or vise versa). The overall requirement is that the role must be on the same div as the aria label, or else there will be issues with screen readers reading the correct back to the user.

aria-label

Search keywords: aria, label Order ID: 79357

michelengelen commented 1 week ago

Hey @lemmylem and thanks for raising this issue. I can confirm that the aria values are incorrectly placed. I'll add it to the board! 👍🏼