You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This issue reproduces some issues raised in previous PR reviews
The experimental Treeview component has a nested SVG button in the accessibility tree. This is causing an error in Accessibility Checker for unlabeled button components.
from user @carmacleod experimental Treeview PR review
"The toggle buttons (twistie triangles) shouldn't be focusable. They're just a visual affordance for pointing devices. These buttons need tabindex="-1" to take them out of the tab order, and aria-hidden="true" to hide them from screen readers. (Alternatively, don't use a button element at all - just the svg with a click handler will do). You can give them hover styling if you like, but please take away the focus styling. If a mouse user clicks on one, move focus to the corresponding branch treeitem (in addition to handling the expand/collapse)."
and my own experimental Treeview PR review
"The SVG buttons are throwing errors in Accessibility Checker for being unlabeled. I would have expected this button to be a visual affordance hidden from the accessibility tree and have the list item itself be clickable. This would again be more in line with the ...APG note and also give users a larger click target make the tree more usable."
"You need to remove the button completely, and just keep the SVG. Move all of the button event handling to the SVG, and keep focusable=false aria-hidden=true on the SVG...it's not possible to hide focusable elements from screen readers using aria-hidden... and tabindex=-1 is still click focusable. So the button needs to go.
The text was updated successfully, but these errors were encountered:
dakahn
changed the title
Treeview has SVG button, Accessibility Checker errors
Treeview has SVG button control, Accessibility Checker errors
Aug 13, 2020
This issue reproduces some issues raised in previous PR reviews
The experimental Treeview component has a nested SVG button in the accessibility tree. This is causing an error in Accessibility Checker for unlabeled button components.
from user @carmacleod experimental Treeview PR review
and my own experimental Treeview PR review
Potential solution
More from @carmacleod 's previous review
The text was updated successfully, but these errors were encountered: