[WIP] Add aria attributes to menus

client/components/Dropdown/DropdownMenu.jsx

@@ -38,7 +38,7 @@ const DropdownMenu = forwardRef(
     };
 
     return (
-      <div ref={anchorRef} className={className}>
+      <div ref={anchorRef} className={className} aria-haspopup="menu">
         <button
           className={classes.button}
           aria-label={ariaLabel}
@@ -51,6 +51,7 @@ const DropdownMenu = forwardRef(
         </button>
         {isOpen && (
           <DropdownWrapper
+            role="menu"
             className={classes.list}
             align={align}
             onMouseUp={() => {

client/components/Dropdown/MenuItem.jsx

@@ -10,7 +10,7 @@ function MenuItem({ hideIf, ...rest }) {
   }
 
   return (
-    <li>
+    <li role="menuitem">
       <ButtonOrLink {...rest} />
     </li>
   );

client/components/Nav/NavBar.jsx

@@ -69,7 +69,7 @@ function NavBar({ children, className }) {
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
-        <nav className={className} ref={nodeRef}>
+        <nav className={className} ref={nodeRef} role="menubar">
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>

client/components/Nav/NavDropdownMenu.jsx

@@ -23,7 +23,11 @@ function NavDropdownMenu({ id, title, children }) {
   const { isOpen, handlers } = useMenuProps(id);
 
   return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+    <li
+      role="menuitem"
+      className={classNames('nav__item', isOpen && 'nav__item--open')}
+      aria-haspopup="menu"
+    >
       <button {...handlers}>
         <span className="nav__item-header">{title}</span>
         <TriangleIcon
@@ -32,7 +36,7 @@ function NavDropdownMenu({ id, title, children }) {
           aria-hidden="true"
         />
       </button>
-      <ul className="nav__dropdown">
+      <ul className="nav__dropdown" role="menu">
         <ParentMenuContext.Provider value={id}>
           {children}
         </ParentMenuContext.Provider>

client/components/Nav/NavMenuItem.jsx

@@ -18,7 +18,7 @@ function NavMenuItem({ hideIf, className, ...rest }) {
   }
 
   return (
-    <li className={className}>
+    <li className={className} role="menuitem">
       <ButtonOrLink {...rest} {...handlers} />
     </li>
   );