Merge pull request #33317 from overleaf/mj-menu-bar-role

[web] Fix aria roles for nested menu bar dropdowns

GitOrigin-RevId: 1c285c2ef8ed0c589bd6b0df6112c054c8662ca4

services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx

@@ -91,6 +91,8 @@ const NestedDropdownToggle: FC<React.PropsWithChildren> = forwardRef<
         'nested-dropdown-toggle',
         'dropdown-item'
       )}
+      role="menuitem"
+      aria-haspopup
     >
       {children}
       <MaterialIcon type="chevron_right" />
@@ -122,6 +124,8 @@ export const NestedMenuBarDropdown: FC<
       show={active}
       autoClose
       onToggle={onToggle}
+      as="li"
+      role="none"
     >
       <DropdownToggle
         id={`${menuId}-${id}`}

services/web/frontend/js/shared/components/types/dropdown-menu-props.ts

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode, PropsWithChildren } from 'react'
+import type { ElementType, ReactNode, PropsWithChildren, AriaRole } from 'react'
 import type { ButtonProps } from '@/shared/components/types/button-props'
 import type { DropdownMenuProps as BS5DropdownMenuProps } from 'react-bootstrap'
 
@@ -26,6 +26,7 @@ export type DropdownProps = {
   drop?: 'up' | 'up-centered' | 'start' | 'end' | 'down' | 'down-centered'
   focusFirstItemOnShow?: false | true | 'keyboard'
   onKeyDown?: (event: React.KeyboardEvent) => void
+  role?: AriaRole
 }
 
 export type DropdownItemProps = PropsWithChildren<{