TL;DR

A searchable dropdown built as a custom element — no framework. It opens on focus, click, or chevron, filters as you type, supports the full keyboard, and follows the ARIA combobox pattern. One component, reused across pages, with shared styling — consistent UX and far less duplicated code.

What “accessible” means here

Not an afterthought — the ARIA combobox pattern, wired properly:

  • aria-expanded reflects the open/closed state.
  • aria-activedescendant points at the active option as you arrow through, so screen readers announce it without moving focus off the input.
  • Full keyboard: type to filter, arrow to move, Enter to select, Escape to close.

Why a Web Component, not a framework widget

  • Portable. A custom element drops into any page — templated, static, or framework-rendered — with no runtime dependency.
  • One source of truth. The behavior and styling live in one place and every page gets the same UX.
  • Less to maintain. No library upgrade treadmill for a control this small and this stable.

Key lessons

  • The ARIA combobox pattern is a small, known spec — implement it, don’t improvise.
  • A custom element is the cheapest way to share one interactive control everywhere.
  • Reuse beats re-styling: one component removes a whole class of drift.

The one-line version

A shared, accessible control written once is cheaper than the same dropdown re-styled on every page.