@a11y-context/mcp-server 0.1.0

package/corpus/web/react/components/navigation-menu.dropdown.md

@@ -0,0 +1,220 @@
+---
+id: navigation-menu.dropdown
+title: Navigation Dropdown
+stack: web/react
+status: beta
+latest_version: 0.1.0
+tags: [navigation, dropdown, disclosure, account-menu, avatar-menu, header]
+aliases: [account dropdown, user menu, avatar menu, profile menu, nav dropdown, links dropdown, account menu, header dropdown]
+summary: A single-trigger, non-modal dropdown that reveals a short list of navigation links and optional actions, using a native button with aria-expanded plus DOM show/hide, and never role="menu".
+---
+
+# Navigation Dropdown
+
+Pattern ID: `navigation-menu.dropdown`
+
+A single-trigger, non-modal dropdown that reveals a short list of navigation links and optional actions, using a native `<button>` with `aria-expanded` plus DOM show/hide, and never `role="menu"`.
+
+This is a disclosure of links, not an ARIA menu. The revealed content is primarily navigation destinations (with an optional trailing action such as "Sign out"), so it uses `aria-expanded` alone as the state signal and does not use `role="menu"` or `aria-haspopup`.
+
+## Use When
+- Use when a single dedicated control reveals a compact set of navigation destinations (e.g., an avatar button or an "Account" button opening "Profile", "Settings", "Billing").
+- Use when the revealed content is short and stable, typically 3-10 items that are primarily links.
+- Use when the revealed list ends in an optional single incidental action alongside the links (e.g., "Sign out").
+
+## Do Not Use When
+- Do not use when the site navigation is a bar of several top-level items or sibling dropdowns (use `navigation-menu.basic`).
+- Do not use when the revealed items are primarily in-place commands or actions that need arrow-key navigation and `role="menu"` (use `menu.basic`).
+- Do not use when the control chooses a value to submit in a form (use `select.native`).
+- Do not use when the trigger shows and hides arbitrary non-navigational content (use `disclosure.basic`).
+
+## Must Haves
+
+### Roles & structure
+- Use a native `<button>` (preferred), or `role="button"` only when a native button cannot be used.
+  - If `role="button"` is used instead of a native `<button>`, add `tabindex="0"` and keyboard support for Enter and Space, ensuring Space prevents page scrolling while activating the control.
+- The list is shown/hidden in the DOM (e.g., via the `hidden` attribute), so that when closed, its content cannot be reached by keyboard or screen readers.
+- Items are contained in a list structure (`<ul><li>…</li></ul>`) holding links and an optional trailing action `<button>`.
+  - Any links and buttons comply with the rules for the `link.basic` and `button.basic` patterns.
+
+### Accessible name
+- The button has an accessible name that describes its purpose or action.
+  - For an icon-only avatar button, provide an accessible name using `aria-label` or `aria-labelledby`.
+- Icons within the button are decorative (`aria-hidden="true"`).
+
+### State & properties
+- The button reflects open state with `aria-expanded="true|false"`.
+- The button is associated with the list container via `aria-controls="IDREF"`.
+- The button does not carry `aria-haspopup`.
+  - A list of links is not a menu, listbox, tree, grid, or dialog, so `aria-haspopup` announces a widget that is not present; `aria-expanded` alone is the correct signal.
+
+### Focus
+- When the dropdown opens, focus remains on the invoking button.
+  - Keyboard users reach the first item with Tab.
+- The dropdown does not trap focus. Users can Tab through the items and continue to the rest of the page.
+- Ensure a visible focus state (e.g., a 2px solid outline offset by 1-2px) around the invoking button and every item inside the list.
+
+### Dismissal
+- When focus moves outside the button and list (Tab away, click elsewhere), the dropdown closes.
+- Esc closes the dropdown and returns focus to the invoking button (use `requestAnimationFrame` for the focus restore).
+
+## Customizable
+- Whether the list contains only links or links plus a single trailing action button (e.g., "Sign out").
+- Whether the dropdown closes when an item is activated (often yes).
+- Positioning of the list (left/right alignment, above/below) as long as DOM order and focus order remain logical.
+- The disclosure indicator (e.g., a down caret) is decorative and may be omitted; when present it is marked `aria-hidden="true"` and does not replace the button's accessible name.
+- Accessible labeling strategy:
+  - The button label may be visible text (e.g., "Account") or, for an icon-only avatar button, an `aria-label` or `aria-labelledby`.
+  - The list may carry an optional `aria-label` (e.g., `aria-label="Account"`).
+
+## Don'ts
+- Do not use `role="menu"` or `role="menuitem"`; the items are links in a list, not menu commands.
+- Do not add `aria-haspopup` to the button; it announces a menu that is not there.
+- Do not render the button without `aria-expanded`; state alone is what conveys open or closed.
+- Do not make hover or pointer click the only way to open the dropdown; opening must also work with keyboard Enter and Space.
+- Do not leave the list visible while `aria-expanded="false"` (and vice versa).
+- Do not close the dropdown in a way that strands focus (e.g., removing the focused element without moving focus).
+- Do not let a hidden dropdown be the only path to a destination; expose those links elsewhere on the site as well.
+
+## Golden Pattern
+
+Structural reference for AI coding assistants — semantics, focus, and keyboard behavior. Styling, copy, and demo data are illustrative.
+
+```jsx
+"use client";
+
+export function NavigationDropdown() {
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef(null);
+  const listRef = useRef(null);
+
+  const baseId = useId();
+  const buttonId = `${baseId}-button`;
+  const listId = `${baseId}-list`;
+
+  const close = useCallback(() => setOpen(false), []);
+  const toggle = useCallback(() => setOpen((v) => !v), []);
+
+  // Close on outside pointer press (non-modal disclosure).
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const btn = btnRef.current;
+      const list = listRef.current;
+      if (!btn || !list) return;
+      if (!btn.contains(e.target) && !list.contains(e.target)) close();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, close]);
+
+  // Close when focus leaves button + list.
+  useEffect(() => {
+    if (!open) return;
+    const onFocusIn = (e) => {
+      const btn = btnRef.current;
+      const list = listRef.current;
+      if (!btn || !list) return;
+      if (!btn.contains(e.target) && !list.contains(e.target)) close();
+    };
+    document.addEventListener("focusin", onFocusIn, true);
+    return () => document.removeEventListener("focusin", onFocusIn, true);
+  }, [open, close]);
+
+  // Esc closes and returns focus to the trigger.
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      close();
+      // rAF defers focus until React flushes the close and the trigger is focusable again.
+      requestAnimationFrame(() => btnRef.current?.focus());
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [open, close]);
+
+  // Close on Tab past the last item and Shift+Tab before the first item.
+  const onListKeyDown = (e) => {
+    if (!open || e.key !== "Tab") return;
+
+    const list = listRef.current;
+    if (!list) return;
+
+    const focusables = Array.from(
+      list.querySelectorAll(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    if (!focusables.length) return;
+
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    if (!e.shiftKey && document.activeElement === last) close();
+    if (e.shiftKey && document.activeElement === first) close();
+  };
+
+  return (
+    <div>
+      {/* No aria-haspopup: a list of links is not a menu. aria-expanded is the state signal. */}
+      <button
+        ref={btnRef}
+        id={buttonId}
+        type="button"
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={listId}
+        onClick={toggle}
+      >
+        Account <span aria-hidden="true">▼</span>
+      </button>
+
+      <ul
+        id={listId}
+        ref={listRef}
+        hidden={!open}
+        aria-label="Account"
+        onKeyDown={onListKeyDown}
+      >
+        {ACCOUNT_LINKS.map((item) => (
+          <li key={item.href}>
+            <a href={item.href}>{item.label}</a>
+          </li>
+        ))}
+        <li>
+          <button type="button" onClick={() => alert("Signed out")}>
+            Sign out
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+const ACCOUNT_LINKS = [
+  { label: "Profile", href: "/account/profile" },
+  { label: "Watchlist", href: "/account/watchlist" },
+  { label: "Subscription", href: "/account/subscription" },
+  { label: "Settings", href: "/account/settings" },
+];
+```
+
+## Acceptance Checks
+
+Keyboard
+- Tab reaches the invoking button.
+- Enter or Space opens the dropdown; focus remains on the button.
+- Tab moves from the button into the first item, then through each item, then out to the next focusable element on the page.
+- Tab from the last item closes the dropdown and moves to the next focusable element after it.
+- Shift+Tab from the first item closes the dropdown and moves focus back to the button.
+- Esc closes the dropdown and returns focus to the button.
+- If focus moves outside the button and list (Tab away or click elsewhere), the dropdown closes.
+
+Screen Reader
+- The button announces expanded/collapsed state via `aria-expanded`; the attribute is present and flips between `"true"` and `"false"` on every open and close.
+- The button is not announced as a menu; no `role="menu"` or `aria-haspopup` is present.
+- The button exposes an accessible name (visible text or `aria-label`/`aria-labelledby` on an icon-only avatar button).
+- When closed, the items are not reachable.
+- When open, the list and its items are reachable in reading and focus order.
+- Items announce as links and navigate correctly; the trailing action announces as a button and activates correctly.

