Skip to content
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] Add an explicit aria-label to SubTree ul elements for Safari VoiceOver support #5035

Open
strackoverflow opened this issue Sep 26, 2024 · 10 comments · May be fixed by #5174
Open
Labels
accessibility bug Something isn't working component: TreeView Issues related to the TreeView component react staff Author is a staff member

Comments

@strackoverflow
Copy link
Member

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

@strackoverflow strackoverflow added bug Something isn't working accessibility labels Sep 26, 2024
@github-actions github-actions bot added the staff Author is a staff member label Sep 26, 2024
@strackoverflow strackoverflow added component: TreeView Issues related to the TreeView component accessibility react staff Author is a staff member and removed accessibility react staff Author is a staff member labels Sep 26, 2024
@lesliecdubs
Copy link
Member

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
Copy link
Contributor

@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 TylerJDev linked a pull request Oct 24, 2024 that will close this issue
13 tasks
@TylerJDev
Copy link
Contributor

@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
Copy link
Member Author

@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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Contributor

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

@pauly31

This comment has been minimized.

@pauly31

This comment has been minimized.

@pauly31

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility bug Something isn't working component: TreeView Issues related to the TreeView component react staff Author is a staff member
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants