diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 4d35a63bdb..a171e97723 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -46,7 +46,7 @@ export function Root({
return {children}
}
-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 47c3c63adb..d68dcba514 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 2f7aea5de5..44171d42cb 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
}
}
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 83de3775c7..4e8646c605 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -118,7 +118,10 @@ export function TabBar({
)
return (
-
+
onItemLayout(e, i)}
style={styles.item}
hoverStyle={pal.viewLight}
- onPress={() => onPressItem(i)}>
+ onPress={() => onPressItem(i)}
+ accessibilityRole="tab">
-
Translate
-
+
>
)}
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 0972c17ccd..2cc45617fd 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -256,6 +256,7 @@ let PostCtrls = ({
requireAuth(() => onPressReply())
}
}}
+ accessibilityRole="button"
accessibilityLabel={plural(post.replyCount || 0, {
one: 'Reply (# reply)',
other: 'Reply (# replies)',
@@ -293,6 +294,7 @@ let PostCtrls = ({
testID="likeBtn"
style={btnStyle}
onPress={() => requireAuth(() => onPressToggleLike())}
+ accessibilityRole="button"
accessibilityLabel={
post.viewer?.like
? plural(post.likeCount || 0, {
@@ -332,6 +334,7 @@ let PostCtrls = ({
onShare()
}
}}
+ accessibilityRole="button"
accessibilityLabel={_(msg`Share`)}
accessibilityHint=""
hitSlop={POST_CTRL_HITSLOP}>