Keyboard Focus Grid Features Block for React

Edit FEATURES at the top of the file: each entry has a name, a short text, a longer detail, an icon and the keys shown as key caps. The grid is three columns by two rows; with another count, change the ring's height and width classes to match the columns and rows.

The four arrow keys move focus one cell and stop at the edges; Enter and Space select the focused cell, as they do on any button. Only one cell is a tab stop (the others have tabindex="-1"), so Tab passes through the grid in one stop and the arrow keys do the rest. In a right-to-left layout the left and right arrows swap, so they follow what you see.

It is one element, laid over the grid, whose position comes from the index of the focused cell through CSS variables, with a CSS transition on translate. It is solid while focus is inside the grid and a faint outline at rest, so a tap on a phone still shows where you are. With reduced motion the transition is off and the ring jumps.

Every cell's detail is laid out in the strip at once, in one grid cell, with all but the visible one invisible. The strip is as tall as the longest, so selecting a cell never moves what is below it. The strip is a polite live region, so a screen reader hears the selected feature's name and detail.

The grid becomes two columns by three rows and the ring uses its own phone positions, so it still lands on the right cell. A tap selects a cell and moves the ring there, and the one-line descriptions drop out of the cells to keep them short; the strip still shows the full detail.

Yes. Nothing is a fixed colour: the frame, the cells, the key caps and the ring use your theme's border, muted and foreground tokens, in light and in dark.