Keyboard Shortcuts Task List Block for React

Only while focus is on a task row. The listener sits on the list band, not on the window, and ignores keys with Ctrl, Cmd or Alt held and keys pressed in a field, so typing a task never triggers a shortcut and the site's own keys are untouched. Single letters are fine here because they only act inside the list; an app with global single-key shortcuts should let people turn them off.

e (or the pencil on a row) swaps that row's title for an input holding the current text, with focus in it. Enter saves it, Escape puts the old title back, and Save and Cancel buttons do the same for a pointer. An empty title is refused with a message. Focus returns to the row after either exit.

It gives the list one tab stop and the right semantics: the row is a toggle button named by its title and pressed when done, aria-current marks the active row, and Enter and Space tick it natively. The checkbox inside is only a drawing of that state, so it is hidden and inert. The edit and delete icons beside it are for pointer and touch; keyboard users have e and Backspace.

Backspace removes the task, moves the active row to its neighbour and shows one line, "Deleted 'x'", with an Undo button that puts the task back at the same position. If you delete the last task, an empty state takes the list's place and focus goes to the add field.

The list resets on reload. In your app write each change from the keyed steps and the handlers (add, saveEdit, undo) to your store. The key map is one small function, keyed, so a different set of keys is a short edit, and the legend reads from KEYS.