-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TreeView] Fix usage of the aria-selected
attribute
#14991
Conversation
Deploy preview: https://deploy-preview-14991--material-ui-x.netlify.app/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, nice improvement! 👍 👏
ariaSelected = true; | ||
} else if (disableSelection || disabled) { | ||
// - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes. | ||
ariaSelected = undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
They mentioned that "without the aria-selected=“false”, NVDA doesn't render the information, so we don't know if the item is selected or not."
I'm not sure if NVDA does that only when there's at least one selected, but I'm wondering if, in order to "display" the items, it should always be false
even when there's no selection or selection is disabled.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected states for Grid that setting aria-selected="false" on a focusable gridcell indicates the cell is selectable.
I believe the same logic applies to Tree items, so ariaSelected=undefined
is the way to go indeed.
Fixes #14982
The old behavior was linking to the ARIA doc which does not describes what was implemented...
Preview: https://deploy-preview-14991--material-ui-x.netlify.app/x/react-tree-view/simple-tree-view/selection/