From 42f7bca37e6638cd12870136f1e5794cabecaaad Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Thu, 30 Apr 2026 15:30:42 +0100
Subject: [PATCH] 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                                 | 4 ++--
 .../js/shared/components/menu-bar/menu-bar-dropdown.tsx       | 4 ++++
 .../js/shared/components/types/dropdown-menu-props.ts         | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/server-ce/test/editor.spec.ts b/server-ce/test/editor.spec.ts
index 9ff5af17b3..773121141f 100644
--- a/server-ce/test/editor.spec.ts
+++ b/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(
diff --git a/services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx b/services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx
index 834a1dbc32..798b028ad7 100644
--- a/services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx
+++ b/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}`}
diff --git a/services/web/frontend/js/shared/components/types/dropdown-menu-props.ts b/services/web/frontend/js/shared/components/types/dropdown-menu-props.ts
index 6a9782f43a..31d5d7348f 100644
--- a/services/web/frontend/js/shared/components/types/dropdown-menu-props.ts
+++ b/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<{