Can't get keyboard focus into contents thumbnails

[jvine]

Using tab to navigate through the controls - user can set focus on the contents div as a whole, and use arrows to scroll the list, but there doesn't appear to be any way to get the focus to, and select, a specific image in the list. When there is also a text index, the keyboard behaviour is correct, to select a tab and tab down through the text links; it's only the thumbnails tab that has an issue.

Each image should be able to get keyboard focus, and Enter should select the focused image.

[edsilv]

This was debated already on a community call I think. As I recall it was decided that (for the BL) the ability to cycle around the main navigational buttons quickly was more important than potentially tabbing through hundreds of thumbnails.

Perhaps this can be a config option? tabThumbsEnabled?

[mejackreed]

@jvine What do you think about the BL's approach? Should we look into adding that configuration option?

[jvine]

Agree that we don't want to force keyboard users to tab through all the thumbnails before getting to the main image nav, but I don't think that forcing one (main navs only) or the other (every single item) behaviour is the right answer either. We could use the arrow key to go down into the list, building on tree behaviour - complicated example here - https://www.levelaccess.com/creating-an-accessible-aria-tree-control/ - but it shows how tab gets you to (and past) the list, and arrow goes down into the list. In tabbing back, you return to your last focus point in the list, so you can move relative to where you were.

[mejackreed]

Thanks for that great example and reference @jvine.

[edsilv]

That's a great example. Many thanks.

[hackartisan]

sul-dlss#9

Estimate: 2 days
Added by snydman