Radio Group

function RadioGroupPattern() {
  const [selected, setSelected] = useState("standard");
  const optionRefs = useRef({});

  function onKeyDown(e, index) {
    let nextIndex = null;
    if (e.key === "ArrowDown" || e.key === "ArrowRight") nextIndex = (index + 1) % OPTIONS.length;
    if (e.key === "ArrowUp" || e.key === "ArrowLeft") nextIndex = (index - 1 + OPTIONS.length) % OPTIONS.length;
    if (nextIndex !== null) {
      e.preventDefault();
      const next = OPTIONS[nextIndex];
      setSelected(next.id); // arrowing selects immediately — no separate activation step
      optionRefs.current[next.id]?.focus();
    }
  }

  return (
    <div role="radiogroup" aria-label="Shipping speed">
      {OPTIONS.map((option, i) => {
        const checked = selected === option.id;
        return (
          <button
            key={option.id}
            ref={el => (optionRefs.current[option.id] = el)}
            role="radio"
            aria-checked={checked}
            tabIndex={checked ? 0 : -1} // roving tabindex: only the checked option is a Tab stop
            onClick={() => setSelected(option.id)}
            onKeyDown={e => onKeyDown(e, i)}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}