Feature: Keyboard shortcuts

Links

• Issue #6049

Purpose

Allow people to quickly and easily navigate Cockpit without using a mouse.

Audience

This serves two audiences:

1. Improve accessibility for those who have motor control issues
   • not everyone can use a mouse effectively or easily
   • anyone can easily injure their wrist or fingers — or perhaps might've cut their mouse clicking finger instead of a carrot while making dinner
2. Optimize cockpit for administrators who often use their keyboard more than their mouse
   • our audience has a higher percentage of people who use command prompts, vim, emacs, and rely on keyboard shortcuts in applications and desktop environments

Challanges

• Cross-platform issues (command versus control on Macs)
• OS / Desktop / Browser keyboard grabbing (some hotkeys are reserved)

Goals

• Familiarity
  • try to rely on shortcuts that are similar to desktop applications when possible — sometimes these can be the same exact shortcuts, but other times, due to challenges above, they might have to be only similar
• Memorability
  • Shortcuts should be tested, feel natural, and easy to remember
• Access all of Cockpit via the keyboard in a non-convoluted way
  • That is, one shouldn't have to tab around to everything; some parts of Cockpit should have specific hotkeys

Proposed keyboard shortcuts

• Alt-Esc: Task killer
• ???: Navigation
• ???: Host selector
• ???: Header bar
• ???: Top-left menu
• ???: Dashboard
• ???: Sign out

(Please add more here)

Decided-upon keyboard shortcuts

These shortcuts should be tested across supported platforms (OS & Browser) and agreed upon by the team.

• ...

(There's nothing yet. TBD)

Implementation

1. Figure out keyboard shortcuts for important parts of Cockpit (not everything will have a shortcut, but it should be possible to get to all parts of Cockpit with the keyboard, often with a shortcut and tabbing around and/or arrow keys)
2. Common way to register keyboard shortcuts
3. Keyboard shortcut dialog
   • Displays available keyboard shortcuts
   • Should have its own shortcut

Item number 1 will have to be repeated several times for different parts of Cockpit, as deemed necessary — especially when new features arise or the UI changes.

Existing implementations elsewhere

GNOME keyboard shortcut dialog

[Insert GNOME keyboard shortcut dialog photos here]

Resources

(Note: As far as libraries go, Mousetrap is the most mature and well supported.)

JavaScript

• Mousetrap JS library

React

• React-Hotkeys
• React-Shortcuts

Reference

• Facebook shortcuts (these are cross-platform keyboard shortcuts Facebook uses; we can probably recycle some of these for Cockpit)

• Existing shortcuts

  • OS shortcuts (Windows, Mac, GNOME/KDE), browser shortcuts, and app shortcuts (keep scrolling down for different classes of shortcuts)
  • Browser shortcuts — this looks old, but is probably still relevant (as browser shortcuts don't usually change over time)
  • Keyboard shortcuts shared across all common browsers

• Blog post on overriding default browser shortcuts (with a linked demo) — Take care to not override all or any that are needed for accessibility reasons. Also, not all browsers support overriding all keystrokes. (Generally navigation is not overridable, but many others are.)

  • Demo @ http://sc.robin-drexler.com/blog/prevent_shortcuts.html

Discussion

This effort will be ongoing and require effort from many people in the team at one point or another.