fix(a11y): avoid plain `div`s as button or tabs (#6084)

Co-authored-by: Hailey <me@haileyok.com>

3 files changed, 8 insertions, 2 deletions

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 4d35a63bd..a171e9772 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -46,7 +46,7 @@ export function Root({
   return <Context.Provider value={context}>{children}</Context.Provider>
 }
 
-export function Trigger({children, label}: TriggerProps) {
+export function Trigger({children, label, role = 'button'}: TriggerProps) {
   const {control} = React.useContext(Context)
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const {
@@ -70,6 +70,7 @@ export function Trigger({children, label}: TriggerProps) {
       onPressIn,
       onPressOut,
       accessibilityLabel: label,
+      accessibilityRole: role,
     },
   })
 }
diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index 47c3c63ad..d68dcba51 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -111,7 +111,7 @@ const RadixTriggerPassThrough = React.forwardRef(
 )
 RadixTriggerPassThrough.displayName = 'RadixTriggerPassThrough'
 
-export function Trigger({children, label}: TriggerProps) {
+export function Trigger({children, label, role = 'button'}: TriggerProps) {
   const {control} = React.useContext(Context)
   const {
     state: hovered,
@@ -155,6 +155,7 @@ export function Trigger({children, label}: TriggerProps) {
               onMouseEnter,
               onMouseLeave,
               accessibilityLabel: label,
+              accessibilityRole: role,
             },
           })
         }
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index 2f7aea5de..44171d42c 100644
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   AccessibilityProps,
+  AccessibilityRole,
   GestureResponderEvent,
   PressableProps,
 } from 'react-native'
@@ -36,6 +37,7 @@ export type RadixPassThroughTriggerProps = {
 export type TriggerProps = {
   children(props: TriggerChildProps): React.ReactNode
   label: string
+  role?: AccessibilityRole
 }
 export type TriggerChildProps =
   | {
@@ -63,6 +65,7 @@ export type TriggerChildProps =
         onPressIn: () => void
         onPressOut: () => void
         accessibilityLabel: string
+        accessibilityRole: AccessibilityRole
       }
     }
   | {
@@ -83,6 +86,7 @@ export type TriggerChildProps =
         onMouseEnter: () => void
         onMouseLeave: () => void
         accessibilityLabel: string
+        accessibilityRole: AccessibilityRole
       }
     }