diff options
Diffstat (limited to 'src/view/com/util')
| -rw-r--r-- | src/view/com/util/Link.tsx | 12 | ||||
| -rw-r--r-- | src/view/com/util/PostMeta.tsx | 14 | ||||
| -rw-r--r-- | src/view/com/util/PostSandboxWarning.tsx | 5 | ||||
| -rw-r--r-- | src/view/com/util/forms/DropdownButton.tsx | 12 | ||||
| -rw-r--r-- | src/view/com/util/images/AutoSizedImage.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/images/Gallery.tsx | 6 | ||||
| -rw-r--r-- | src/view/com/util/moderation/PostHider.tsx | 3 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/PostCtrls.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.tsx | 5 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 4 |
10 files changed, 58 insertions, 21 deletions
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index f753f01cc..7ff896344 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -88,6 +88,10 @@ export const Link = observer(function Link({ props.dataSet.noUnderline = 1 } + if (title && !props.accessibilityLabel) { + props.accessibilityLabel = title + } + return ( <TouchableOpacity testID={testID} @@ -171,6 +175,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ text, numberOfLines, lineHeight, + ...props }: { testID?: string type?: TypographyVariant @@ -179,6 +184,9 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ text: string | JSX.Element numberOfLines?: number lineHeight?: number + accessible?: boolean + accessibilityLabel?: string + accessibilityHint?: string }) { if (isDesktopWeb) { return ( @@ -190,6 +198,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ text={text} numberOfLines={numberOfLines} lineHeight={lineHeight} + {...props} /> ) } @@ -199,7 +208,8 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ type={type} style={style} numberOfLines={numberOfLines} - lineHeight={lineHeight}> + lineHeight={lineHeight} + {...props}> {text} </Text> ) diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index 45651e4e5..628c88722 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -2,7 +2,7 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import {Text} from './text/Text' import {DesktopWebTextLink} from './Link' -import {ago} from 'lib/strings/time' +import {ago, niceDate} from 'lib/strings/time' import {usePalette} from 'lib/hooks/usePalette' import {useStores} from 'state/index' import {UserAvatar} from './UserAvatar' @@ -57,7 +57,11 @@ export const PostMeta = observer(function (opts: PostMetaOpts) { text={sanitizeDisplayName(displayName)} href={`/profile/${opts.authorHandle}`} /> - <Text type="md" style={pal.textLight} lineHeight={1.2}> + <Text + type="md" + style={pal.textLight} + lineHeight={1.2} + accessible={false}> · </Text> <DesktopWebTextLink @@ -65,6 +69,8 @@ export const PostMeta = observer(function (opts: PostMetaOpts) { style={[styles.metaItem, pal.textLight]} lineHeight={1.2} text={ago(opts.timestamp)} + accessibilityLabel={niceDate(opts.timestamp)} + accessibilityHint="" href={opts.postHref} /> </View> @@ -122,7 +128,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) { href={`/profile/${opts.authorHandle}`} /> </View> - <Text type="md" style={pal.textLight} lineHeight={1.2}> + <Text type="md" style={pal.textLight} lineHeight={1.2} accessible={false}> · </Text> <DesktopWebTextLink @@ -130,6 +136,8 @@ export const PostMeta = observer(function (opts: PostMetaOpts) { style={[styles.metaItem, pal.textLight]} lineHeight={1.2} text={ago(opts.timestamp)} + accessibilityLabel={niceDate(opts.timestamp)} + accessibilityHint="" href={opts.postHref} /> </View> diff --git a/src/view/com/util/PostSandboxWarning.tsx b/src/view/com/util/PostSandboxWarning.tsx index 54495aa9b..21f5f7b90 100644 --- a/src/view/com/util/PostSandboxWarning.tsx +++ b/src/view/com/util/PostSandboxWarning.tsx @@ -10,7 +10,10 @@ export function PostSandboxWarning() { if (store.session.isSandbox) { return ( <View style={styles.container}> - <Text type="title-2xl" style={[pal.text, styles.text]}> + <Text + type="title-2xl" + style={[pal.text, styles.text]} + accessible={false}> SANDBOX </Text> </View> diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index c6e650077..ad216d97e 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/src/view/com/util/forms/DropdownButton.tsx @@ -50,6 +50,8 @@ interface DropdownButtonProps { openToRight?: boolean rightOffset?: number bottomOffset?: number + accessibilityLabel?: string + accessibilityHint?: string } export function DropdownButton({ @@ -63,6 +65,7 @@ export function DropdownButton({ openToRight = false, rightOffset = 0, bottomOffset = 0, + accessibilityLabel, }: PropsWithChildren<DropdownButtonProps>) { const ref1 = useRef<TouchableOpacity>(null) const ref2 = useRef<View>(null) @@ -128,8 +131,8 @@ export function DropdownButton({ hitSlop={HITSLOP} ref={ref1} accessibilityRole="button" - accessibilityLabel={`Opens ${numItems} options`} - accessibilityHint={`Opens ${numItems} options`}> + accessibilityLabel={accessibilityLabel || `Opens ${numItems} options`} + accessibilityHint=""> {children} </TouchableOpacity> ) @@ -246,7 +249,9 @@ export function PostDropdownBtn({ testID={testID} style={style} items={dropdownItems} - menuWidth={isWeb ? 220 : 200}> + menuWidth={isWeb ? 220 : 200} + accessibilityLabel="Additional post actions" + accessibilityHint=""> {children} </DropdownButton> ) @@ -335,6 +340,7 @@ const DropdownItems = ({ key={index} style={[styles.menuItem]} onPress={() => onPressItem(index)} + accessibilityRole="button" accessibilityLabel={item.label} accessibilityHint={`Option ${index + 1} of ${numItems}`}> {item.icon && ( diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index e6aba46f3..9c6f25cae 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -64,15 +64,14 @@ export function AutoSizedImage({ delayPressIn={DELAY_PRESS_IN} style={[styles.container, style]} accessible={true} - accessibilityLabel="Share image" - accessibilityHint="Opens ways of sharing image"> + accessibilityRole="button" + accessibilityLabel={alt || 'Image'} + accessibilityHint="Tap to view fully"> <Image style={[styles.image, {aspectRatio}]} source={uri} - accessible={true} // Must set for `accessibilityLabel` to work + accessible={false} // Must set for `accessibilityLabel` to work accessibilityIgnoresInvertColors - accessibilityLabel={alt} - accessibilityHint="" /> {children} </TouchableOpacity> diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index a7a64b171..01a7d574a 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -34,7 +34,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({ onPressIn={onPressIn ? () => onPressIn(index) : undefined} onLongPress={onLongPress ? () => onLongPress(index) : undefined} accessibilityRole="button" - accessibilityLabel="View image" + accessibilityLabel={image.alt || 'Image'} accessibilityHint=""> <Image source={{uri: image.thumb}} @@ -47,7 +47,9 @@ export const GalleryItem: FC<GalleryItemProps> = ({ </TouchableOpacity> {image.alt === '' ? null : ( <View style={styles.altContainer}> - <Text style={styles.alt}>ALT</Text> + <Text style={styles.alt} accessible={false}> + ALT + </Text> </View> )} </View> diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx index 50ccf595b..f2b6dbddd 100644 --- a/src/view/com/util/moderation/PostHider.tsx +++ b/src/view/com/util/moderation/PostHider.tsx @@ -72,8 +72,7 @@ export function PostHider({ style={style} href={href} noFeedback - accessible={true} - accessibilityRole="none" + accessible={false} {...props}> {children} </Link> diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 12d4c48c8..cd6db408c 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -19,6 +19,7 @@ import {Text} from '../text/Text' import {PostDropdownBtn} from '../forms/DropdownButton' import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons' import {s, colors} from 'lib/styles' +import {pluralize} from 'lib/strings/helpers' import {useTheme} from 'lib/ThemeContext' import {useStores} from 'state/index' import {RepostButton} from './RepostButton' @@ -170,7 +171,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { hitSlop={HITSLOP} onPress={opts.onPressReply} accessibilityRole="button" - accessibilityLabel="Reply" + accessibilityLabel={`Reply (${opts.replyCount} ${ + opts.replyCount === 1 ? 'reply' : 'replies' + })`} accessibilityHint="reply composer"> <CommentBottomArrow style={[defaultCtrlColor, opts.big ? s.mt2 : styles.mt1]} @@ -190,7 +193,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { hitSlop={HITSLOP} onPress={onPressToggleLikeWrapper} accessibilityRole="button" - accessibilityLabel={opts.isLiked ? 'Unlike' : 'Like'} + accessibilityLabel={`${opts.isLiked ? 'Unlike' : 'Like'} (${ + opts.likeCount + } ${pluralize(opts.likeCount || 0, 'like')})`} accessibilityHint=""> {opts.isLiked ? ( <HeartIconSolid diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index 59f7f6ee1..4338e4c59 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -4,6 +4,7 @@ import {RepostIcon} from 'lib/icons' import {s, colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' import {Text} from '../text/Text' +import {pluralize} from 'lib/strings/helpers' import {useStores} from 'state/index' const HITSLOP = {top: 5, left: 5, bottom: 5, right: 5} @@ -49,7 +50,9 @@ export const RepostButton = ({ onPress={onPressToggleRepostWrapper} style={styles.control} accessibilityRole="button" - accessibilityLabel={isReposted ? 'Undo repost' : 'Repost'} + accessibilityLabel={`${ + isReposted ? 'Undo repost' : 'Repost' + } (${repostCount} ${pluralize(repostCount || 0, 'repost')})`} accessibilityHint=""> <RepostIcon style={ diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index edcef7039..372b36359 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -129,7 +129,9 @@ export function PostEmbeds({ style={styles.singleImage}> {alt === '' ? null : ( <View style={styles.altContainer}> - <Text style={styles.alt}>ALT</Text> + <Text style={styles.alt} accessible={false}> + ALT + </Text> </View> )} </AutoSizedImage> |