Country Search

Features

• WAI-ARIA combobox/listbox pattern with aria-expanded, aria-controls, aria-autocomplete, and aria-activedescendant
• Debounced multi-field filtering over name, capital, region, and ISO 3166 alpha-2/alpha-3 codes with relevance ranking — name prefix beats substring, codes beat capital, capital beats region
• Matched-substring highlighting built with safe DOM nodes and a <mark> element across every searchable field
• Region-grouped browse mode with meridian group headers (dashed rule + tabular count) when the query is empty
• Flag stamp wells that flip to a solid accent check stamp on selection — a passport-stamp micro-interaction
• Dashed mono ISO chips and tabular-nums population meta on every row
• Recent routes persisted to localStorage (max 5) with a Clear control
• Skeleton shimmer rows while the async data source resolves
• Empty state with a Tabler icon and a search-hint caption when nothing matches
• Full keyboard support: ArrowUp/ArrowDown with wrap, Home/End, Enter, Escape close-then-clear
• / and Cmd/Ctrl+K focus shortcuts with a visible / hint chip
• Focus scan-line under the field, globe icon tilt, and a soft cascade row entrance
• Polite live region announcing result counts and selection
• Full dark-mode token set driven by a host-shell body.dark class — no built-in toggle

Accessibility

Combobox

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

Active option

aria-activedescendant references the active option id

Listbox

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

Group headers

role="presentation" rows excluded from option navigation

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 Country Search 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.