UI: general keyboard navigation

[philrenaud]

It would be nice to use keyboard commands to navigate the Nomad UI.

I'd like to move between nav/subnav sections with arrow key modifiers, or vim-like go-to keys.

Launch Blockers

• Shift-key vimium-style "hint" highlighting
• [ui] Keyboard Nav: Ability to disable shortcuts #13046
• Let users re-bind shortcuts (save to local storage) #13777
• Extend Custom Modifier to to allow hints on pre-loaded items (main menu)
• Shortcuts Modal: Acceptance Tests #13890
• Shortcuts modal: add dismiss button; trap focus
• [ui] Keyboard Nav: Solve for multiple tables on a single page #13477
• [ui] Keyboard Nav: u to go up a level #13753
• Fix shiftFriendlyBuffer to allow up/down arrow keys to work (currently auto-trigger shift commands)
• Bugfix: "u" to go up a level in jobs has an extra stage

Later:

• j/k keys to move focus among on-page tables #13478
• Keynav: Handle Filesystem keyboard-shortcut enumerables #13495
• Handle table sorting for enumerable keyboard nav items
• Add Shift + -> etc. hint to subnav and nav

[mikenomitch]

Some random/incomplete feedback after playing with the vercel link:

• Do we want to show the key strokes in the middle of the screen? Maybe we could turn that on with some mode? (Maybe this was the plan all along?) - FWIW, I'm not a big fan.

• Esc causes "Hide Keyboard Shortcuts" to show regardless of whether or not its open

• If we do show: think showing arrow up/down, and tab, and maybe escape/meta or some others that one would normally get hit in standard keyboard use is probably not great. Maybe we hide these?

• What I really want is some easy way to select the Nth element from a index page (i.e. Jobs list). I keep hitting "j" to try to jump to the first element of the index (assuming j/k move me up and down the table). Gmail & Fastmail and some other webapps use j/k to do that, and then "o" to open the selected element. IMO that's probably more the expected behavior than switching tabs with j/k. (Maybe shift+j and shift+k and the shift+arrow commands could do the tab switching?)

• When I do use j/k to tab switch it usually only works once. If I re-click onto the page then re-hit the key, it'll work again. I am on firefox fwiw, so maybe it behaves differently on chrome.

[philrenaud]

Do we want to show the key strokes in the middle of the screen? Maybe we could turn that on with some mode? (Maybe this was the plan all along?) - FWIW, I'm not a big fan.

Intent is to never show these; all the associated styles currently in #12831 are for demo purposes only.

What I really want is some easy way to select the Nth element from a index page (i.e. Jobs list). I keep hitting "j" to try to jump to the first element of the index (assuming j/k move me up and down the table). Gmail & Fastmail and some other webapps use j/k to do that, and then "o" to open the selected element. IMO that's probably more the expected behavior than switching tabs with j/k. (Maybe shift+j and shift+k and the shift+arrow commands could do the tab switching?)

I like this as a concept a lot. I think what I might do is remove j and k from subnav/nav traversal, and reserve them for in-page stuff like you mention.

VimCal and a few other info-dense tools do this thing where you hold a key (would probably shift in our case) that annotates all items on your page with its corresponding shortcut. That would probably be the thing that gets us closest number-key-bound list-item opening. Future work I think!

[mikenomitch]

@philrenaud oh also another idea in the same vein as j/k/o, hitting "u" to traverse up a breadcrumb (ie going from "jobs/JOB_ID" to "/jobs"). Idea taken from Gmail.

[philrenaud]

Tackled in #14138 and #14165 — marking complete!

[github-actions]

I'm going to lock this issue because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active issues.
If you have found a problem that seems similar to this, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.