fix: added aria roles to file menu and menu items

Author: tespin

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>
   );

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"

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>
   );
 }

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

@@ -272,18 +272,18 @@ 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>
         </Link>
       </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"