search

zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
104 stars 29 forks source link

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

Open eatyourgreens opened 1 month ago

eatyourgreens commented 1 month ago

Package

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.

https://github.com/user-attachments/assets/9ae68cc7-bc77-4114-8e86-1f9bd637b9f4

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

Device information

Desktop (please complete the following information):

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:

goplayoutside3 commented 1 month ago

@eatyourgreens please take a look at https://github.com/zooniverse/front-end-monorepo/issues/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 commented 1 month ago

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

This isn't fixed yet in Grommet. See https://github.com/grommet/grommet/pull/7310#issuecomment-2361275994.

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

eatyourgreens commented 1 month ago

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

eatyourgreens commented 1 month ago

I've suggested a possible fix here: https://github.com/grommet/grommet/issues/7319#issuecomment-2361341210

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

eatyourgreens commented 1 month ago

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

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.