[🐴] 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 localizablezio/stable
parent
24f8794d4d
commit
492216a584
|
@ -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>
|
||||
|
|
|
@ -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={[
|
||||
|
|
Loading…
Reference in New Issue