[Menubar] Adds keyboard behaviors to the menubar, improves accessibility

client/common/ButtonOrLink.jsx

@@ -5,23 +5,34 @@ import PropTypes from 'prop-types';
 /**
  * Helper for switching between <button>, <a>, and <Link>
  */
-const ButtonOrLink = ({ href, children, ...props }) => {
+
+const ButtonOrLink = React.forwardRef(({ href, children, ...props }, ref) => {
   if (href) {
     if (href.startsWith('http')) {
       return (
-        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        <a
+          ref={ref}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          {...props}
+        >
           {children}
         </a>
       );
     }
     return (
-      <Link to={href} {...props}>
+      <Link ref={ref} to={href} {...props}>
         {children}
       </Link>
     );
   }
-  return <button {...props}>{children}</button>;
-};
+  return (
+    <button ref={ref} {...props}>
+      {children}
+    </button>
+  );
+});
 
 /**
  * Accepts all the props of an HTML <a> or <button> tag.

client/components/Menubar/Menubar.jsx

@@ -2,18 +2,107 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import useModalClose from '../../common/useModalClose';
 import { MenuOpenContext, MenubarContext } from './contexts';
+import useKeyDownHandlers from '../../common/useKeyDownHandlers';
 
 function Menubar({ children, className }) {
   const [menuOpen, setMenuOpen] = useState('none');
-
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [menuItems, setMenuItems] = useState([]);
+  const [submenuActiveIndex, setSubmenuActiveIndex] = useState(-1);
+  const [submenuItems, setSubmenuItems] = useState([]);
   const timerRef = useRef(null);
+  const nodeRef = useRef(null);
+
+  const registerItem = useCallback((id) => {
+    setMenuItems((prev) => [...prev, id]);
+    return () => {
+      setMenuItems((prev) => prev.filter((item) => item !== id));
+    };
+  }, []);
+
+  const registerSubmenuItem = useCallback((id) => {
+    setSubmenuItems((prev) => [...prev, id]);
+    return () => {
+      setSubmenuItems((prev) => prev.filter((item) => item !== id));
+    };
+  }, []);
+
+  const toggleMenuOpen = useCallback(
+    (menu) => {
+      setMenuOpen((prevState) => (prevState === menu ? 'none' : menu));
+    },
+    [setMenuOpen]
+  );
+
+  const keyHandlers = useMemo(
+    () => ({
+      ArrowUp: (e) => {
+        e.preventDefault();
+        // if submenu is closed, open it and focus the last item
+        if (menuOpen === 'none') {
+          toggleMenuOpen(menuItems[activeIndex]);
+        }
+      },
+      ArrowDown: (e) => {
+        e.preventDefault();
+        // if submenu is closed, open it and focus the first item
+        if (menuOpen === 'none') {
+          toggleMenuOpen(menuItems[activeIndex]);
+        }
+      },
+      ArrowLeft: (e) => {
+        e.preventDefault();
+        // focus the previous item, wrapping around if we reach the beginning
+        const newIndex =
+          (activeIndex - 1 + menuItems.length) % menuItems.length;
+        setActiveIndex(newIndex);
+
+        // if submenu is open, close it
+        if (menuOpen !== 'none') {
+          toggleMenuOpen(menuItems[activeIndex]);
+        }
+      },
+      ArrowRight: (e) => {
+        e.preventDefault();
+        const newIndex = (activeIndex + 1) % menuItems.length;
+        setActiveIndex(newIndex);
+
+        // close the current submenu if it's happen
+        if (menuOpen !== 'none') {
+          toggleMenuOpen(menuItems[activeIndex]);
+        }
+      },
+      Enter: (e) => {
+        e.preventDefault();
+        // if submenu is open, activate the focused item
+        // if submenu is closed, open it and focus the first item
+        toggleMenuOpen(menuItems[activeIndex]);
+      },
+      ' ': (e) => {
+        // same as Enter
+        e.preventDefault();
+        // if submenu is open, activate the focused item
+        // if submenu is closed, open it and focus the first item
+        toggleMenuOpen(menuItems[activeIndex]);
+      },
+      Escape: (e) => {
+        // close all submenus
+        setMenuOpen('none');
+      },
+      Tab: (e) => {
+        // close
+      }
+      // support direct access keys
+    }),
+    [menuItems, menuOpen, activeIndex, toggleMenuOpen]
+  );
+
+  useKeyDownHandlers(keyHandlers);
 
   const handleClose = useCallback(() => {
     setMenuOpen('none');
   }, [setMenuOpen]);
 
-  const nodeRef = useModalClose(handleClose);
-
   const clearHideTimeout = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
@@ -22,16 +111,12 @@ function Menubar({ children, className }) {
   }, [timerRef]);
 
   const handleBlur = useCallback(() => {
-    timerRef.current = setTimeout(() => setMenuOpen('none'), 10);
+    timerRef.current = setTimeout(() => {
+      setMenuOpen('none');
+      setActiveIndex(-1);
+    }, 10);
   }, [timerRef, setMenuOpen]);
 
-  const toggleMenuOpen = useCallback(
-    (menu) => {
-      setMenuOpen((prevState) => (prevState === menu ? 'none' : menu));
-    },
-    [setMenuOpen]
-  );
-
   const contextValue = useMemo(
     () => ({
       createMenuHandlers: (menu) => ({
@@ -57,9 +142,28 @@ function Menubar({ children, className }) {
           setMenuOpen(menu);
         }
       }),
-      toggleMenuOpen
+      toggleMenuOpen,
+      activeIndex,
+      setActiveIndex,
+      registerItem,
+      menuItems,
+      submenuActiveIndex,
+      setSubmenuActiveIndex,
+      registerSubmenuItem,
+      submenuItems
     }),
-    [setMenuOpen, toggleMenuOpen, clearHideTimeout, handleBlur]
+    [
+      menuOpen,
+      toggleMenuOpen,
+      clearHideTimeout,
+      handleBlur,
+      activeIndex,
+      registerItem,
+      menuItems,
+      submenuActiveIndex,
+      registerSubmenuItem,
+      submenuItems
+    ]
   );
 
   return (

client/components/Menubar/MenubarItem.jsx

@@ -1,19 +1,24 @@
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useEffect, useContext, useRef, useMemo } from 'react';
 import ButtonOrLink from '../../common/ButtonOrLink';
-import { MenubarContext, ParentMenuContext } from './contexts';
+import { MenubarContext, SubmenuContext, ParentMenuContext } from './contexts';
 
 function MenubarItem({
+  id,
   hideIf,
   className,
   role: customRole,
   selected,
   ...rest
 }) {
+  const submenuItemRef = useRef(null);
   const parent = useContext(ParentMenuContext);
-
   const { createMenuItemHandlers } = useContext(MenubarContext);
 
+  const { registerSubmenuItem, submenuActiveIndex, submenuItems } = useContext(
+    SubmenuContext
+  );
+
   const handlers = useMemo(() => createMenuItemHandlers(parent), [
     createMenuItemHandlers,
     parent
@@ -25,16 +30,49 @@ function MenubarItem({
 
   const role = customRole || 'menuitem';
   const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};
+  const isActive = submenuItems[submenuActiveIndex] === id; // is this item active in its own submenu?
+
+  useEffect(() => {
+    if (isActive && submenuItemRef.current) {
+      submenuItemRef.current.focus();
+    }
+  }, [isActive, submenuItemRef]);
+
+  useEffect(() => {
+    const unregister = registerSubmenuItem(id);
+    return unregister;
+  }, [id, registerSubmenuItem]);
+
+  useEffect(() => {
+    if (isActive) {
+      console.log('MenubarItem Focus:', {
+        id,
+        isActive,
+        parent,
+        submenuActiveIndex,
+        element: submenuItemRef.current
+      });
+    }
+  }, [isActive, id, parent, submenuActiveIndex]);
 
   return (
     <li className={className}>
-      <ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
+      <ButtonOrLink
+        ref={submenuItemRef}
+        {...rest}
+        {...handlers}
+        {...ariaSelected}
+        role={role}
+        tabIndex={isActive ? 0 : -1}
+        id={id}
+      />
     </li>
   );
 }
 
 MenubarItem.propTypes = {
   ...ButtonOrLink.propTypes,
+  id: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   value: PropTypes.string,
   /**