Keyboard Shortcuts Dialog Block for React

So you can see it without a click. On load the sheet is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The header's Shortcuts button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SheetFields component and share the block's state, so what you set in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Focus the Press a shortcut button and press a chord. The block reads the modifiers and the key from the event, matches the chord against the 16 shortcuts on the platform you chose, lights the row and says it in words: "Command K: Search notes. Nothing ran." An unknown chord says "No shortcut for Control J". Nothing runs: the tester only checks the keys and stops the browser's own response while it has focus, so Control P does not print. Tab, Enter, Space and Escape still work as they do anywhere, so the button never traps you. It is hidden on phones, which have no keyboard to press.

Each shortcut is typed once with names for the modifiers (mod, alt, shift) and then the key. The Toggle Group picks a platform, and one table prints mod as the Command symbol or Ctrl, alt as the Option symbol or Alt. A screen reader gets the spoken name instead of the symbol: "Command K", "Control K". The page starts on Mac keys and switches to Windows and Linux after mount when the browser does not report a Mac.

Yes, from anywhere inside the block while no text field has focus. The listener sits on the block's own element, never on the window, so it does not take the key from the rest of the page, and it ignores the key with Command or Control held. In your app attach it to your app shell, keep the same field check, and list the key beside the button with aria-keyshortcuts.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Done and the close button return focus to the Shortcuts button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the Shortcuts button. Each row reads as a list item with its name first and the chord after it.

The copy shown on load docks to the foot of the page as a bottom sheet with Done pinned at the bottom. The three groups stack into one column that scrolls above it, and the key tester is hidden. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.