Sort options available via accessible select or listbox

A sort control built from unsemantic divs or buttons fails WCAG 2.2 SC 4.1.2 (Name, Role, Value) and SC 2.1.1 (Keyboard) — keyboard users cannot tab to the control, screen readers cannot identify it as an interactive dropdown, and arrow-key navigation expected of a listbox never fires. Sorting is a primary navigation mechanism in any results page; locking it behind mouse-only interaction excludes a non-trivial portion of users and makes the directory non-compliant in any context where WCAG conformance is required (government contracts, enterprise procurement, ADA-adjacent legal exposure).

Use a native <select> element for the sort control — it ships with full keyboard navigation, screen reader support, and no ARIA configuration required. In components/SortControl.tsx:

<label htmlFor="sort-select">Sort by</label>
<select
  id="sort-select"
  value={currentSort}
  onChange={e => onChange(e.target.value)}
>
  <option value="relevance">Relevance</option>
  <option value="rating">Highest rating</option>
  <option value="distance">Nearest distance</option>
</select>

If a custom styled dropdown is required for design reasons, use Radix UI's <Select> or shadcn/ui's Select component — both implement the ARIA listbox pattern with correct keyboard navigation. Do not build a custom dropdown from <div> or <button> elements without the full ARIA combobox/listbox implementation.