search

primer / react

An implementation of GitHub's Primer Design System using React
https://primer.style/guides/react
MIT License
3.18k stars 538 forks source link

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

Open strackoverflow opened 1 month ago

strackoverflow commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 3 weeks ago

@strackoverflow, I've created a PR (https://github.com/primer/react/pull/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 commented 3 weeks ago

@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 commented 1 week ago

@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 commented 1 week ago

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.