Keyboard Navigable Data Grid Block for React

Arrow keys move one cell. Home and End go to the first and last cell of the row, Ctrl with Home or End to the first and last cell of the grid, and Page Up and Page Down jump five rows. Space toggles the row's check. Enter opens the cell for editing, saves what you typed, and Escape cancels. Tab leaves the grid: there is a single tab stop, not one per cell.

The columns run from the right and Arrow Left and Arrow Right swap so the arrow that points toward a neighbour still moves to it; Home and End still mean the start and the end of the row. The IDs and numbers keep their left-to-right text.

It is a table with role grid, aria-rowcount and aria-colcount, aria-rowindex and aria-colindex on rows and cells, aria-multiselectable, aria-selected on checked rows and aria-readonly on the cells that cannot be edited. The focused cell is announced by the browser, and the status line at the foot only speaks actions, such as a row checked or a cell saved.

Enter keeps the cell open, marks the field invalid and writes the reason in the strip under the grid, in a line that is always reserved. Escape or leaving the field puts the old value back. A title must be 1 to 40 characters, an owner cannot be empty and Points is a whole number from 0 to 99.

The key legend is hidden below the medium breakpoint (its text stays available to screen readers), the grid scrolls sideways inside the window, a tap selects a cell, tapping the box checks a row and the Edit cell button edits the active cell. The window never changes height.

The tasks are typed in the file and edits and checks are this page's state; a reload brings the sample back. For real data, keep the grid and the key handlers, load your rows in place of the sample and send each saved cell from the commit step to your API.