Improve accessibility for keyboard users

[amclark42]

My setup:

• eXist v5.0.0
• Dashboard v2.0.4
• Firefox browser

I prefer to use keyboard navigation because it's easier on my wrists. I've struggled with using the new Dashboard in this way: I can't always see where the focus is on the page, and some important controls can't be tabbed to at all.

As an example, starting from exist/apps/dashboard/index.html:

1. As logged-out user, tab to the Login button. (The affordance here is low contrast, but there is an affordance.)
2. Hit Space to open the modal. Nothing happens. The Login "button" looks like an HTML link, not an HTML button, so fair enough. (Interaction via Space is only expected of, and by default built into, HTML <button>s. Since it looks like a button, it might be better to use <button>, or make sure that default button functionality is available on the <a>. But it's available for interaction, which is what really matters.)
3. Hit Enter to open the modal. It works!
4. Try to tab into the first form field. Focus returns to the Dashboard's Login link from... somewhere.
5. Try to tab into the modal. It's not possible. Loop through all focusable elements twice to make sure. No luck.
6. Click outside of the modal to dismiss it.
7. Tab back to the Dashboard Login link. Open the modal with Enter.
8. Notice that the text of the modal's Login button is bolded. Presumably this is where the focus is? (I'd be expecting the same kind of affordance that I saw around the Dashboard's login. How would I know that font weight is an affordance when I haven't seen what the button text looks like without the affordance? I would need to go through this guess-and-check method at least once to figure this out.)
9. Shift+Tab to move to the focusable element before the Login button. A cursor appears in the Password field!
10. Shift+Tab again to move to the User field. There's no cursor, and no visible affordances elsewhere on the page.
11. Try to type in a username, in case the focus is on the User field and it's just not showing up. No dice.
12. Try to tab forward. The focus returns to the Dashboard Login link.
13. Give up and use the mouse as a stopgap whenever keyboard navigation does something mysterious and/or unexpected. I am able-bodied, so I can do this without physical pain and without the help of someone else.

While most of this is the same when using Chrome, I can tab back to the User field there, strangely enough.

I hope this breakdown helps. I like the new Dashboard a lot; it feels much cleaner and nuanced in what it displays and when. The old Dashboard still wins in terms of keyboard accessibility, unfortunately—maybe because it uses standard HTML elements, so that it can rely on the browsers' default behaviors? There's a lot more you have to build into custom elements, I think.

[joewiz]

@amclark42 Thank you very much for your clear report! We made some last minute fixes to logging in flow, and I agree that it left some warts where improvements could be made. Your report leaves a clear roadmap for where they are needed!