Treeview has SVG button control, Accessibility Checker errors

[dakahn]

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."

Potential solution

More from @carmacleod 's previous review

"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.

[dakahn]

closing in favor of #6792