[Menubar] Base implementation of refactored NavBar

client/components/Menubar/MenubarItem.jsx

@@ -3,7 +3,13 @@ import React, { useContext, useMemo } from 'react';
 import ButtonOrLink from '../../common/ButtonOrLink';
 import { MenubarContext, ParentMenuContext } from './contexts';
 
-function MenubarItem({ hideIf, className, ...rest }) {
+function MenubarItem({
+  hideIf,
+  className,
+  role: customRole,
+  selected,
+  ...rest
+}) {
   const parent = useContext(ParentMenuContext);
 
   const { createMenuItemHandlers } = useContext(MenubarContext);
@@ -17,9 +23,12 @@ function MenubarItem({ hideIf, className, ...rest }) {
     return null;
   }
 
+  const role = customRole || 'menuitem';
+  const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};
+
   return (
     <li className={className}>
-      <ButtonOrLink {...rest} {...handlers} role="menuitem" />
+      <ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
     </li>
   );
 }
@@ -32,14 +41,18 @@ MenubarItem.propTypes = {
    * Provides a way to deal with optional items.
    */
   hideIf: PropTypes.bool,
-  className: PropTypes.string
+  className: PropTypes.string,
+  role: PropTypes.oneOf(['menuitem', 'option']),
+  selected: PropTypes.bool
 };
 
 MenubarItem.defaultProps = {
   onClick: null,
   value: null,
   hideIf: false,
-  className: 'nav__dropdown-item'
+  className: 'nav__dropdown-item',
+  role: 'menuitem',
+  selected: false
 };
 
 export default MenubarItem;

client/components/Menubar/MenubarSubmenu.jsx

@@ -25,15 +25,15 @@ export function useMenuProps(id) {
  * MenubarTrigger
  * -----------------------------------------------------------------------------------------------*/
 
-function MenubarTrigger({ id, title, ...props }) {
+function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
   const { isOpen, handlers } = useMenuProps(id);
 
   return (
     <button
       {...handlers}
       {...props}
-      role="menuitem"
-      aria-haspopup="menu"
+      role={role}
+      aria-haspopup={hasPopup}
       aria-expanded={isOpen}
     >
       <span className="nav__item-header">{title}</span>
@@ -48,16 +48,23 @@ function MenubarTrigger({ id, title, ...props }) {
 
 MenubarTrigger.propTypes = {
   id: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired
+  title: PropTypes.node.isRequired,
+  role: PropTypes.string,
+  hasPopup: PropTypes.oneOf(['menu', 'listbox', 'true'])
+};
+
+MenubarTrigger.defaultProps = {
+  role: 'menuitem',
+  hasPopup: 'menu'
 };
 
 /* -------------------------------------------------------------------------------------------------
  * MenubarList
  * -----------------------------------------------------------------------------------------------*/
 
-function MenubarList({ id, children }) {
+function MenubarList({ id, children, role, ...props }) {
   return (
-    <ul className="nav__dropdown" role="menu">
+    <ul className="nav__dropdown" role={role} {...props}>
       <ParentMenuContext.Provider value={id}>
         {children}
       </ParentMenuContext.Provider>
@@ -67,36 +74,62 @@ function MenubarList({ id, children }) {
 
 MenubarList.propTypes = {
   id: PropTypes.string.isRequired,
-  children: PropTypes.node
+  children: PropTypes.node,
+  role: PropTypes.oneOf(['menu', 'listbox'])
 };
 
 MenubarList.defaultProps = {
-  children: null
+  children: null,
+  role: 'menu'
 };
 
 /* -------------------------------------------------------------------------------------------------
  * MenubarSubmenu
  * -----------------------------------------------------------------------------------------------*/
 
-function MenubarSubmenu({ id, title, children }) {
+function MenubarSubmenu({
+  id,
+  title,
+  children,
+  triggerRole: customTriggerRole,
+  listRole: customListRole,
+  ...props
+}) {
   const { isOpen } = useMenuProps(id);
 
+  const triggerRole = customTriggerRole || 'menuitem';
+  const listRole = customListRole || 'menu';
+
+  const hasPopup = listRole === 'listbox' ? 'listbox' : 'menu';
+
   return (
     <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
-      <MenubarTrigger id={id} title={title} />
-      <MenubarList id={id}>{children}</MenubarList>
+      <MenubarTrigger
+        id={id}
+        title={title}
+        role={triggerRole}
+        hasPopup={hasPopup}
+        {...props}
+      />
+      <MenubarList id={id} role={listRole}>
+        {children}
+      </MenubarList>
     </li>
   );
 }
 
 MenubarSubmenu.propTypes = {
   id: PropTypes.string.isRequired,
   title: PropTypes.node.isRequired,
-  children: PropTypes.node
+  children: PropTypes.node,
+  triggerRole: PropTypes.string,
+  listRole: PropTypes.string
 };
 
 MenubarSubmenu.defaultProps = {
-  children: null
+  children: null,
+  triggerRole: 'menuitem',
+  listRole: 'menu'
 };
 
 export default MenubarSubmenu;

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

@@ -266,10 +266,21 @@ const LanguageMenu = () => {
   }
 
   return (
-    <MenubarSubmenu id="lang" title={languageKeyToLabel(language)}>
+    <MenubarSubmenu
+      id="lang"
+      title={languageKeyToLabel(language)}
+      triggerRole="button"
+      listRole="listbox"
+    >
       {sortBy(availableLanguages).map((key) => (
         // eslint-disable-next-line react/jsx-no-bind
-        <MenubarItem key={key} value={key} onClick={handleLangSelection}>
+        <MenubarItem
+          key={key}
+          value={key}
+          onClick={handleLangSelection}
+          role="option"
+          selected={key === language}
+        >
           {languageKeyToLabel(key)}
         </MenubarItem>
       ))}