Flight Board

Features

• Persistent departures board that narrows live as you type — no dropdown, the listbox is the component
• WAI-ARIA combobox/listbox pattern with aria-expanded, aria-controls, aria-autocomplete, and aria-activedescendant
• Debounced live filtering over flight code, city, airline, and destination code, case-insensitive
• Status filter chips (All / On time / Boarding / Delayed) with aria-pressed, combined with the text query
• Columnar instrument layout with an uppercase letter-spaced column rail and mono flight-code, sked, and gate readouts
• Matched-substring highlighting as an underlined accent <mark> built with safe DOM nodes
• Status chips with a leading dot — boarding pulses in the accent, cancelled strikes through its sked time
• Live shown-count readout (07 / 14 shown) in the board header
• Skeleton shimmer rows while the async data source resolves
• Empty state with a Tabler icon when no departure matches
• Full keyboard support: ArrowUp/ArrowDown with wrap, Home/End, Enter, Escape
• Polite live region announcing result counts and selection

Accessibility

Combobox

role="combobox" with aria-expanded, aria-controls, aria-autocomplete

Active row

aria-activedescendant references the active option id

Listbox

role="listbox" with role="option" items and aria-selected

Status chips

aria-pressed toggles within a labeled role="group"

Keyboard nav

Arrow keys with wrap, Home/End, Enter, Escape

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Live regions

aria-live="polite" announcing result counts and selection

Customise it with AI

Open Flight Board in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the filter is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.