ux icon indicating copy to clipboard operation
ux copied to clipboard

Improve DevTools keyboard navigation

Open violasong opened this issue 6 years ago • 3 comments

Related to #7: Currently many DevTools interactions can’t be navigated via keyboard or need improved keyboard behavior. It would be great if someone with keyboard navigation experience or interest in accessibility could take a look at the keyboard functionality in the most used panels (Inspector, Console, Network, Debugger) and write up some improvements.

For example: I think Inspector is very close to being keyboard-navigable - just need arrow-key behavior for the the right-pane tabs.

Mentor: @yzen

violasong avatar Aug 21 '18 23:08 violasong

I was wondering if the DevTools team has identified intended audiences for tab navigation. Some examples:

  1. All users: focus styles on some classes of elements, e.g. text input boxes.
  2. Power users: some may be used to using the keyboard to limit back-and-forth between keyboard input and the mouse or trackpad. E.g. when I fill a form, I often use keyboard navigation to switch between fields.
  3. Users who primarily use the keyboard (often due to a disability): they will need a stronger level of access, such as focusable elements whenever it’s relevant, clearly visible focus styles for everything, no focus traps, and perhaps ways to skip long lists or a kind of "quick navigation" tool.

I’m all for addressing the needs of all 3 groups equally, but I’ll just note that it can take increasing effort.

fvsch avatar Aug 22 '18 11:08 fvsch

Ah, I'm not sure if we've really thought about this enough (cc: @yzen @martinbalfanz @digitarald). 2 seems important for a developer tool. 3 seems like a good eventual goal, but I realized I'm not sure how well Firefox itself supports this, so maybe we're getting ahead of ourselves a bit?

Re: Quick nav tool: some ideas for a command palette https://github.com/devtools-html/debugger.html/issues/6260

violasong avatar Aug 22 '18 21:08 violasong

I hope this can be addressed in the inclusive way (e.g. considering all 3 categories). By addressing 3 we are going to solve 1 and 2 (in other words a curb cut effect)

yzen avatar Aug 23 '18 14:08 yzen