Keyboard Shortcuts Navbar Block for React

Add a row to PAGES at the top of the file: a label, an icon, a value and the key that follows G. The bar, the sheet, the key handler and the dialog's table all read the list, so a new page gets its link, its caps, its sentence for screen readers and its row in the table. go(value) is the one place a page is chosen: replace its body with your router, and derive the current page from the route instead of the current state.

Pressing G starts a wait of 1.5 seconds (CHORD_MS): the pending cap fades in beside the links, every link shows its caps, and a status line says "G pressed". The next key finishes it: H, P or S goes to that page, any other key cancels it. If nothing is pressed the wait times out and the cap fades away. The listener ignores Shift chords other than the question mark, so capital letters never start a sequence by accident.

No. The listener returns early when the keyboard is in an input, a textarea, a select or an editable element, when Control, Command or Alt is held, and while the shortcuts dialog is open. Browser and screen reader shortcuts that use those modifiers are never intercepted. The keys are single letters, so people who remap or disable them can still use the links, which are ordinary links.

The links sit in a nav named Main, the current one marked aria-current="page". Each link points to a sentence that says how to press its keys ("Shortcut: press G, then P") through aria-describedby; the caps themselves are hidden from screen readers. The Shortcuts button says whether the dialog is open, and the dialog is a modal named Keyboard shortcuts with a keyboard table inside. Whichever way it opened, focus returns to the Shortcuts button when it closes. The button also declares the key with aria-keyshortcuts and names the dialog it controls while it is open. The sequence keys are not declared with aria-keyshortcuts because that attribute describes chords held together, not a sequence.

The keyboard table joins keys with a plus sign, which means "held together". A sequence is not a chord, so each of the three rows passes one string, "G then H", and the table draws it as a single cap. Single keys such as the question mark and Escape are drawn as usual.

Below the md breakpoint the links, the caps and the Shortcuts button are gone, since there is no keyboard to press, and a menu button opens a sheet from the top whose header lines up with the bar, with the three links. Choosing one closes the sheet and Escape returns focus to the menu button. The key listener stays on at every width, so a keyboard attached to a phone or tablet still moves between pages, though no caps are shown. Nothing wraps at 320 pixels.