Accordion

function AccordionPattern() {
  const [openIds, setOpenIds] = useState(new Set(["shipping"]));
  const headerRefs = useRef({});

  function toggle(id) {
    setOpenIds(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }

  function onKeyDown(e, index) {
    let nextIndex = null;
    if (e.key === "ArrowDown") nextIndex = (index + 1) % SECTIONS.length;
    if (e.key === "ArrowUp") nextIndex = (index - 1 + SECTIONS.length) % SECTIONS.length;
    if (e.key === "Home") nextIndex = 0;
    if (e.key === "End") nextIndex = SECTIONS.length - 1;
    if (nextIndex !== null) {
      e.preventDefault();
      headerRefs.current[SECTIONS[nextIndex].id]?.focus();
    }
  }

  return SECTIONS.map((section, i) => {
    const expanded = openIds.has(section.id);
    return (
      <h3 key={section.id}>
        <button
          ref={el => (headerRefs.current[section.id] = el)}
          aria-expanded={expanded}
          aria-controls={`panel-${section.id}`}
          id={`header-${section.id}`}
          onClick={() => toggle(section.id)}
          onKeyDown={e => onKeyDown(e, i)}
        >
          {section.title}
        </button>
        <div
          id={`panel-${section.id}`}
          role="region"
          aria-labelledby={`header-${section.id}`}
          hidden={!expanded}
        >
          {section.body}
        </div>
      </h3>
    );
  });
}