diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index f6170178..4ba2e1a4 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useCallback, useMemo} from 'react' import {observer} from 'mobx-react-lite' import {Linking, StyleSheet, View} from 'react-native' import Clipboard from '@react-native-clipboard/clipboard' @@ -133,6 +133,40 @@ export const PostThreadItem = observer(function PostThreadItem({ ) }, [item, store]) + const accessibilityActions = useMemo( + () => [ + { + name: 'reply', + label: 'Reply', + }, + { + name: 'repost', + label: item.post.viewer?.repost ? 'Undo repost' : 'Repost', + }, + {name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'}, + ], + [item.post.viewer?.like, item.post.viewer?.repost], + ) + + const onAccessibilityAction = useCallback( + event => { + switch (event.nativeEvent.actionName) { + case 'like': + onPressToggleLike() + break + case 'reply': + onPressReply() + break + case 'repost': + onPressToggleRepost() + break + default: + break + } + }, + [onPressReply, onPressToggleLike, onPressToggleRepost], + ) + if (!record) { return } @@ -154,7 +188,9 @@ export const PostThreadItem = observer(function PostThreadItem({ + moderation={item.moderation.thread} + accessibilityActions={accessibilityActions} + onAccessibilityAction={onAccessibilityAction}> + moderation={item.moderation.thread} + accessibilityActions={accessibilityActions} + onAccessibilityAction={onAccessibilityAction}> {item._showParentReplyLine && ( [ + { + name: 'reply', + label: 'Reply', + }, + { + name: 'repost', + label: item.post.viewer?.repost ? 'Undo repost' : 'Repost', + }, + {name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'}, + ], + [item.post.viewer?.like, item.post.viewer?.repost], + ) + + const onAccessibilityAction = useCallback( + event => { + switch (event.nativeEvent.actionName) { + case 'like': + onPressToggleLike() + break + case 'reply': + onPressReply() + break + case 'repost': + onPressToggleRepost() + break + default: + break + } + }, + [onPressReply, onPressToggleLike, onPressToggleRepost], + ) + return ( + moderation={item.moderation.list} + accessibilityActions={accessibilityActions} + onAccessibilityAction={onAccessibilityAction}> {showReplyLine && } diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 553c3a24..413300bb 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -1,4 +1,4 @@ -import React, {useMemo, useState} from 'react' +import React, {useCallback, useMemo, useState} from 'react' import {observer} from 'mobx-react-lite' import {Linking, StyleSheet, View} from 'react-native' import Clipboard from '@react-native-clipboard/clipboard' @@ -158,12 +158,48 @@ export const FeedItem = observer(function ({ moderation = {behavior: ModerationBehaviorCode.Show} } + const accessibilityActions = useMemo( + () => [ + { + name: 'reply', + label: 'Reply', + }, + { + name: 'repost', + label: item.post.viewer?.repost ? 'Undo repost' : 'Repost', + }, + {name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'}, + ], + [item.post.viewer?.like, item.post.viewer?.repost], + ) + + const onAccessibilityAction = useCallback( + event => { + switch (event.nativeEvent.actionName) { + case 'like': + onPressToggleLike() + break + case 'reply': + onPressReply() + break + case 'repost': + onPressToggleRepost() + break + default: + break + } + }, + [onPressReply, onPressToggleLike, onPressToggleRepost], + ) + return ( + moderation={moderation} + accessibilityActions={accessibilityActions} + onAccessibilityAction={onAccessibilityAction}> {isThreadChild && ( { + // testID?: string + // href?: string + // style: StyleProp + moderation: ModerationBehavior +} + export function PostHider({ testID, href, moderation, style, children, -}: React.PropsWithChildren<{ - testID?: string - href?: string - moderation: ModerationBehavior - style: StyleProp -}>) { + ...props +}: Props) { const pal = usePalette('default') const [override, setOverride] = React.useState(false) const bg = override ? pal.viewLight : pal.view @@ -70,7 +67,14 @@ export function PostHider({ // NOTE: any further label enforcement should occur in ContentContainer return ( - + {children} ) diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 41d66641..12d4c48c 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -191,9 +191,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { onPress={onPressToggleLikeWrapper} accessibilityRole="button" accessibilityLabel={opts.isLiked ? 'Unlike' : 'Like'} - accessibilityHint={ - opts.isReposted ? 'Removes like from the post' : 'Like the post' - }> + accessibilityHint=""> {opts.isLiked ? ( + accessibilityHint="">