From 7855b1fa74661e10c360a17805ac6e297964448a Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Sat, 27 Jan 2024 14:25:25 -0600
Subject: [PATCH] Add aria attributes to menus.

---
 client/components/Dropdown/DropdownMenu.jsx | 3 ++-
 client/components/Dropdown/MenuItem.jsx     | 2 +-
 client/components/Nav/NavBar.jsx            | 2 +-
 client/components/Nav/NavDropdownMenu.jsx   | 8 ++++++--
 client/components/Nav/NavMenuItem.jsx       | 2 +-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/components/Dropdown/DropdownMenu.jsx b/client/components/Dropdown/DropdownMenu.jsx
index da41b30101..3371d1d6cc 100644
--- a/client/components/Dropdown/DropdownMenu.jsx
+++ b/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={() => {
diff --git a/client/components/Dropdown/MenuItem.jsx b/client/components/Dropdown/MenuItem.jsx
index 8b6f6d7247..a7908e487d 100644
--- a/client/components/Dropdown/MenuItem.jsx
+++ b/client/components/Dropdown/MenuItem.jsx
@@ -10,7 +10,7 @@ function MenuItem({ hideIf, ...rest }) {
   }
 
   return (
-    <li>
+    <li role="menuitem">
       <ButtonOrLink {...rest} />
     </li>
   );
diff --git a/client/components/Nav/NavBar.jsx b/client/components/Nav/NavBar.jsx
index e57a627c83..f5a072be97 100644
--- a/client/components/Nav/NavBar.jsx
+++ b/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>
diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx
index 7fb8eda34f..6af6427068 100644
--- a/client/components/Nav/NavDropdownMenu.jsx
+++ b/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>
diff --git a/client/components/Nav/NavMenuItem.jsx b/client/components/Nav/NavMenuItem.jsx
index 16e89355a3..dceabbf904 100644
--- a/client/components/Nav/NavMenuItem.jsx
+++ b/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>
   );