Menu & Menu Button

function MenuButtonPattern() {
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  const buttonRef = useRef(null);
  const itemRefs = useRef([]);

  function openMenu(focusIndex) {
    setOpen(true);
    setActiveIndex(focusIndex);
  }
  function closeMenu(restoreFocus) {
    setOpen(false);
    if (restoreFocus) buttonRef.current?.focus();
  }

  useEffect(() => {
    if (open) itemRefs.current[activeIndex]?.focus();
  }, [open, activeIndex]);

  function onMenuKeyDown(e) {
    if (e.key === "ArrowDown") { e.preventDefault(); setActiveIndex(i => (i + 1) % ITEMS.length); }
    if (e.key === "ArrowUp")   { e.preventDefault(); setActiveIndex(i => (i - 1 + ITEMS.length) % ITEMS.length); }
    if (e.key === "Escape")    { e.preventDefault(); closeMenu(true); }
    // Menus aren't modal — Tab closes and continues to the next element.
    if (e.key === "Tab") closeMenu(false);
    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); closeMenu(true); }
  }

  return (
    <>
      <button
        ref={buttonRef}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls="actions-menu"
        onClick={() => (open ? closeMenu(false) : openMenu(0))}
        onKeyDown={e => {
          if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); openMenu(0); }
          if (e.key === "ArrowUp") { e.preventDefault(); openMenu(ITEMS.length - 1); }
        }}
      >
        Actions
      </button>
      {open && (
        <ul id="actions-menu" role="menu" aria-label="Actions" onKeyDown={onMenuKeyDown}>
          {ITEMS.map((item, i) => (
            <li key={item} role="none">
              <button
                ref={el => (itemRefs.current[i] = el)}
                role="menuitem"
                tabIndex={-1}
                onClick={() => closeMenu(true)}
              >
                {item}
              </button>
            </li>
          ))}
        </ul>
      )}
    </>
  );
}