From 492216a584d8feef674dab898466dbb80af2a4f3 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 20 May 2024 11:36:08 -0700
Subject: [🐴] Screenreader accessibility actions for individual chat items
 (#4116)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add accessibility tap to messages

* add a label for the accessibility action

* improve accessibility actions on chat list items

* adjust types

* more consistent wording

* make the strings localizable
---
 src/components/dms/ActionsWrapper.tsx      | 10 +++++++++-
 src/screens/Messages/List/ChatListItem.tsx | 18 ++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/dms/ActionsWrapper.tsx b/src/components/dms/ActionsWrapper.tsx
index a349c3cfa..1bb57ff90 100644
--- a/src/components/dms/ActionsWrapper.tsx
+++ b/src/components/dms/ActionsWrapper.tsx
@@ -9,6 +9,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 import {ChatBskyConvoDefs} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from 'lib/constants'
 import {useHaptics} from 'lib/haptics'
@@ -25,6 +27,7 @@ export function ActionsWrapper({
   isFromSelf: boolean
   children: React.ReactNode
 }) {
+  const {_} = useLingui()
   const playHaptic = useHaptics()
   const menuControl = useMenuControl()
 
@@ -78,7 +81,12 @@ export function ActionsWrapper({
           },
           isFromSelf ? a.self_end : a.self_start,
           animatedStyle,
-        ]}>
+        ]}
+        accessible={true}
+        accessibilityActions={[
+          {name: 'activate', label: _(msg`Open message options`)},
+        ]}
+        onAccessibilityAction={open}>
         {children}
         <MessageMenu message={message} control={menuControl} />
       </Animated.View>
diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx
index 9a9a78ba7..027e4aae3 100644
--- a/src/screens/Messages/List/ChatListItem.tsx
+++ b/src/screens/Messages/List/ChatListItem.tsx
@@ -127,6 +127,10 @@ function ChatListItemReady({
     })
   }, [convo.id, navigation])
 
+  const onLongPress = useCallback(() => {
+    menuControl.open()
+  }, [menuControl])
+
   return (
     <View
       // @ts-expect-error web only
@@ -135,10 +139,20 @@ function ChatListItemReady({
       onFocus={onFocus}
       onBlur={onMouseLeave}>
       <Button
-        label={profile.displayName || profile.handle}
         onPress={onPress}
         style={[a.flex_1]}
-        onLongPress={isNative ? menuControl.open : undefined}>
+        onLongPress={isNative ? onLongPress : undefined}
+        label={profile.displayName || profile.handle}
+        accessibilityHint={_(msg`Go to conversation with ${profile.handle}`)}
+        accessibilityActions={
+          isNative
+            ? [
+                {name: 'magicTap', label: _(msg`Open conversation options`)},
+                {name: 'longpress', label: _(msg`Open conversation options`)},
+              ]
+            : undefined
+        }
+        onAccessibilityAction={onLongPress}>
         {({hovered, pressed, focused}) => (
           <View
             style={[
-- 
cgit 1.4.1