Picker panel — accessibility

Keyboard

• Esc anywhere (captured on document) closes the panel; the host returns focus to its input.
• The panel itself has no focusable chrome; focus lands in the body (autoFocus of Calendar or the time list).
• Tab out of the body: the host's blur logic closes the panel (portalled panel is detected via .dp-panel).

ARIA

• role="dialog" with aria-label from the host; aria-modal="true" only in the mobile sheet.
• Desktop: not modal — the scrim intercepts pointer events but assistive technology can still reach the page.
• The drag handle is a CSS pseudo-element, not in the accessibility tree.

Focus

• No focus trap on desktop; the body's roving tabindex (grid) or listbox keeps arrow navigation inside.
• On mobile the sheet is aria-modal, but there is still no programmatic trap — Esc and scrim close it.
• Focus return is the host's job (onClose); Time field's scrim close does not return focus.

Contrast

• Panel surface --surface-100 with border --border-strong (#dcdbdd on #fff = 1.35:1 light) — separation relies on --shadow-pop, not the border.
• Mobile scrim rgba(0,0,0,.32) dims the page; desktop scrim is transparent.

Known limits

• No focus trap; Tab can leave the panel on desktop (by design, the host closes it) and on mobile (gap).
• The panel closes when the anchor scrolls out of view without any announcement.
• aria-modal on mobile without an actual trap is a mismatch for screen readers.
• Positioning is position: fixed; inside CSS-transformed ancestors the coordinates would be wrong (none in the app today).