Complex Shortcut Kbd for React

For commands that are used often enough to need a shortcut but not as often as copy or save, and for variants of a two-key shortcut: Ctrl Shift Z to redo next to Ctrl Z to undo. Keep the most frequent commands on two keys.

Follow the platform: macOS lists ⌃ Control, ⌥ Option, ⇧ Shift, ⌘ Command, in that order, and Windows puts Ctrl first, as in Ctrl Shift P. Then the main key last.

In a keydown listener, check event.ctrlKey (or event.metaKey on Mac) and event.shiftKey, and compare the key. With Shift held, event.key may be an uppercase P, so compare it case-insensitively or use event.code, which is KeyP.

Two modifiers on the left plus a letter is manageable for one hand when the letter is near them. Shortcuts that stretch to the far side of the keyboard are hard to press and harder for people with limited mobility.

A command palette, where people type the command's name, or a sequence like Ctrl K then B, which uses two easy presses instead of one hard one. The Key Sequence with Then example shows how to display it.

Make every command reachable without the shortcut, from a menu or a palette. Operating systems offer sticky keys for people who can't hold several keys, and letting people remap shortcuts helps too.