Listbox (single & multi-select)

function ListboxPattern() {
  const [selected, setSelected] = useState(0);
  const optionRefs = useRef([]);

  function moveTo(index) {
    const clamped = Math.max(0, Math.min(index, OPTIONS.length - 1));
    setSelected(clamped);        // single-select: selection follows focus
    optionRefs.current[clamped]?.focus();
  }

  function onKeyDown(e) {
    if (e.key === "ArrowDown") { e.preventDefault(); moveTo(selected + 1); }
    else if (e.key === "ArrowUp") { e.preventDefault(); moveTo(selected - 1); }
    else if (e.key === "Home") { e.preventDefault(); moveTo(0); }
    else if (e.key === "End") { e.preventDefault(); moveTo(OPTIONS.length - 1); }
  }

  return (
    <ul role="listbox" aria-labelledby="sort-label" tabIndex={-1} onKeyDown={onKeyDown}>
      {OPTIONS.map((option, i) => (
        <li
          key={option}
          role="option"
          aria-selected={i === selected}
          tabIndex={i === selected ? 0 : -1} // roving tabindex
          onClick={() => moveTo(i)}
        >
          {option}
        </li>
      ))}
    </ul>
  );
}