Add mechanism to turn off keyboard shortcuts (WCAG Level A requirement)

[knowler]

npmx.dev implements single key shortcuts for various actions:

• globally:
  • / focuses search
  • , opens the settings
  • ? highlights the keyboard hints
  • c opens compare
• in search
  • ↑ moves to the previous search result
  • ↓ moves to the next search result
  • Enter goes to the result (i.e. I believe the first)
• in the package view:
  • c opens compare for the package
  • d opens the generated API docs for the package
  • . opens the code for the package

WCAG 2.2 Success Criterion 2.1.4: Character Key Shortcuts (Level A) states:

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

Turn off

A mechanism is available to turn the shortcut off;

Remap

A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt);

Active only on focus

The keyboard shortcut for a user interface component is only active when that component has focus.

Currently none of these conditions are satisfied and so our current implementation fails this success criterion. I discovered this while conducting the broader audit (#1259).

How to meet

If we want to keep shortcuts, the easiest way to meet this requirement is to add a mechanism to turn them off. This should also hide the keyboard hints on the page.

• Add a setting to disable keyboard shortcuts to the settings page.
• Add a note to the keyboard shortcuts modals that links directly to the setting.
• Conditionally render the keyboard hints based on the setting.

Eventually, adding a way to remap the shortcuts could benefit users. For example, when I use NVDA, the screen reader’s default shortcuts override the website (e.g. arrow keys are used to navigate by item, d is used for navigating by landmark, c jumps to a combobox, etc.). Having a way to remap the keyboard shortcuts the website provides could benefit a user like this.