Keyboard accessibility of issues reactions toolbar

[thibaudcolas]

Select Topic Area

Bug

GitHub Feature Area

Issues

Body

I’d like to consider reactions to encourage contributors to vote on issues (example below: Wagtail issue #4083, but have stumbled upon a few accessibility gotchas, that seem like they’re bugs in the implementation.

Keyboard focus of reactions switch buttons

The reactions "switch" buttons seem to be the only way to view the list of users who used a given reaction. But for some reason those buttons are only focusable when logged out. Logged into GitHub, the button has tabindex="-1", so it’s impossible for keyboard users to view who voted on what.

Here’s the keyboard focus state for an anonymous user (working well):

And here it is for a logged-in user, note how the switch button isn’t reachable:

ARIA label of reaction switch buttons

Different but related issue – the switch buttons also have an aria-label. Here’s the label for the "👍️ 7" button in the example above:

Unreact with 👍 (5 👍 reactions so far, including username, username, username, username, username and 2 more)

There are a few puzzling aspects / problems here:

• As far as I can see the label is set up the wrong way around. It says "React" when I have reacted (aria-checked="true"). And "Unreact" when I haven’t reacted (aria-checked="false")
• The "5 👍 " is confusing. It would be clearer as "7 👍 " to match the visible count without screen reader users having to read through the whole label to understand they’re meant to add "2 more"
• For speech recognition users, "React/Unreact with 👍" is going to be tricky to guess to interact with the button in voice commands. And for Voice Control users they can’t guess the full label that they’d need to say. So it’d be better to move this text from aria-label to aria-describedby / aria-description.

Hope this helps, please let me know if there’s a better place to report this.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[queenofcorgis]

Thanks for such a detailed report @thibaudcolas. We filed this with our team to review, we will follow-up here with any additional questions or updates. The screen recordings you included and workarounds are incredibly helpful to our team!

[thibaudcolas]

Excellent!

[cehfisher]

Hello @thibaudcolas - the accessibility team has looked into this issue and a fix should now be in place. Could you clear your cache and retest please? Thanks!

[thibaudcolas]

@cehfisher just gave this a go, using two different browsers and an incognito window, and I still see the same results as before :/ As far as I can tell nothing has changed? I don’t see what would be cached in my browser that is relevant here.

• Switch button is still unreachable with the keyboard (still has a tabindex="-1")
• Label still says "React" when I’ve already "reacted" and "Unreact" when I haven’t
• The count of reactions is still misleading (have to listen to the whole message to then do "5 + 2", rather than having the label say "7")
• The aria-label still is way too verbose for speech recognition users

[cehfisher]

Thanks for following up @thibaudcolas! We have reopened this discussion and the internal tracking issue and will follow-up here with any additional questions or updates. Thanks again!

[cehfisher]

Hi @thibaudcolas – the accessibility team reviewed this issue again and confirmed that in this feature, the reactions use a toolbar pattern, so the buttons are navigable with arrow keys rather than Tab.

They agree the inconsistency across areas like Discussions is confusing, and an internal issue has been opened to help align these patterns. Thanks for raising this and helping improve accessibility on GitHub!

[owenniblock]

@thibaudcolas thanks for your patience here. I'm just looking at this with fresh eyes. I see the issues with React/Unreact and the count are simple bugs (I have a fix for those that I'm testing now).

I'll also look at splitting the aria-label out into a label and description to improve usability there.

The tabindex="-1" appears to be intentional, that occurs because the component is contained in a toolbar element. You should be able to focus the element (toggling between focus on the reactions menu and the active reactions list elements by using the left and right arrow keys). However I also see that the markup in Discussions (i.e. this page) follows a different pattern which is confusing.

I believe we implemented the toolbar due to feedback that there were too many tab stops to move from one comment to another on Issues (if there are 8 different emoji reactions on a comment then that's 9 tab stops instead of 1). However I wonder if there's some way that would make this more clear to users 🤔

[thibaudcolas]

Thank you! That’s a good point re the toolbar pattern with multiple reactions, that’d probably get annoying. If this works for others I’m happy though yeah not sure how discoverable that is.

[owenniblock]

Yeah, we've been discussing this a bit over here. I think the screen reader announces that it's in a toolbar, so it might be OK for those users, but it's less discoverable for sighted keyboard users. I think we're going to start a discussion on the best practice across GitHub so we can try and align across the product but that sort of collaboration always takes a bit of time.

In the meantime, the bugs you identified should now be resolved 🤞 and there are a couple of other niggles we noticed around the announcement of the Toolbar that we're hoping to fix shortly.

[cehfisher]

Hello @thibaudcolas - When you have a moment, could you confirm that the original issues are now resolved? If yes, please go ahead and close out this discussion. The usability issues Owen flagged are already in progress, but if anything else comes up or you'd like to track those separately, you're welcome to start a new discussion. Thanks so much!

[thibaudcolas]

My bad, I thought this was all closed already! As far as I can tell it’s all working much better, thank you all :)

[cehfisher]

No worries! We like to double-check with the user who opened the discussion that everything was resolved before closing the thread. Thanks for confirming 😸