package/corpus/web/react/components/select.basic.md

@@ -0,0 +1,318 @@
+---
+id: select.basic
+title: Select
+stack: web/react
+status: beta
+latest_version: 0.2.0
+tags: [select, form, form-select, listbox, dropdown]
+aliases: [form select, styled select, listbox select, dropdown select]
+summary: A custom-styled form select that matches native <select> behavior using a button trigger + listbox popup, and a visually hidden native <select> for form submission and browser autofill.
+---
+
+# Select
+
+Pattern ID: `select.basic`
+
+A custom-styled form select that matches native `<select>` behavior using a button trigger + listbox popup, and a visually hidden native `<select>` for form submission and browser autofill.
+
+Native `<select>` elements are accessible out of the box. This pattern applies only when building a **custom-styled** select input.
+
+## Use When
+- Use when a form input must allow selecting **one option** from a predefined set.
+- Use when the options are short labels and the selection is discrete (not freeform text).
+- Use for primary or secondary forms anywhere on a site or application.
+
+## Do Not Use When
+- Do not use when a native `<select>` styled with CSS meets the need (use `select.native`).
+- Do not use when the user needs to type to filter a large list (use `combobox.autocomplete`).
+- Do not use when multiple selections are required (use `listbox.basic`).
+- Do not use for navigation menus or account menus (use `navigation-menu.basic` or `navigation-menu.dropdown`).
+
+## Must Haves
+- Provide a visible label for the field. Prefer a native `<label>` and ensure the custom UI is programmatically associated with the label (see `aria-labelledby` below).
+- Include a **visually hidden native `<select>`** (required).
+  - The hidden `<select>` includes the same options and current value as the custom UI.
+  - The hidden `<select>` includes form attributes as needed (e.g., `name`, `required`, `disabled`).
+  - The hidden `<select>` is not focusable (so users don't tab to both controls).
+- The visible interactive control is a native `<button>` (preferred) or `role="button"` only when a native button cannot be used.
+  - If using `role="button"`, add `tabindex="0"` and keyboard support for Enter and Space, ensuring Space prevents page scrolling while activating.
+- The button must expose "opens a listbox" semantics and state:
+  - `aria-haspopup="listbox"`
+  - `aria-expanded="true|false"` reflecting open/closed
+  - `aria-controls="IDREF"` pointing to the listbox element
+- The button must have an accessible name that includes the field label and current value.
+  - Recommended: `aria-labelledby="{labelId} {valueId}"` where:
+    - `labelId` references the label element
+    - `valueId` references an element containing the currently selected value text
+- The popup must use listbox semantics:
+  - The popup contains one element with `role="listbox"` and a stable ID (the same one referenced by `aria-controls`).
+  - Each option uses `role="option"` and has a stable ID.
+  - Each option exposes selection with `aria-selected="true|false"`.
+- When the listbox is open, the "currently active" option is programmatically indicated (recommended).
+  - Preferred approach: keep focus on the button and set `aria-activedescendant="{optionId}"` on the button to point to the active option.
+- The listbox must be shown/hidden in the DOM so that when closed it cannot be reached by keyboard or screen readers (e.g., via `hidden`).
+- Keyboard UX must match native `<select>` expectations:
+  - Tab / Shift+Tab moves focus to/from the button like a normal form field (no focus trap).
+  - Enter or Space on the button opens the listbox.
+  - When open:
+    - Arrow Up/Down moves the active option.
+    - Enter or Space selects the active option and closes the listbox.
+    - Esc closes the listbox and returns the user to the button state.
+  - Clicking/tapping outside closes the listbox.
+- Screen reader UX must match native `<select>` expectations:
+  - The label and current value are announced together (via `aria-labelledby`).
+  - Expanded/collapsed state is announced (via `aria-expanded`).
+  - The user can perceive which option is selected (`aria-selected`).
+  - The user can perceive which option is currently active when navigating (`aria-activedescendant` recommended).
+- Ensure a visible focus state (e.g., a 2px solid outline offset by 1-2px) around the button that opens the select, and all option elements inside.
+
+## Customizable
+- Whether Arrow Up/Down changes selection while closed vs opens then moves active option.
+  - Choose one behavior and test with keyboard + screen readers.
+- Whether the listbox closes immediately after selection (usually yes for single-select).
+- Visual styling (caret icon, borders, spacing, animation), as long as it does not replace accessible naming.
+- Optional grouping or separators, as long as listbox/option semantics remain correct and options remain navigable.
+
+## Don'ts
+- Do not omit the visually hidden native `<select>` when this control participates in form submission or should support autofill.
+- Do not implement the trigger as a non-interactive element (e.g., `<div>`) without button semantics.
+- Do not use `role="menu"` / `role="menuitem"` for select options.
+- Do not make each option tabbable (avoid forcing users to Tab through options).
+- Do not leave the listbox visible while `aria-expanded="false"` (and vice versa).
+- Do not allow the custom UI and hidden `<select>` to get out of sync (options/value must match).
+
+## Golden Pattern
+
+Structural reference for AI coding assistants — semantics, focus, and keyboard behavior. Styling, copy, and demo data are illustrative.
+
+```jsx
+"use client";
+
+const OPTIONS = [
+  { value: "red", label: "Red" },
+  { value: "orange", label: "Orange" },
+  { value: "yellow", label: "Yellow" },
+  { value: "green", label: "Green" },
+];
+
+// Visually-hidden styles matching the global sr-only utility (global.sr-only).
+const srOnlySelectStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+};
+
+export function CustomSelectBasic() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("red");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const rootRef = useRef(null);
+  const btnRef = useRef(null);
+
+  const labelId = "color-select-label";
+  const valueId = "color-select-value";
+  const listboxId = "color-select-listbox";
+  const nativeId = "color-select-native";
+
+  const selectedIndex = useMemo(
+    () => Math.max(0, OPTIONS.findIndex((o) => o.value === value)),
+    [value],
+  );
+
+  const selected = OPTIONS[selectedIndex];
+
+  function openListbox() {
+    setActiveIndex(selectedIndex);
+    setOpen(true);
+  }
+
+  function closeListbox() {
+    setOpen(false);
+  }
+
+  function chooseIndex(idx) {
+    const opt = OPTIONS[idx];
+    if (!opt) return;
+    setValue(opt.value);
+    setActiveIndex(idx);
+    closeListbox();
+    requestAnimationFrame(() => btnRef.current?.focus());
+  }
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+
+    function onPointerDown(e) {
+      const root = rootRef.current;
+      if (!root) return;
+      if (!root.contains(e.target)) closeListbox();
+    }
+
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  // Close when tabbing away (no focus trap).
+  function onBlurCapture(e) {
+    if (!open) return;
+    const root = rootRef.current;
+    const next = e.relatedTarget;
+    if (!root || !next) return;
+    if (!root.contains(next)) closeListbox();
+  }
+
+  function moveActive(delta) {
+    setActiveIndex((i) => {
+      const next = Math.max(0, Math.min(OPTIONS.length - 1, i + delta));
+      return next;
+    });
+  }
+
+  function onTriggerClick() {
+    if (open) closeListbox();
+    else openListbox();
+  }
+
+  function onTriggerKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!open) openListbox();
+        moveActive(+1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open) openListbox();
+        moveActive(-1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!open) openListbox();
+        else chooseIndex(activeIndex);
+        break;
+      case "Escape":
+        if (open) {
+          e.preventDefault();
+          closeListbox();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      onBlurCapture={onBlurCapture}
+      style={{ display: "inline-block", position: "relative" }}
+    >
+      <label id={labelId} htmlFor={nativeId} style={{ display: "block" }}>
+        Favorite color
+      </label>
+
+      {/* Visually hidden native select (required for forms/autofill) */}
+      <select
+        id={nativeId}
+        name="favoriteColor"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        style={srOnlySelectStyle}
+        aria-hidden="true"
+        tabIndex={-1}
+      >
+        {OPTIONS.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+
+      <button
+        ref={btnRef}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={listboxId}
+        aria-labelledby={`${labelId} ${valueId}`}
+        aria-activedescendant={open ? `${listboxId}-opt-${activeIndex}` : undefined}
+        onClick={onTriggerClick}
+        onKeyDown={onTriggerKeyDown}
+        style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
+      >
+        <span id={valueId}>{selected.label}</span>
+        <span aria-hidden="true">▼</span>
+      </button>
+
+      <ul
+        id={listboxId}
+        role="listbox"
+        aria-labelledby={labelId}
+        hidden={!open}
+        style={{
+          position: "absolute",
+          zIndex: 10,
+          top: "calc(100% + 0.25rem)",
+          left: 0,
+          listStyle: "none",
+          margin: 0,
+          padding: 4,
+          border: "1px solid #ccc",
+          background: "white",
+          maxHeight: 160,
+          overflow: "auto",
+        }}
+      >
+        {OPTIONS.map((opt, idx) => {
+          const isSelected = opt.value === value;
+          const isActive = idx === activeIndex;
+
+          return (
+            <li
+              key={opt.value}
+              id={`${listboxId}-opt-${idx}`}
+              role="option"
+              aria-selected={isSelected ? "true" : "false"}
+              onMouseEnter={() => setActiveIndex(idx)}
+              onMouseDown={(e) => e.preventDefault()} // keep focus on button
+              onClick={() => chooseIndex(idx)}
+              style={{
+                padding: "6px 8px",
+                cursor: "default",
+                outline: isActive ? "2px solid #888" : "none",
+              }}
+            >
+              {opt.label}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+```
+
+## Acceptance Checks
+
+Keyboard
+- Tab focuses the trigger button; Shift+Tab moves away normally.
+- Enter or Space on the trigger opens the listbox.
+- When open, Arrow Up/Down moves the active option.
+- Enter or Space selects the active option and closes the listbox.
+- Esc closes the listbox and leaves focus on the trigger.
+- Tab does not move through every option (no focus trap / no tabbing each option).
+
+Screen Reader
+- The trigger is announced with "has popup" and expanded/collapsed state (from aria-haspopup="listbox" + aria-expanded).
+- The listbox is announced as a listbox, and options are announced as options.
+- The selected option is conveyed via aria-selected="true".
+- The active option is conveyed while navigating (e.g., via aria-activedescendant).

package/corpus/web/react/components/select.native.md

@@ -0,0 +1,108 @@
+---
+id: select.native
+title: Native Select
+stack: web/react
+status: beta
+latest_version: 0.1.0
+tags: [select, native-select, form, form-control, dropdown, picker]
+aliases: [native select, html select, select element, dropdown, form select, single-select, option picker, select box]
+summary: A native select element styled with CSS, the default single-value form control; retains native keyboard, mobile, dismissal, and assistive-technology behavior.
+---
+
+# Native Select
+
+Pattern ID: `select.native`
+
+A native `<select>` element styled with CSS, the default single-value form control; retains native keyboard, mobile, dismissal, and assistive-technology behavior.
+
+This is the first-choice control for single selection. Reach for a custom `select.basic` only when the native element cannot meet a hard requirement.
+
+## Use When
+- Use when a form field selects one value from a preset list of plain-text options (e.g., "Sort by", "Country", "Subscription plan").
+- Use when native keyboard support, mobile pickers, dismissal, form submission, and assistive-technology support are wanted without re-implementation.
+- Use when single selection is needed and no requirement forces a custom widget (this is the default choice).
+
+## Do Not Use When
+- Do not use when the option list needs rich or interactive content the native control cannot render (use `select.basic`).
+- Do not use when the user must type to filter a large list (use `combobox.autocomplete`).
+- Do not use when multiple selection is required (use `listbox.basic`; a checkbox group is often better).
+- Do not use when the control performs actions rather than choosing a value (use `menu.basic`).
+
+## Must Haves
+- Use a native `<select>` element with native `<option>` elements.
+- Provide a visible label associated with the `<select>` via a native `<label>` using `for`/`id`.
+- The `<select>` participates in the form via a `name` attribute, and uses native attributes (`required`, `disabled`) as needed.
+- Keep option content as plain text.
+- Style the control with CSS only (`appearance` and related properties).
+- Ensure a visible focus state (e.g., a 2px solid outline offset by 1-2px) around the `<select>` control.
+
+## Customizable
+- The modern customizable-select CSS (`appearance: base-select` with the picker pseudo-elements and the `:open` state) may be used where browser support allows, with the classic approach of styling only the closed control as the fallback where support is absent.
+- `<optgroup>` may be used to group related options under visible group labels.
+- The arrow indicator styling is at the engineer's discretion as long as the control keeps its 3:1 non-text contrast and native behavior.
+
+## Don'ts
+- Do not rebuild the select with `<div>` elements and scripting when a native `<select>` suffices.
+- Do not remove the native element in favor of a custom widget for styling reasons alone.
+- Do not replace native behavior with scripting.
+- Do not use the `multiple` attribute (native multi-select tests very poorly).
+- Do not hide the label.
+
+## Golden Pattern
+
+Structural reference for AI coding assistants — semantics, focus, and keyboard behavior. Styling, copy, and demo data are illustrative.
+
+```jsx
+"use client";
+
+export function NativeSelectDemo() {
+  const [value, setValue] = useState("trending");
+
+  return (
+    <div>
+      {/* Native label associated by for/id; do not hide the label */}
+      <label htmlFor="sort-order-select" style={{ display: "block" }}>
+        Sort titles by
+      </label>
+
+      {/* Native select retains keyboard, mobile picker, and AT behavior.
+          appearance is set for styling; when overriding the native arrow,
+          supply a replacement affordance that keeps 3:1 non-text contrast. */}
+      <select
+        id="sort-order-select"
+        name="sortOrder"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        style={{ appearance: "none" }}
+      >
+        {SORT_OPTIONS.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+const SORT_OPTIONS = [
+  { value: "trending", label: "Trending now" },
+  { value: "newest", label: "Recently added" },
+  { value: "az", label: "Title A to Z" },
+  { value: "rating", label: "Highest rated" },
+];
+```
+
+## Acceptance Checks
+
+Keyboard
+- Tab moves focus to the `<select>`, which shows a visible focus indicator.
+- Type-ahead and Arrow Up/Down move through the options natively.
+- Enter, Space, and Esc behave as the native control defines (opening, selecting, and dismissing).
+
+Screen Reader
+- The control is announced with its label and current value as a native select.
+- Options are announced as the user moves through the list.
+
+Form
+- Submitting the form sends the selected value under the field name `sortOrder`.