Grid (interactive data grid)

// One cell owns tabindex=0; every other cell is tabindex=-1 (roving tabindex),
// so the whole grid is a SINGLE Tab stop and arrow keys drive navigation.
const [active, setActive] = useState({ row: 0, col: 0 });

function onKeyDown(e, row, col) {
  let r = row, c = col;
  switch (e.key) {
    case "ArrowRight": c = Math.min(col + 1, COL_COUNT - 1); break;
    case "ArrowLeft":  c = Math.max(col - 1, 0); break;
    case "ArrowDown":  r = Math.min(row + 1, ROW_COUNT - 1); break;
    case "ArrowUp":    r = Math.max(row - 1, 0); break;
    case "Home":       c = 0; if (e.ctrlKey) r = 0; break;             // start of row / grid
    case "End":        c = COL_COUNT - 1; if (e.ctrlKey) r = ROW_COUNT - 1; break;
    default: return;   // Tab, typing, etc. behave normally
  }
  e.preventDefault();
  setActive({ row: r, col: c });
  cellRefs.current[r][c].focus();   // move DOM focus to match the roving state
}

<div role="grid" aria-label="Quarterly revenue by region" aria-readonly="true">
  <div role="row">
    <div role="columnheader">Region</div>
    <div role="columnheader">Q1</div>
    {/* … */}
  </div>
  <div role="row">
    <div role="rowheader" tabIndex={isActive ? 0 : -1} onKeyDown={…}>North America</div>
    <div role="gridcell" tabIndex={isActive ? 0 : -1} onKeyDown={…}>820</div>
    {/* … */}
  </div>
</div>