demo · v146

Grid navigation

Composite widgets like colour pickers, emoji palettes, and date grids need both axes. Current Chrome pairs a behavior token with block and inline modifiers; this lab visualises the proposed grid routing and writing-mode remapping while keeping unsupported grid tokens out of the live native attribute.

This is the second example in the explainer: an 8×6 colour grid. Tab enters the grid, the active cell remembers, arrow keys move within, Tab exits.

This page uses a small keydown polyfill to visualise focusgroup routing in every browser. Chrome Canary currently rejects the explainer's grid token unless the grid behavior flag is enabled, so the full token string is exposed as data-focusgroup-intent instead of being applied as a native focusgroup attribute.

demo intent: data-focusgroup-intent="listbox block inline grid wrap"

writing-mode: horizontal-tb · inline = left/right · block = up/down

#ffffff

key events

<div role="grid"
     data-focusgroup-intent="listbox block inline grid wrap"
     aria-label="Pick a colour">
  <button class="cell"></button>
  <button class="cell"></button>
  …
</div>
<!-- arrow keys move along both axes; in RTL the visual mapping flips automatically -->

see also