Keyboard Shortcut Card Features Block for React

Edit GROUPS at the top of the file. Each shortcut has the keys shown as key caps, the key to match (match, the value of KeyboardEvent.key in lower case), and flags for mod, shift and alt. mod means Command on a Mac or Control elsewhere, so one entry works on both.

Only while the card has focus: it is a tab stop with a visible focus ring, and its key handler is on the card, not on the page. A shortcut that matches is stopped from reaching the browser (so Control or Command with K does not open the browser's own search while the card is focused), and a key that matches nothing is left alone. Moving focus out of the card clears the highlight.

The card is named "Shortcut sheet. Press a shortcut to highlight it.", each group has a heading, and each table is a real table whose key cell reads as its keys joined with plus, for example "Command plus K". The line under the table is a polite live region that says which shortcut was pressed.

The key caps are the Mac ones, and the hint under the table says Control stands in for Command on Windows and Linux. The handler accepts either key, so pressing Control with K works on a PC and Command with K on a Mac.

The two groups stack, one under the other, and the hint and status line are left out, because there is no keyboard to press them. The tables still read as a reference sheet.

The card fades up once when the page loads and a lit row changes colour with a short transition. With reduced motion both are off and the card simply appears.