Keyboard navigation / Session Bar Timezone Picker

Development Accessibility
1

URL: /
Criterion: 2.1.1 Keyboard (A)

Ideally all controls should be keyboard-reachable and keyboard-operable.

In Indico, I see several elements that are not keyboard-operable and several that are not keyboard-reachable, so I’m going to give just one example here, and will limit subsequent examples to just those elements for which fixes are different.

image
image546×593 32.4 KB

The time zone selector, when expanded, does not receive focus, and the elements within the time zone selector widget do not follow the button in the tab order. This means it is not possible to tab into the widget and interact with it after opening the popup using the keyboard.

I am not familiar with the qtip2 library, so I will defer a definitive decision until later. For now I am considering two alternatives:

  1. Use a DETAILS element for the popup, which would place the widget in the correct tab order. This can potentially be styled to look like the existing popup. It also has the advantage of requiring no JavaScript to work. The downside is that it may still pose the same challenges that the existing one has when it comes to accommodating very small screens (or high zoom levels).
  2. Use a DIALOG element for the popup and turn it into a modal dialog. This is a larger departure from the current UX, and it requires some JavaScript (just a little). The benefit of this approach is it integrates better into smaller screens (high zoom). The DIALOG element automatically focuses the first available form control when it is opened, so it also solves the tab order / focus issue.
2

IMHO the timezone selector (and honestly the whole “session bar” (that’s what this header bar is called internally)) should be rewritten using more modern things (such as React). It’s pretty legacy…

I think using a modal popup window isn’t great UX though. As a quick&dirty workaround you could probably hack something into the qtip call that opens it. This part of the existing code looks interesting:

      events: {
        show() {
          _.defer(scrollToCurrentTZ);
        },
      },

You can probably just add a .focus() call inside that scrollToCurrentTZ function…

3

React sounds a bit heavy-handed, for what’s essentially two select lists and a button, no?

EDIT: Regardless, I’ll think about what we can do with the UX side, and we can figure out the technical details later.