[TreeView] Add an explicit aria-label to SubTree ul elements for Safari VoiceOver support

[strackoverflow]

Description

This came up from an accessibility audit of one of our internal components which makes use of TreeView. (GitHub staff link for more context: https://github.com/github/collaboration-workflows-flex/issues/1190).

It looks like the TreeView.SubTree component needs an aria-label on its ul element in order for Safari's VoiceOver screenreader to properly describe the nested list. This label should just be equivalent to the parent item's accessible name.

This seems like something we could automatically set on all SubTrees so they are VoiceOver compatible, but if there's some reason why we wouldn't want to do this across the board, we could at least add a prop to pass in an aria-label to the SubTree. I'm curious to hear if there's an opinion one way or the other on that 🤔

Steps to reproduce

1. Create a nested sub-tree at least 3 levels deep
2. When navigating to the first child item of the nested parent item, VoiceOver reads the text of the parent item, not the focused item

Version

v36.27.0

Browser

Safari

[lesliecdubs]

Thanks for letting us know!

We're actively working on PRC accessibility remediation right now in https://github.com/github/primer/issues/3453. @TylerJDev should we add this Sev 2 to https://github.com/github/primer/issues/3555, assuming this issue hasn't already been catalogued?

[TylerJDev]

@lesliecdubs, yes we can! I've added this in the batch linked, under severity-2 issues. Should be able to tackle this alongside the other TreeView issues.

[TylerJDev]

@strackoverflow, I've created a PR (#5174) that adds aria-label as a prop for subtree. I'm trying to think of an accessible way to do this automatically. We could grab the name from the parent ListItems, but I'm not too sure how we can determine how to "shorten" the accessible name automatically, (e.g. Add a new "Alien" type to the game to Add a new "Alien" type) without it being a manual thing.

[strackoverflow]

@TylerJDev thanks! Yeah, I'm not sure how we could do this automatically either. I wonder if just using the parent item's full accessible name on the list would be enough to unblock the VoiceOver issue?

[TylerJDev]

@strackoverflow, we could! I'm thinking this might cause some redundancy since I believe it'll repeat the item it was last on, at least for other SRs 🤔

Tagging @ericwbailey for any additional thoughts!

[ericwbailey]

I thiiiiiiiiiink NVDA and JAWS' heuristics will only single announce if the string and the aria-label match, so that might be a case for doing it automatically and not using a manual prop.

Happy to check this out with AT if there's a place I can access outside of the github/github org.

[TylerJDev]

Sorry for the delay here! I'll follow up with the guidance here, and test with NVDA/JAWS!

[pauly31]

Description

This came up from an accessibility audit of one of our internal components which makes use of TreeView. (GitHub staff link for more context: https://github.com/github/collaboration-workflows-flex/issues/1190).

It looks like the TreeView.SubTree component needs an aria-label on its ul element in order for Safari's VoiceOver screenreader to properly describe the nested list. This label should just be equivalent to the parent item's accessible name.

This seems like something we could automatically set on all SubTrees so they are VoiceOver compatible, but if there's some reason why we wouldn't want to do this across the board, we could at least add a prop to pass in an aria-label to the SubTree. I'm curious to hear if there's an opinion one way or the other on that 🤔

Steps to reproduce

1. Create a nested sub-tree at least 3 levels deep
2. When navigating to the first child item of the nested parent item, VoiceOver reads the text of the parent item, not the focused item

Version

v36.27.0

Browser

Safari

[pauly31]

Bjkvjjnjij

[pauly31]

/
Thought 🤔