Add keyboard behaviors to menubar

client/components/Nav/NavBar.jsx

@@ -1,13 +1,52 @@
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import useModalClose from '../../common/useModalClose';
 import { MenuOpenContext, NavBarContext } from './contexts';
+import usePrevious from '../../modules/IDE/hooks/usePrevious';
+import useKeyDownHandlers from '../../common/useKeyDownHandlers';
 
 function NavBar({ children, className }) {
   const [dropdownOpen, setDropdownOpen] = useState('none');
-
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const prevIndex = usePrevious(currentIndex) ?? null;
+  const menuItems = useRef(new Set()).current;
   const timerRef = useRef(null);
 
+  const first = () => {
+    setCurrentIndex(0);
+  };
+  const last = () => {
+    setCurrentIndex(menuItems.size - 1);
+  };
+  const next = () => {
+    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(index);
+  };
+  const prev = () => {
+    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;
+    setCurrentIndex(index);
+  };
+
+  // match focused item to typed character; if no match, focus is not moved
+
+  useEffect(() => {
+    if (currentIndex !== prevIndex) {
+      const items = Array.from(menuItems);
+      const currentNode = items[currentIndex]?.firstChild;
+      const prevNode = items[prevIndex]?.firstChild;
+
+      prevNode?.setAttribute('tabindex', -1);
+      currentNode?.setAttribute('tabindex', 0);
+      currentNode?.focus();
+    }
+  }, [currentIndex, prevIndex, menuItems]);
+
   const handleClose = useCallback(() => {
     setDropdownOpen('none');
   }, [setDropdownOpen]);
@@ -34,6 +73,30 @@ function NavBar({ children, className }) {
     [setDropdownOpen]
   );
 
+  useKeyDownHandlers({
+    ArrowLeft: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      prev();
+    },
+    ArrowRight: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      next();
+    },
+    Home: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      first();
+    },
+    End: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      last();
+    }
+    // keydown event listener for letter keys
+  });
+
   const contextValue = useMemo(
     () => ({
       createDropdownHandlers: (dropdown) => ({
@@ -61,17 +124,26 @@ function NavBar({ children, className }) {
           setDropdownOpen(dropdown);
         }
       }),
-      toggleDropdownOpen
+      toggleDropdownOpen,
+      menuItems
     }),
-    [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur]
+    [
+      setDropdownOpen,
+      toggleDropdownOpen,
+      clearHideTimeout,
+      handleBlur,
+      menuItems
+    ]
   );
 
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
         <div className={className} ref={nodeRef}>
           <MenuOpenContext.Provider value={dropdownOpen}>
-            {children}
+            <ul className="nav__items-left" role="menubar">
+              {children}
+            </ul>
           </MenuOpenContext.Provider>
         </div>
       </header>

client/components/Nav/NavDropdownMenu.jsx

