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

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

6 files changed, 22 insertions, 7 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
       }
     }
 
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 83de3775c..4e8646c60 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -118,7 +118,10 @@ export function TabBar({
   )
 
   return (
-    <View testID={testID} style={[pal.view, styles.outer]}>
+    <View
+      testID={testID}
+      style={[pal.view, styles.outer]}
+      accessibilityRole="tablist">
       <DraggableScrollView
         testID={`${testID}-selector`}
         horizontal={true}
@@ -135,7 +138,8 @@ export function TabBar({
               onLayout={e => onItemLayout(e, i)}
               style={styles.item}
               hoverStyle={pal.viewLight}
-              onPress={() => onPressItem(i)}>
+              onPress={() => onPressItem(i)}
+              accessibilityRole="tab">
               <View style={[styles.itemInner, selected && indicatorStyle]}>
                 <Text
                   emoji
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 4a30cc6a9..5044f9621 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -29,6 +29,7 @@ import {useComposerControls} from '#/state/shell/composer'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn'
 import {atoms as a, useTheme} from '#/alf'
+import {InlineLinkText} from '#/components/Link'
 import {AppModerationCause} from '#/components/Pills'
 import {RichText} from '#/components/RichText'
 import {SubtleWebHover} from '#/components/SubtleWebHover'
@@ -744,12 +745,13 @@ function ExpandedPostDetails({
             &middot;
           </NewText>
 
-          <NewText
+          <InlineLinkText
+            to="#"
+            label={_(msg`Translate`)}
             style={[a.text_sm, pal.link]}
-            title={_(msg`Translate`)}
             onPress={onTranslatePress}>
             <Trans>Translate</Trans>
-          </NewText>
+          </InlineLinkText>
         </>
       )}
     </View>
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 0972c17cc..2cc45617f 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}>