[🐴] 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
zio/stable
Hailey 2024-05-20 11:36:08 -07:00 committed by GitHub
parent 24f8794d4d
commit 492216a584
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 3 deletions

View File

@ -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>

View File

@ -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={[