Horizontal scrolling lists don't work with a mouse or keyboard

[eatyourgreens]

Package

• lib-user

Is your feature request related to a problem? Please describe.

Recent projects and recent subjects are displayed as horizontal scrolling lists, which only really work with touch interfaces like tablet screens or trackpads. If you use the keyboard or, more commonly, a mouse then horizontal scrolling lists are almost impossible to use.

Many, if not most, volunteers will be using a desktop PC with a mouse.

Like pretty much everything else FEM, it's awkward, slower, and takes many more steps to get to the information or function you want.

https://www.zooniverse.org/talk/17/3466158?comment=5699812

Describe the solution you'd like

A scrolling list that's been designed, tested, and built with keyboard and mouse accessibility in mind. Vertical scrolling regions, with the appropriate roles and tab indexes, are probably the most accessible solution here.

Additional context

Adrian Roselli's post about keyboard access for scrolling regions is still one of the best sources of information on that subject.

If you want to provide horizontal scrolling for people who rely on the mouse wheel, you can rotate a list so that vertical scrolling with the wheel actually scrolls left-right, but that's not something that anyone expects to happen when they use a mouse wheel.

For short lists, you can use prominent left/right buttons to scroll left/right with a mouse. The Zooniverse projects page does this for project categories.

For long lists, such as a list of a volunteer's projects, vertical scrolling is still the best UX option for mouse users.

[eatyourgreens]

This was labelled with enhancement but it's actually an access barrier/bug.

[eatyourgreens]

Since Chrome 127, I think Chrome now adds a tab stop for elements styled with overflow: auto;. Chrome have pushed automatic keyboard access for scrolling regions back to Chrome 130. Firefox 131 does add a tab stop for overflowing regions (I think this has been a Firefox feature for a while.) Scrolling regions are still inaccessible from the keyboard in Safari.

TLDR: anything styled with overflow: auto still needs to have tabindex=0 added by hand, along with an accessible name and role in the accessibility tree.

[goplayoutside3]

Some duplicate comments in #6316. Just connecting related Github Issues.