J and K are the only keyboard shortcuts in our whole app, and the only two focus() calls are a heading and a panel

Nakodo's outreach campaigns involve reading lists and deciding yes or no on items presented. The app's design lends itself well to keyboard shortcuts, leading to an audit of every key the app listens for, every focus change, and the proper boundaries. A user can test this without logging in, starting with the card on the home page that provides a short tour. Pressing Escape stops the tour.

Two keyboard shortcuts exist in one file: J and K. They control navigation through a list within a screen. Located in only one place, the component steps through the filtered list, returning to the original filtered view and moving either direction through the list. This is a common shortcut found in many email applications.

The React useEffect function adds a keydown listener to the window. The listener checks for modifiers, such as Cmd, Ctrl, Alt, or defaultPrevented, and skips the handler if any are present. It ensures that the handler only executes if the key is J and there is a next item to navigate to, or if the key is K and there is a previous item to navigate to. Two guards are implemented to prevent unintended behavior.

The focus moves in the app are limited to two separate calls to focus(): a heading and a panel. The rest of the app relies on keyboard shortcuts for navigation. Due to the lack of hotkey libraries, custom command palettes, or accessKey attributes, the only way to programmatically navigate is through the two shortcuts, J and K.