v150 · HTML · Accessibility · 2D Navigation

Grid Navigation

focusgroup="listbox wrap nomemory" gives each picker one tab stop and current Chrome 150 listbox semantics. The visual grid adds a small row/column keyboard helper because native 2D grid focusgroup behavior is not part of the current Chrome 150 contract.

Checking focusgroup support…

color picker

Tab to enter the grid, then use arrow keys ← → ↑ ↓ to navigate, Enter/Space to select

focusgroup="listbox wrap nomemory"  — current focusgroup behavior token, with JS row/column movement for this visual grid
Tab to enter ←→↑↓ to move Enter to pick
Click or navigate to a color

emoji picker

Same current attribute — a 6-column visual listbox, fully keyboard navigable

Pick an emoji above

code

<!-- Current Chrome 150 focusgroup syntax uses behavior tokens first. -->
<div
  class="color-grid"
  focusgroup="listbox wrap nomemory"
  role="listbox"
  aria-label="Color picker"
>
  <button class="swatch" role="option" aria-label="Red" style="background:var(--accent-rose)"></button>
  <button class="swatch" role="option" aria-label="Orange" style="background:var(--accent-amber)"></button>
  <!-- ... more swatches ... -->
</div>

<!-- 2D row/column movement is still a visual-grid helper here.
     Current focusgroup covers the single-tab-stop listbox behavior. -->

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