Info tip

Keyboard

• Native <button>: Tab reaches the (i), Enter and Space toggle the panel.
• Esc closes the panel and returns focus to the (i); it is stopped in the capture phase, so a surrounding Dialog stays open.
• The panel holds no focusable content; focus stays on the button while it is open.

ARIA

• The button has an accessible name from label (default "Vysvětlení"), plus aria-expanded and aria-controls pointing at the panel.
• While open the button is also aria-describedby the panel, so a screen reader reads the explanation right after the name.
• The panel is role="note"; it is portalled, so aria-controls / aria-describedby are the only link to the button — keep them.
• Pass a specific label when one screen has several (i) next to each other ("Vysvětlení: Telefonní čísla").

Focus

• Focus ring 2px solid var(--accent), offset 1px, following --radius-sm.
• Closing by Esc returns focus to the button; closing by an outside tap leaves focus where the user tapped.

Touch

• Hit area --tap-min (44px) on pointer: coarse via ::before; the visible button stays 24px.
• Tapping outside closes the panel (Esc and hover do not exist on a phone).
• The panel stays 16px inside a 390px viewport and flips above the (i) when there is no room below.

Contrast

Ratios from packages/ui/src/tokens/tokens.css (WCAG 2.x):

• Panel text --fg on --surface-100: 17.59:1 (light), 14.53:1 (dark).
• Glyph at rest --fg-secondary (ink-500): #707477 on #ffffff = 4.72:1 (light), #9a9ca1 on #1b1c1f = 6.20:1 (dark) — above the 3:1 non-text minimum (WCAG 1.4.11).
• Glyph hover / open --fg: 17.59:1 (light), 14.53:1 (dark).
• Focus ring --accent: 4.44:1 (light), 3.83:1 (dark).

Known limits

• The glyph is a control, not supporting text, so it uses --fg-secondary, not the lighter --fg-muted (AD 3 Oct 2026).
• The explanation is not visible without interaction — anything a user needs to complete the task must not be only in the panel.
• The panel closes on scroll, so on a phone a scroll gesture that starts on the page dismisses it.