Practice Keyboard Shortcuts Onboarding Block for React

Only inside the panel. A capture listener on the panel's own element hears keys pressed while focus is in it (a button can't swallow one), and nothing is bound to the page, so the shortcuts never fight the rest of your site. The practice box takes focus on a click or a Tab; the box says so, and it also says that keys outside the panel are ignored.

J, K, C, slash, G then I, and Command or Ctrl with Enter: keys the browser doesn't reserve. Command or Ctrl plus S, N, T or W would be taken by the browser before the page saw them, so they are left out. Edit SHORTCUTS for your own list; a chord is a shortcut with two steps, and a step can ask for Command or Ctrl with mod.

The first key (G) moves the row to “Waiting” and says what to press next. The second key (I) completes it. Any other key goes back to being a first key, and if nothing follows within a second and a half, the wait ends and the status says so. The timer is cleared when the panel unmounts.

The panel renders Command first so the server and the browser agree, then after it loads switches to Ctrl on any system that isn't a Mac or an iPhone. The switch overrides that either way, and a shortcut counts only with the modifier that is showing.

The ticks live in the panel's state and nothing is saved, sent or bound for real: the shortcuts do nothing in the demo but tick. In your app bind the same combinations where they act (the review page) and remember which ones a person has tried if you want the count to persist.

The table keeps its markup but drops its header: each row is the action and its state on one line, with the keys on the line under it. The practice box and Start over stack, with Start over full width.