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

[web] Fix aria roles for nested menu bar dropdowns

GitOrigin-RevId: 1c285c2ef8ed0c589bd6b0df6112c054c8662ca4

server-ce/test/editor.spec.ts

@@ -140,7 +140,7 @@ describe('editor', function () {
   describe('file menu', function () {
     it('can download project sources', function () {
       cy.findByRole('button', { name: 'File' }).click()
-      cy.findByRole('link', { name: 'Download' }).click()
+      cy.findByRole('menuitem', { name: 'Download' }).click()
       cy.findByRole('menuitem', { name: 'Download as source (.zip)' }).click()
       const zipName = projectName.replaceAll('-', '_')
       cy.task('readFileInZip', {
@@ -157,7 +157,7 @@ describe('editor', function () {
       )
 
       cy.findByRole('button', { name: 'File' }).click()
-      cy.findByRole('link', { name: 'Download' }).click()
+      cy.findByRole('menuitem', { name: 'Download' }).click()
       cy.findByRole('menuitem', { name: 'Download as PDF' }).click()
       const pdfName = projectName.replaceAll('-', '_')
       cy.task('readPdf', `cypress/downloads/${pdfName}.pdf`).should(

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<{