Nav select — accessibility
Keyboard
- Trigger
button.tchip: Tab focuses it; Enter or Space toggles the menu (the click bubbles to the PickerMenu anchor span). - Open menu: focus stays on the chip; Tab walks the
menuitemradiobuttons in DOM order; Enter or Space picks and closes. - No ArrowDown to open, no arrow navigation inside the menu, no Home/End, no type-ahead.
- Esc closes (window listener); scrim
mousedown, anchor scroll and resize also close. - There is no
disabledprop onNavSelect— disable at the call site by not rendering the chip.
ARIA
- Trigger:
aria-haspopup="menu",aria-expanded(from the render propopen); the accessible name is the chip text (icon svg isaria-hidden), i.e. "Řadit Vytvořeno". - Menu:
<Popover role="menu" aria-label={label}>— thelabelprop doubles as the invisible menu name (no visible eyebrow). - Rows:
button[role="menuitemradio"]witharia-checkedon the current option; the.chkicon is a plain span; the row carries its full label intitle(no grey trailing tag (owner 28 Sep 2026, ACRM-375–377)). - No
aria-controlsbetween chip and menu.
Focus
- Chip
:focus-visible= foundation ringoutline: 2px solid var(--accent); outline-offset: 1px(follows--radius-md). - Menu rows match
[role='menuitemradio']:focus-visible→ same foundation outline. - Focus does not move into the menu on open and is not restored to the chip when the menu closes from a row (the row is unmounted → focus on
body).
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- Chip value
.v--ink-900600 12px on--surface-100= 17.59:1 (light), 14.53:1 (dark); on.open--active-surface#eeeff1 = 15.29:1 (light), #2d2f35 = 11.41:1 (dark). - Chip key
.kand chevron--fg-muted12px = 2.85:1 (light) — below AA; 3.63:1 (dark). - Chip base text
--ink-700#303135 on white = 12.99:1; #cccdd1 on #1b1c1f = 10.73:1. - Chip icon
--fg-secondary= 3.93:1 (light) / 6.2:1 (dark) — non-text, passes 3:1. - Chip border
--border-strong1.38:1 / 1.55:1. - Menu row
.nm--ink-900= 17.59:1 / 14.53:1; check--accent4.44:1 / 3.83:1.
Known limits
- The muted key
.k(12px--fg-muted) and the count tag are below AA 4.5:1 in light theme. - No arrow-key menu navigation; each row is a tab stop; focus is not restored on close.
- No
disabledstate in the API or CSS. - The chip's accessible name concatenates key and value with no separator ("Řadit Vytvořeno").
Source: docs/select/nav-select.a11y.md · GitLab