Keyboard Shortcuts Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the task list, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the platform, the folds and the text you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Each shortcut stores its keys as platform-free tokens ("mod", "shift", "alt", "N") and capsOf turns them into the caps of the chosen platform, so no shortcut is written twice. The switch starts on the platform the browser reports once the page has loaded (the server renders the Mac caps), and you can flip it to see the other. The list, the Markdown table and the sentence the status line says all read the same choice.

A table of every shortcut, one row each with its group, its action and its caps for the platform that is chosen, written to the clipboard through the browser's own clipboard API; it is not a pretend copy. The status line says "Copied the Mac shortcuts as a Markdown table." (spoken inside the menu, since a modal dialog hides what is around it), and if the browser refuses, which it does on a page not served over HTTPS, it says so.

The head of a group is its first row, with its count and a chevron, so a screen reader meets it as a row you can press: Enter, a click or Space (on the highlighted row) folds or shows the group, and the row says which in words. Searching ignores the folds, because a match is a match: it lists the shortcuts whose name or hidden keywords hold what you typed, under the name of their group.

Yes. Type to search, the arrow keys move through the rows, Enter folds a group or chooses a shortcut and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The platform switch and the copy button are above the input, in the tab order. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The copy shown on load docks to the top of the page at full width instead of the corner, so the keyboard does not cover the foot; the copy button shortens to Copy, the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.