forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[🐴] Screenreader accessibility actions for individual chat items (#4116)
* 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
+25
-3
+9
-1
src/components/dms/ActionsWrapper.tsx
+9
-1
src/components/dms/ActionsWrapper.tsx
···
9
9
withTiming,
10
10
} from 'react-native-reanimated'
11
11
import {ChatBskyConvoDefs} from '@atproto/api'
12
+
import {msg} from '@lingui/macro'
13
+
import {useLingui} from '@lingui/react'
12
14
13
15
import {HITSLOP_10} from 'lib/constants'
14
16
import {useHaptics} from 'lib/haptics'
···
25
27
isFromSelf: boolean
26
28
children: React.ReactNode
27
29
}) {
30
+
const {_} = useLingui()
28
31
const playHaptic = useHaptics()
29
32
const menuControl = useMenuControl()
30
33
···
78
81
},
79
82
isFromSelf ? a.self_end : a.self_start,
80
83
animatedStyle,
81
-
]}>
84
+
]}
85
+
accessible={true}
86
+
accessibilityActions={[
87
+
{name: 'activate', label: _(msg`Open message options`)},
88
+
]}
89
+
onAccessibilityAction={open}>
82
90
{children}
83
91
<MessageMenu message={message} control={menuControl} />
84
92
</Animated.View>
+16
-2
src/screens/Messages/List/ChatListItem.tsx
+16
-2
src/screens/Messages/List/ChatListItem.tsx
···
127
127
})
128
128
}, [convo.id, navigation])
129
129
130
+
const onLongPress = useCallback(() => {
131
+
menuControl.open()
132
+
}, [menuControl])
133
+
130
134
return (
131
135
<View
132
136
// @ts-expect-error web only
···
135
139
onFocus={onFocus}
136
140
onBlur={onMouseLeave}>
137
141
<Button
138
-
label={profile.displayName || profile.handle}
139
142
onPress={onPress}
140
143
style={[a.flex_1]}
141
-
onLongPress={isNative ? menuControl.open : undefined}>
144
+
onLongPress={isNative ? onLongPress : undefined}
145
+
label={profile.displayName || profile.handle}
146
+
accessibilityHint={_(msg`Go to conversation with ${profile.handle}`)}
147
+
accessibilityActions={
148
+
isNative
149
+
? [
150
+
{name: 'magicTap', label: _(msg`Open conversation options`)},
151
+
{name: 'longpress', label: _(msg`Open conversation options`)},
152
+
]
153
+
: undefined
154
+
}
155
+
onAccessibilityAction={onLongPress}>
142
156
{({hovered, pressed, focused}) => (
143
157
<View
144
158
style={[