Keyboard Navigation of Sidebar

[claireademarco]

When navigating the sidebar using a keyboard, a user is able to use the up/down arrow to navigate from "about this item" to "rights" to "index" to "annotations" but once one of those options is selected and a user opens the sidebar then closes the sidebar, they can no longer navigate using up/down.

I made a short video if this description is not helpful. You'll see me tabbing through with the keyboard, and then after I hit the trap I end up using the mouse.

[camillevilla]

Thanks for filing this @claireademarco. You'll notice that it takes two tab presses to get from collapse sidebar to the next/prev item buttons. Tab order is currently:

1. "Collapse sidebar"
2. image canvas (you can then use arrow keys to pan, use other OSD keyboard shortcuts, etc.)
3. Canvas navigation (e.g. "Previous item", "Next item")

In this GIF I collapse the sidebar, tab press to the canvas navigation, then shift + tab back through the image, and then to the "Collapse sidebar" button and then the various panel types. I have Voiceover enabled to make the current focus more obvious.

Revisiting the tab order and markup would be a bigger project. Perhaps as an intermediate fix would be providing a visual indicator that the focus is on the canvas? @ggeisler @claireademarco

[mferrarini]

Adding my own experience testing the sidebar/info panels using keyboard navigation and voiceover:

• I was able to successfully navigate through the 3 info panels (they are set up as radio buttons, once you're on one of them, you use the left/right arrow keys to toggle between them).
• The hover/focus states for these info panels (rgba(0, 0, 0, 0.04)), however, is really really light and doesn't pass the color contrast test. It's also different from other buttons' focus states, which are a bit darker gray.
• It's odd that after clicking the "toggle sidebar" button (the one that looks like a hamburger menu) to open up the info panel, you still have to tab through the other options on the right of the page ("window views", "maximize window", "close window") before you get to the info panel; there's also no indication in voiceover that this button has expanded/collapsed something on the page

Navigating within the info panels:

• Information panel: no issues expanding/collapsing or getting to the IIIF manifest link in the "Related Links" section
• Rights panel: no issues
• Index panel:
  • Using voiceover: no issues with the "item list" and "thumnail list" views (was told "You are currently on a menu. To move between items in this list, press Control-Option-Right Arrow or Control-Option-Left Arrow." and that worked to navigate through items); however, had issues with the "table of contents" view (could only get to the first section of items)
  • Was not able to tab through any of these views when voiceover was turned off