Stock Search

Features

• WAI-ARIA combobox/listbox pattern with aria-expanded, aria-controls, aria-autocomplete, and aria-activedescendant
• Debounced live filtering over name, ticker, and sector, case-insensitive
• Matched-substring highlighting built with safe DOM nodes and a <mark> element
• Official brand-logo tiles — inline Simple Icons marks tinted with each company’s brand color, with a ticker-monogram fallback
• Right-aligned price and signed change chip (green up, red down) on every row
• Recent searches persisted to localStorage, shown when the input is focused and empty
• Skeleton shimmer rows while the async data source resolves
• Empty state with a Tabler icon when no stock matches the query
• Full keyboard support: ArrowUp/ArrowDown with wrap, Home/End, Enter, Escape
• / and Cmd/Ctrl+K focus shortcuts with a visible / hint chip
• 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

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 Stock 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.