Color picker — accessibility

Keyboard

The grid is a role="radiogroup" of <button role="radio">. Arrow keys move focus by one swatch (left, right) or one row (up, down); Home and End jump to the first and last. The move does not wrap and does not select — Enter or Space on the focused swatch picks it, which closes the panel.
Every swatch is a real <button> and a Tab stop. The group does not use a roving tabindex, so Tab walks all 24 swatches (a known limit, below).
On open, focus moves to the checked swatch, or to the first one when nothing is chosen, so a keyboard user starts where the current value is.
Escape closes the panel and nothing else: when the picker is opened from a dialog, the dialog stays open. Focus returns to the trigger.
The "Bez barvy" row is a <button> under the grid, one Tab stop after it; Enter or Space picks "no colour".
The foundation focus ring (2 px --accent, 1 px offset) applies to every swatch and is not switched off. It reads apart from the selection ring (canvas gap + --ink-900), so a focused swatch that is not chosen cannot be mistaken for the value.

The group carries role="radiogroup" and an aria-label that names what is chosen (Barva štítku); on a phone the same text is the sheet title. The panel is role="dialog" with the same name.
Each swatch is role="radio" with aria-checked (true for the chosen colour only) and a name in both aria-label and title — the colour is never conveyed by its fill alone. Names are the palette names (Tomato, Sage, …) and Barva <tone> for tones.
The "Bez barvy" row is a button with aria-pressed, true while nothing is chosen. It is not a swatch and not a radio of the group: "no colour" is the absence of a value, and the row sits outside the radiogroup.
The swatch fill is decorative to assistive technology; the name is the content.

The chosen swatch is shown by a ring, not by a check mark inside it. A white check on the light tones had a contrast of 2.1:1 (amber), below the 3:1 required of a graphic object. The ring is drawn against the panel (--bg-canvas gap, then --ink-900), not against the swatch, so it holds on all 24 tones and in both themes.
Selection does not rely on colour alone: the ring is a shape difference.

On a phone the swatch stays 24 px but the touch target is 44 px (--tap-min) through an invisible ::after, centred on the swatch. The row pitch is 48 px, so neighbouring targets never overlap.
The sheet has a grab handle, a title and a full-width Hotovo, and tapping the backdrop closes it — Escape and a tap outside are not enough on a phone.

Computed from packages/ui/src/tokens/tokens.css and the palette:

The selection ring is --ink-900 on the panel surface — above 3:1 in both themes.
The swatch itself is not text; the 24 palette colours are data (Google Calendar), and each one is told apart by name, not only by hue.
The "Bez barvy" label is ink on the panel surface, as every menu row.

All 24 swatches are Tab stops; a roving tabindex (one stop, arrows inside) would shorten the walk and is not built.
Arrow keys stop at the ends of the grid; they do not wrap.
Colour names are the English Google names on purpose; a screen reader in Czech reads them with Czech phonetics.
Several palette colours are close in hue (for example Beetroot and Cherry Blossom); users with colour-vision differences rely on the name or the order, which follows the spectrum.