From 5182324bf8a1d8ce1a67aab3834a7623e9fb9a38 Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Sat, 27 Jan 2024 14:25:25 -0600
Subject: [PATCH 1/6] 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>
   );

From b6ca02ab5d96bc116c7d95b116601686e48115d2 Mon Sep 17 00:00:00 2001
From: Tristan Espinoza <tristan.m.espinoza@gmail.com>
Date: Tue, 16 Jul 2024 13:44:06 -0700
Subject: [PATCH 2/6] fix: added aria roles to file menu and menu items

---
 client/components/Nav/NavBar.jsx             |  4 ++--
 client/components/Nav/NavDropdownMenu.jsx    | 13 +++++++------
 client/components/Nav/NavMenuItem.jsx        |  4 ++--
 client/modules/IDE/components/Header/Nav.jsx |  8 ++++----
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/components/Nav/NavBar.jsx b/client/components/Nav/NavBar.jsx
index f5a072be97..f5afa76fee 100644
--- a/client/components/Nav/NavBar.jsx
+++ b/client/components/Nav/NavBar.jsx
@@ -69,11 +69,11 @@ function NavBar({ children, className }) {
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
-        <nav className={className} ref={nodeRef} role="menubar">
+        <div className={className} ref={nodeRef} role="menubar">
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>
-        </nav>
+        </div>
       </header>
     </NavBarContext.Provider>
   );
diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx
index 6af6427068..d2c5744c46 100644
--- a/client/components/Nav/NavDropdownMenu.jsx
+++ b/client/components/Nav/NavDropdownMenu.jsx
@@ -23,12 +23,13 @@ function NavDropdownMenu({ id, title, children }) {
   const { isOpen, handlers } = useMenuProps(id);
 
   return (
-    <li
-      role="menuitem"
-      className={classNames('nav__item', isOpen && 'nav__item--open')}
-      aria-haspopup="menu"
-    >
-      <button {...handlers}>
+    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+      <button
+        {...handlers}
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+      >
         <span className="nav__item-header">{title}</span>
         <TriangleIcon
           className="nav__item-header-triangle"
diff --git a/client/components/Nav/NavMenuItem.jsx b/client/components/Nav/NavMenuItem.jsx
index dceabbf904..09436e43ee 100644
--- a/client/components/Nav/NavMenuItem.jsx
+++ b/client/components/Nav/NavMenuItem.jsx
@@ -18,8 +18,8 @@ function NavMenuItem({ hideIf, className, ...rest }) {
   }
 
   return (
-    <li className={className} role="menuitem">
-      <ButtonOrLink {...rest} {...handlers} />
+    <li className={className}>
+      <ButtonOrLink {...rest} {...handlers} role="menuitem" />
     </li>
   );
 }
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index f747d2781e..377d3e8b46 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -272,10 +272,10 @@ const LanguageMenu = () => {
 const UnauthenticatedUserMenu = () => {
   const { t } = useTranslation();
   return (
-    <ul className="nav__items-right" title="user-menu">
+    <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">
+        <Link to="/login" className="nav__auth-button" role="menuitem">
           <span className="nav__item-header" title="Login">
             {t('Nav.Login')}
           </span>
@@ -283,7 +283,7 @@ const UnauthenticatedUserMenu = () => {
       </li>
       <li className="nav__item-or">{t('Nav.LoginOr')}</li>
       <li className="nav__item">
-        <Link to="/signup" className="nav__auth-button">
+        <Link to="/signup" className="nav__auth-button" role="menuitem">
           <span className="nav__item-header" title="SignUp">
             {t('Nav.SignUp')}
           </span>
@@ -300,7 +300,7 @@ const AuthenticatedUserMenu = () => {
   const dispatch = useDispatch();
 
   return (
-    <ul className="nav__items-right" title="user-menu">
+    <ul className="nav__items-right" title="user-menu" role="navigation">
       {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
       <NavDropdownMenu
         id="account"

From f5c0fad1dd039773fa9dfc1dbcf6778a1dfd7506 Mon Sep 17 00:00:00 2001
From: Tristan Espinoza <tristan.m.espinoza@gmail.com>
Date: Wed, 17 Jul 2024 14:53:19 -0700
Subject: [PATCH 3/6] fix: updated test to find menubar role

---
 client/index.integration.test.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/index.integration.test.jsx b/client/index.integration.test.jsx
index 7c237bcb56..66819b1536 100644
--- a/client/index.integration.test.jsx
+++ b/client/index.integration.test.jsx
@@ -73,15 +73,15 @@ describe('index.jsx integration', () => {
   });
 
   it('navbar items and the dropdowns in the navbar exist', () => {
-    const navigation = screen.getByRole('navigation');
+    const navigation = screen.getByRole('menubar');
     expect(navigation).toBeInTheDocument();
 
-    const fileButton = within(navigation).getByRole('button', {
+    const fileButton = within(navigation).getByRole('menuitem', {
       name: /^file$/i
     });
     expect(fileButton).toBeInTheDocument();
 
-    const newFileButton = within(navigation).getByRole('button', {
+    const newFileButton = within(navigation).getByRole('menuitem', {
       name: /^new$/i
     });
     expect(newFileButton).toBeInTheDocument();
@@ -91,17 +91,17 @@ describe('index.jsx integration', () => {
     // const exampleFileButton = within(navigation).getByRole('link', {name: /^examples$/i});
     // expect(exampleFileButton).toBeInTheDocument();
 
-    const editButton = within(navigation).getByRole('button', {
+    const editButton = within(navigation).getByRole('menuitem', {
       name: /^edit$/i
     });
     expect(editButton).toBeInTheDocument();
 
-    const sketchButton = within(navigation).getByRole('button', {
+    const sketchButton = within(navigation).getByRole('menuitem', {
       name: /^sketch$/i
     });
     expect(sketchButton).toBeInTheDocument();
 
-    const helpButton = within(navigation).getByRole('button', {
+    const helpButton = within(navigation).getByRole('menuitem', {
       name: /^help$/i
     });
     expect(helpButton).toBeInTheDocument();

From 814f0fbfedd9552384c8f1413ffabe3c064d8dc3 Mon Sep 17 00:00:00 2001
From: Tristan Espinoza <tristan.m.espinoza@gmail.com>
Date: Wed, 17 Jul 2024 14:54:31 -0700
Subject: [PATCH 4/6] fix: removed role

---
 client/components/Nav/NavBar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/Nav/NavBar.jsx b/client/components/Nav/NavBar.jsx
index f5afa76fee..c8ae7c6377 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>
-        <div className={className} ref={nodeRef} role="menubar">
+        <div className={className} ref={nodeRef}>
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>

From 041ebd8ec1ac69774a01742f2d3acc6ea18fa832 Mon Sep 17 00:00:00 2001
From: Tristan Espinoza <tristan.m.espinoza@gmail.com>
Date: Wed, 17 Jul 2024 14:56:55 -0700
Subject: [PATCH 5/6] fix: added menubar roles

---
 client/modules/IDE/components/Header/Nav.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index 377d3e8b46..5bfdc1162e 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -135,7 +135,7 @@ const ProjectMenu = () => {
     metaKey === 'Ctrl' ? `${metaKeyName}+H` : `${metaKeyName}+⌥+F`;
 
   return (
-    <ul className="nav__items-left">
+    <ul className="nav__items-left" role="menubar">
       <li className="nav__item-logo">
         {user && user.username !== undefined ? (
           <Link to={userSketches}>

From 6b8ccd5ac62e7d6b56e83d8b5519369129b73716 Mon Sep 17 00:00:00 2001
From: Tristan Espinoza <tristan.m.espinoza@gmail.com>
Date: Wed, 17 Jul 2024 14:57:21 -0700
Subject: [PATCH 6/6] fix: updated snapshots

---
 .../__snapshots__/Nav.unit.test.jsx.snap      | 161 +++++++++++++-----
 .../SketchList.unit.test.jsx.snap             |   2 +
 2 files changed, 124 insertions(+), 39 deletions(-)

diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index 85387dd9ae..f26ba088fb 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`Nav renders dashboard version for desktop 1`] = `
 <DocumentFragment>
   <header>
-    <nav
+    <div
       class="nav"
     >
       <ul
@@ -39,7 +39,7 @@ exports[`Nav renders dashboard version for desktop 1`] = `
           </a>
         </li>
       </ul>
-    </nav>
+    </div>
   </header>
 </DocumentFragment>
 `;
@@ -266,7 +266,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
 }
 
 <header>
-    <nav
+    <div
       class="c0"
     >
       <div
@@ -352,14 +352,18 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 New
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Save
               </button>
             </li>
@@ -368,6 +372,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             >
               <a
                 href="/p5/sketches"
+                role="menuitem"
               >
                 Examples
               </a>
@@ -378,14 +383,18 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Tidy Code
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Find
               </button>
             </li>
@@ -395,14 +404,18 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Add File
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Add Folder
               </button>
             </li>
@@ -412,14 +425,18 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Preferences
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Language
               </button>
             </li>
@@ -429,7 +446,9 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Keyboard Shortcuts
               </button>
             </li>
@@ -439,6 +458,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
               <a
                 href="https://p5js.org/reference/"
                 rel="noopener noreferrer"
+                role="menuitem"
                 target="_blank"
               >
                 Reference
@@ -449,6 +469,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
             >
               <a
                 href="/about"
+                role="menuitem"
               >
                 About
               </a>
@@ -456,7 +477,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           </ul>
         </div>
       </div>
-    </nav>
+    </div>
   </header>
 </DocumentFragment>
 `;
@@ -464,11 +485,12 @@ exports[`Nav renders dashboard version for mobile 1`] = `
 exports[`Nav renders editor version for desktop 1`] = `
 <DocumentFragment>
   <header>
-    <nav
+    <div
       class="nav"
     >
       <ul
         class="nav__items-left"
+        role="menubar"
       >
         <li
           class="nav__item-logo"
@@ -487,7 +509,11 @@ exports[`Nav renders editor version for desktop 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            role="menuitem"
+          >
             <span
               class="nav__item-header"
             >
@@ -501,11 +527,14 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            role="menu"
           >
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 New
               </button>
             </li>
@@ -514,7 +543,11 @@ exports[`Nav renders editor version for desktop 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            role="menuitem"
+          >
             <span
               class="nav__item-header"
             >
@@ -528,11 +561,14 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            role="menu"
           >
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Tidy Code
                 <span
                   class="nav__keyboard-shortcut"
@@ -544,7 +580,9 @@ exports[`Nav renders editor version for desktop 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Find
                 <span
                   class="nav__keyboard-shortcut"
@@ -556,7 +594,9 @@ exports[`Nav renders editor version for desktop 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Replace
                 <span
                   class="nav__keyboard-shortcut"
@@ -570,7 +610,11 @@ exports[`Nav renders editor version for desktop 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            role="menuitem"
+          >
             <span
               class="nav__item-header"
             >
@@ -584,25 +628,32 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            role="menu"
           >
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Add File
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Add Folder
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Run
                 <span
                   class="nav__keyboard-shortcut"
@@ -614,7 +665,9 @@ exports[`Nav renders editor version for desktop 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Stop
                 <span
                   class="nav__keyboard-shortcut"
@@ -628,7 +681,11 @@ exports[`Nav renders editor version for desktop 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            role="menuitem"
+          >
             <span
               class="nav__item-header"
             >
@@ -642,11 +699,14 @@ exports[`Nav renders editor version for desktop 1`] = `
           </button>
           <ul
             class="nav__dropdown"
+            role="menu"
           >
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Keyboard Shortcuts
               </button>
             </li>
@@ -656,6 +716,7 @@ exports[`Nav renders editor version for desktop 1`] = `
               <a
                 href="https://p5js.org/reference/"
                 rel="noopener noreferrer"
+                role="menuitem"
                 target="_blank"
               >
                 Reference
@@ -666,6 +727,7 @@ exports[`Nav renders editor version for desktop 1`] = `
             >
               <a
                 href="/about"
+                role="menuitem"
               >
                 About
               </a>
@@ -673,7 +735,7 @@ exports[`Nav renders editor version for desktop 1`] = `
           </ul>
         </li>
       </ul>
-    </nav>
+    </div>
   </header>
 </DocumentFragment>
 `;
@@ -900,7 +962,7 @@ exports[`Nav renders editor version for mobile 1`] = `
 }
 
 <header>
-    <nav
+    <div
       class="c0"
     >
       <div
@@ -986,14 +1048,18 @@ exports[`Nav renders editor version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 New
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Save
               </button>
             </li>
@@ -1002,6 +1068,7 @@ exports[`Nav renders editor version for mobile 1`] = `
             >
               <a
                 href="/p5/sketches"
+                role="menuitem"
               >
                 Examples
               </a>
@@ -1012,14 +1079,18 @@ exports[`Nav renders editor version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Tidy Code
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Find
               </button>
             </li>
@@ -1029,14 +1100,18 @@ exports[`Nav renders editor version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Add File
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Add Folder
               </button>
             </li>
@@ -1046,14 +1121,18 @@ exports[`Nav renders editor version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Preferences
               </button>
             </li>
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Language
               </button>
             </li>
@@ -1063,7 +1142,9 @@ exports[`Nav renders editor version for mobile 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <button>
+              <button
+                role="menuitem"
+              >
                 Keyboard Shortcuts
               </button>
             </li>
@@ -1073,6 +1154,7 @@ exports[`Nav renders editor version for mobile 1`] = `
               <a
                 href="https://p5js.org/reference/"
                 rel="noopener noreferrer"
+                role="menuitem"
                 target="_blank"
               >
                 Reference
@@ -1083,6 +1165,7 @@ exports[`Nav renders editor version for mobile 1`] = `
             >
               <a
                 href="/about"
+                role="menuitem"
               >
                 About
               </a>
@@ -1090,7 +1173,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           </ul>
         </div>
       </div>
-    </nav>
+    </div>
   </header>
 </DocumentFragment>
 `;
diff --git a/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap b/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap
index 051c95be19..fbb3c2e171 100644
--- a/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap
+++ b/client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap
@@ -107,6 +107,7 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
             class="sketch-list__dropdown-column"
           >
             <div
+              aria-haspopup="menu"
               class="c0"
             >
               <button
@@ -143,6 +144,7 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
             class="sketch-list__dropdown-column"
           >
             <div
+              aria-haspopup="menu"
               class="c0"
             >
               <button