User stats: stats bar chart can't be read from the keyboard (or by a screen reader)

[eatyourgreens]

Package

• lib-user

Describe the bug

The new classification stats bar chart requires a mouse, and the individual bar amounts are only visible on hover. Classifications can't be accessed from the keyboard, which means they can't be accessed in a screenreader either.

Additionally, VoiceOver announces the currently selected option as [object Object] in each of the filter dropdowns.

To Reproduce

Here's a video where I navigate the user stats page in VoiceOver. Notice how selected menu options aren't announced properly, and the bar chart content is skipped completely.

Screen.Recording.2024-09-19.at.13.09.48.mov

Outside of VoiceOver, you can also reproduce this issue by tabbing through the page and interacting with the bar chart from the keyboard.

Expected behavior

• a volunteer should be able to access their personal classification stats regardless of disability.
• the filter dropdowns should announce the selected option properly.

Device information

Desktop (please complete the following information):

• OS: MacOS Sonoma 14.6
• Browser: Safari/VoiceOver and Firefox/VoiceOver

Additional context

Keyboard access for page content is a level A WCAG requirement (SC 2.1.1.) Level AA is the commonly accepted level used to define a site as accessible to disabled users.

Grommet issue:

• DataChart - detail is not accessible via keyboard when using voiceover grommet/grommet#7319

[goplayoutside3]

@eatyourgreens please take a look at #5842 and the corresponding Grommet PR that was just accepted. Please add more info to your authored Issue on whether @mcbouslog's Grommet PR is a potential fix or not.

[eatyourgreens]

Sorry, I don't understand the question. You can see, in the video that I uploaded here, that my classification stats are not announced by VoiceOver.

[eatyourgreens]

This isn't fixed yet in Grommet. See grommet/grommet#7310 (comment).

The Zooniverse dev team should know enough about VoiceOver to have made that judgement without asking for my help.

[eatyourgreens]

That Grommet PR doesn't fix [object Object] in the dropdown menu announcements either, which is a separate bug in the Zooniverse code.

[eatyourgreens]

I've suggested a possible fix here: grommet/grommet#7319 (comment)

Again, this a simple thing that the Zooniverse dev team could have picked up by themselves.

[eatyourgreens]

I think Mark’s Grommet PR, which just merged merged last week, might be using live regions incorrectly. Hence it not working in VoiceOver.

Hopefully that’s enough info to get you started on debugging it.

[eatyourgreens]

Patrick Lauke’s Why aren’t my live regions working? is a great resource for understanding how to use HTML5 live regions. It covers many common developer errors with live regions, including errors that I think the Grommet code might be making.