Keyboard Shortcuts Settings Block for React

Press Change on a row, then the keys. While a row records, the panel hears every key pressed inside it, through a listener on the panel itself that is removed as soon as recording stops, so nothing is bound on the page. Escape cancels and returns focus to Change; Tab, or clicking away, stops recording and moves on. A bare letter is refused with a reason, because it would stop you typing; a combination needs Ctrl, Cmd or Alt, except the keys F1 to F12. Some combinations are taken by the browser or the system before the page sees them (closing a tab, for one), so they cannot be recorded.

The row says which action has it and shows Replace and Cancel in place of Change and Reset, with focus on Replace. Replace gives the combination to this action and leaves the other one not set, and the status line says so; Cancel keeps what the row had. Reset on a row whose default was taken meanwhile asks the same question. Reset all restores every default at once, and the defaults are all different, so it never conflicts.

Because what a person types and what they read are different jobs. Ctrl and Cmd both record as Mod, and the PC or Mac choice only decides the words printed on the caps: Mod as Ctrl or Cmd, Alt as Alt or Option. A shared account, a remote machine or a keyboard from another system can all differ from what a browser reports, so the choice is theirs. Store combinations as mod+shift+P strings and print them the same way.

Edit ACTIONS: each has an id, a group, a name and its default combination. SAVED holds what the account has stored when the page opens. Nothing leaves the page: Save keeps the edited copy as the saved one and says so in this demo, Discard puts the saved copy back, and the status line counts how many differ. To make it real, send the changed combinations to your API in the save handler and read them where you bind the keys. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.

It filters the table by action name or by the keys as printed for the chosen platform, so typing Option finds the actions that use Alt on a Mac. The frame keeps its height while rows disappear, a group heading goes with its last row, and when nothing matches an empty state offers Clear search. The number of matches is spoken once typing pauses, never on load.

It is a native table with a caption, column headers and the action as each row's header. Each Change button is named for its action and is marked pressed while it records; the keys are read out as one phrase ("Ctrl plus Shift plus P") while the caps are decorative; and the status line is a polite live region that is present from the start. Below the medium breakpoint each action is a card: its name and Changed mark, its keys, then the two buttons side by side.