Add keyboard behaviors to menubar

client/components/Nav/NavBar.jsx

@@ -1,13 +1,35 @@
 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);
 
+  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 +56,69 @@
     [setDropdownOpen]
   );
 
+  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);
+  };
+  const match = (e) => {
+    console.log(e.key);
+    const items = Array.from(menuItems);
+
+    const reorderedItems = [
+      ...items.slice(currentIndex),
+      ...items.slice(0, currentIndex)
+    ];
+
+    const matches = reorderedItems.filter((menuItem) => {
+      const { textContent } = menuItem.firstChild;
+      const firstChar = textContent[0].toLowerCase();
+      return e.key === firstChar;
+    });
+
+    if (!matches.length) {
+      return;
+    }
+
+    const currentNode = items[currentIndex];
+    const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];
+    const index = items.findIndex((item) => item === nextMatch);
+    setCurrentIndex(index);
+  };
+
+  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,9 +146,16 @@
           setDropdownOpen(dropdown);
         }
       }),
-      toggleDropdownOpen
+      toggleDropdownOpen,
+      menuItems
     }),
-    [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur]
+    [
+      setDropdownOpen,
+      toggleDropdownOpen,
+      clearHideTimeout,
+      handleBlur,
+      menuItems
+    ]
   );
 
   return (

client/components/Nav/NavDropdownMenu.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useRef, useEffect, useMemo, useState } from 'react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
@@ -21,14 +21,35 @@ export function useMenuProps(id) {
 
 function NavDropdownMenu({ id, title, children }) {
   const { isOpen, handlers } = useMenuProps(id);
+  const [isFirstChild, setIsFirstChild] = useState(false);
+  const menuItemRef = useRef();
+  const { menuItems } = useContext(NavBarContext);
+
+  useEffect(() => {
+    const menuItemNode = menuItemRef.current;
+    if (menuItemNode) {
+      if (!menuItems.size) {
+        setIsFirstChild(true);
+      }
+      menuItems.add(menuItemNode);
+    }
+
+    return () => {
+      menuItems.delete(menuItemNode);
+    };
+  }, [menuItems]);
 
   return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+    <li
+      className={classNames('nav__item', isOpen && 'nav__item--open')}
+      ref={menuItemRef}
+    >
       <button
         {...handlers}
         role="menuitem"
         aria-haspopup="menu"
         aria-expanded={isOpen}
+        tabIndex={isFirstChild ? 0 : -1}
       >
         <span className="nav__item-header">{title}</span>
         <TriangleIcon

client/modules/IDE/components/Header/Nav.jsx

@@ -247,6 +247,7 @@ const ProjectMenu = () => {
         </NavMenuItem>
         <NavMenuItem href="/about">{t('Nav.Help.About')}</NavMenuItem>
       </NavDropdownMenu>
+      {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
     </ul>
   );
 };
@@ -276,17 +277,16 @@ const UnauthenticatedUserMenu = () => {
   const { t } = useTranslation();
   return (
     <ul className="nav__items-right" title="user-menu" role="navigation">
-      {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
       <li className="nav__item">
-        <Link to="/login" className="nav__auth-button" role="menuitem">
+        <Link to="/login" className="nav__auth-button">
           <span className="nav__item-header" title="Login">
             {t('Nav.Login')}
           </span>
         </Link>
       </li>
       <li className="nav__item-or">{t('Nav.LoginOr')}</li>
       <li className="nav__item">
-        <Link to="/signup" className="nav__auth-button" role="menuitem">
+        <Link to="/signup" className="nav__auth-button">
           <span className="nav__item-header" title="SignUp">
             {t('Nav.SignUp')}
           </span>

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -513,6 +513,7 @@ exports[`Nav renders editor version for desktop 1`] = `
             aria-expanded="false"
             aria-haspopup="menu"
             role="menuitem"
+            tabindex="0"
           >
             <span
               class="nav__item-header"
@@ -547,6 +548,7 @@ exports[`Nav renders editor version for desktop 1`] = `
             aria-expanded="false"
             aria-haspopup="menu"
             role="menuitem"
+            tabindex="-1"
           >
             <span
               class="nav__item-header"
@@ -614,6 +616,7 @@ exports[`Nav renders editor version for desktop 1`] = `
             aria-expanded="false"
             aria-haspopup="menu"
             role="menuitem"
+            tabindex="-1"
           >
             <span
               class="nav__item-header"
@@ -690,6 +693,7 @@ exports[`Nav renders editor version for desktop 1`] = `
             aria-expanded="false"
             aria-haspopup="menu"
             role="menuitem"
+            tabindex="-1"
           >
             <span
               class="nav__item-header"

client/modules/IDE/hooks/usePrevious.js

@@ -0,0 +1,12 @@
+/* https://usehooks.com/usePrevious/ */
+import React, { useRef, useEffect } from 'react';
+
+export default function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}