@@ -1,8 +1,36 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, {
+  useContext,
+  useRef,
+  useEffect,
+  useMemo,
+  useState,
+  useReducer,
+  useCallback
+} from 'react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
-import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
+import {
+  MenuOpenContext,
+  NavBarContext,
+  ParentMenuContext,
+  SubmenuContext
+} from './contexts';
+import useKeyDownHandlers from '../../common/useKeyDownHandlers';
+
+const INIT_STATE = {
+  currentIndex: null,
+  prevIndex: null
+};
+
+function submenuReducer(state, { type, payload }) {
+  switch (type) {
+    case 'setIndex':
+      return { ...state, currentIndex: payload, prevIndex: state.currentIndex };
+    default:
+      return state;
+  }
+}
 
 export function useMenuProps(id) {
   const activeMenu = useContext(MenuOpenContext);
@@ -19,30 +47,164 @@ export function useMenuProps(id) {
   return { isOpen, handlers };
 }
 
-function NavDropdownMenu({ id, title, children }) {
+function NavTrigger({ id, title, ...props }) {
+  const submenuContext = useContext(SubmenuContext);
   const { isOpen, handlers } = useMenuProps(id);
 
+  const { isFirstChild, first } = submenuContext;
+
+  useKeyDownHandlers({
+    Space: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      first();
+    },
+    ArrowDown: (e) => {
+      // open the menu and focus on the first item
+    }
+    // handle match to char keys
+  });
+
+  const triggerProps = {
+    ...handlers,
+    ...props,
+    role: 'menuitem',
+    'aria-haspopup': 'menu',
+    'aria-expanded': isOpen,
+    tabIndex: isFirstChild ? 0 : -1
+  };
+
+  return (
+    <button {...triggerProps}>
+      <span className="nav__item-header">{title}</span>
+      <TriangleIcon
+        className="nav__item-header-triangle"
+        focusable="false"
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
+NavTrigger.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired
+};
+
+function NavList({ children, id }) {
+  const submenuContext = useContext(SubmenuContext);
+
+  const { submenuItems, currentIndex, dispatch } = submenuContext;
+
+  const prev = () => {
+    const index = currentIndex === 0 ? submenuItems.size - 1 : currentIndex - 1;
+    dispatch({ type: 'setIndex', payload: index });
+  };
+
+  const next = () => {
+    const index = currentIndex === submenuItems.size - 1 ? 0 : currentIndex + 1;
+    dispatch({ type: 'setIndex', payload: index });
+  };
+
+  useKeyDownHandlers({
+    ArrowUp: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      prev();
+    },
+    ArrowDown: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      next();
+    }
+    // keydown event listener for letter keys
+  });
+
+  const listProps = {
+    role: 'menu'
+  };
+
+  return (
+    <ul className="nav__dropdown" {...listProps}>
+      <ParentMenuContext.Provider value={id}>
+        {children}
+      </ParentMenuContext.Provider>
+    </ul>
+  );
+}
+
+NavList.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node
+};
+
+NavList.defaultProps = {
+  children: null
+};
+
+function NavDropdownMenu({ id, title, children }) {
+  const { isOpen } = useMenuProps(id);
+  const [isFirstChild, setIsFirstChild] = useState(false);
+  const menuItemRef = useRef();
+  const { menuItems } = useContext(NavBarContext);
+  const submenuItems = useRef(new Set()).current;
+  const [state, dispatch] = useReducer(submenuReducer, INIT_STATE);
+  const { currentIndex, prevIndex } = state;
+
+  const first = useCallback(() => {
+    dispatch({ type: 'setIndex', payload: 0 });
+  }, []);
+
+  const last = useCallback(
+    () => dispatch({ type: 'setIndex', payload: submenuItems.size - 1 }),
+    [submenuItems.size]
+  );
+
+  useEffect(() => {
+    const menuItemNode = menuItemRef.current;
+    if (menuItemNode) {
+      if (!menuItems.size) {
+        setIsFirstChild(true);
+      }
+      menuItems.add(menuItemNode);
+    }
+
+    return () => {
+      menuItems.delete(menuItemNode);
+    };
+  }, [menuItems]);
+
+  useEffect(() => {
+    const items = Array.from(submenuItems);
+
+    if (currentIndex !== prevIndex) {
+      const currentNode = items[currentIndex]?.firstChild;
+      currentNode?.focus();
+    }
+  }, [submenuItems, currentIndex, prevIndex]);
+
+  const value = useMemo(
+    () => ({
+      isFirstChild,
+      submenuItems,
+      currentIndex,
+      dispatch,
+      first,
+      last
+    }),
+    [isFirstChild, submenuItems, currentIndex, first, last]
+  );
+
   return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
-      <button
-        {...handlers}
-        role="menuitem"
-        aria-haspopup="menu"
-        aria-expanded={isOpen}
+    <SubmenuContext.Provider value={value}>
+      <li
+        className={classNames('nav__item', isOpen && 'nav__item--open')}
+        ref={menuItemRef}
       >
-        <span className="nav__item-header">{title}</span>
-        <TriangleIcon
-          className="nav__item-header-triangle"
-          focusable="false"
-          aria-hidden="true"
-        />
-      </button>
-      <ul className="nav__dropdown" role="menu">
-        <ParentMenuContext.Provider value={id}>
-          {children}
-        </ParentMenuContext.Provider>
-      </ul>
-    </li>
+        <NavTrigger id={id} title={title} />
+        <NavList id={id}>{children}</NavList>
+      </li>
+    </SubmenuContext.Provider>
   );
 }
 

client/components/Nav/NavMenuItem.jsx

@@ -1,25 +1,51 @@
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useState, useRef, useEffect } from 'react';
 import ButtonOrLink from '../../common/ButtonOrLink';
-import { NavBarContext, ParentMenuContext } from './contexts';
+import { NavBarContext, ParentMenuContext, SubmenuContext } from './contexts';
 
 function NavMenuItem({ hideIf, className, ...rest }) {
+  const [isFirstChild, setIsFirstChild] = useState(false);
+  const menuItemRef = useRef(null);
+  const menubarContext = useContext(NavBarContext);
+  const submenuContext = useContext(SubmenuContext);
+  const { submenuItems } = submenuContext;
   const parent = useContext(ParentMenuContext);
 
-  const { createMenuItemHandlers } = useContext(NavBarContext);
+  const { createMenuItemHandlers } = menubarContext;
 
   const handlers = useMemo(() => createMenuItemHandlers(parent), [
     createMenuItemHandlers,
     parent
   ]);
 
+  useEffect(() => {
+    const menuItemNode = menuItemRef.current;
+    if (menuItemNode) {
+      if (!submenuItems?.size) {
+        setIsFirstChild(true);
+      }
+      submenuItems?.add(menuItemNode);
+    }
+
+    return () => {
+      submenuItems?.delete(menuItemNode);
+    };
+  }, [submenuItems]);
+
   if (hideIf) {
     return null;
   }
 
+  const buttonProps = {
+    ...rest,
+    ...handlers,
+    role: 'menuitem',
+    tabIndex: !submenuContext && isFirstChild ? 0 : -1
+  };
+
   return (
-    <li className={className}>
-      <ButtonOrLink {...rest} {...handlers} role="menuitem" />
+    <li className={className} ref={menuItemRef}>
+      <ButtonOrLink {...buttonProps} />
     </li>
   );
 }