Use `Pressable` for most links/embeds (#1181)

* delay press on all links

* use Pressable for all accessible links
zio/stable
Eric Bailey 2023-08-24 18:28:26 -05:00 committed by GitHub
parent 4654a9a45e
commit 462022741d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 33 deletions

View File

@ -1,12 +1,5 @@
import React from 'react' import React from 'react'
import { import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
Pressable,
StyleProp,
StyleSheet,
View,
ViewStyle,
TouchableOpacity,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../util/text/Text' import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
@ -68,7 +61,7 @@ export const CustomFeed = observer(
}, [store, item]) }, [store, item])
return ( return (
<TouchableOpacity <Pressable
testID={`feed-${item.displayName}`} testID={`feed-${item.displayName}`}
accessibilityRole="button" accessibilityRole="button"
style={[styles.container, pal.border, style]} style={[styles.container, pal.border, style]}
@ -132,7 +125,7 @@ export const CustomFeed = observer(
{pluralize(item.data.likeCount || 0, 'user')} {pluralize(item.data.likeCount || 0, 'user')}
</Text> </Text>
) : null} ) : null}
</TouchableOpacity> </Pressable>
) )
}, },
) )

View File

@ -9,8 +9,9 @@ import {
TextProps, TextProps,
View, View,
ViewStyle, ViewStyle,
TouchableOpacity, Pressable,
TouchableWithoutFeedback, TouchableWithoutFeedback,
TouchableOpacity,
} from 'react-native' } from 'react-native'
import { import {
useLinkProps, useLinkProps,
@ -112,7 +113,7 @@ export const Link = observer(function Link({
} }
return ( return (
<TouchableOpacity <Pressable
testID={testID} testID={testID}
style={style} style={style}
onPress={onPress} onPress={onPress}
@ -122,7 +123,7 @@ export const Link = observer(function Link({
href={asAnchor ? sanitizeUrl(href) : undefined} href={asAnchor ? sanitizeUrl(href) : undefined}
{...props}> {...props}>
{children ? children : <Text>{title || 'link'}</Text>} {children ? children : <Text>{title || 'link'}</Text>}
</TouchableOpacity> </Pressable>
) )
}) })

View File

@ -1,17 +1,10 @@
import React from 'react' import React from 'react'
import { import {StyleProp, StyleSheet, Pressable, View, ViewStyle} from 'react-native'
StyleProp,
StyleSheet,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native'
import {Image} from 'expo-image' import {Image} from 'expo-image'
import {clamp} from 'lib/numbers' import {clamp} from 'lib/numbers'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {Dimensions} from 'lib/media/types' import {Dimensions} from 'lib/media/types'
export const DELAY_PRESS_IN = 500
const MIN_ASPECT_RATIO = 0.33 // 1/3 const MIN_ASPECT_RATIO = 0.33 // 1/3
const MAX_ASPECT_RATIO = 5 // 5/1 const MAX_ASPECT_RATIO = 5 // 5/1
@ -57,11 +50,10 @@ export function AutoSizedImage({
if (onPress || onLongPress || onPressIn) { if (onPress || onLongPress || onPressIn) {
return ( return (
<TouchableOpacity <Pressable
onPress={onPress} onPress={onPress}
onLongPress={onLongPress} onLongPress={onLongPress}
onPressIn={onPressIn} onPressIn={onPressIn}
delayPressIn={DELAY_PRESS_IN}
style={[styles.container, style]} style={[styles.container, style]}
accessible={true} accessible={true}
accessibilityRole="button" accessibilityRole="button"
@ -74,7 +66,7 @@ export function AutoSizedImage({
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors
/> />
{children} {children}
</TouchableOpacity> </Pressable>
) )
} }

View File

@ -1,6 +1,6 @@
import {AppBskyEmbedImages} from '@atproto/api' import {AppBskyEmbedImages} from '@atproto/api'
import React, {ComponentProps, FC} from 'react' import React, {ComponentProps, FC} from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {StyleSheet, Text, Pressable, View} from 'react-native'
import {Image} from 'expo-image' import {Image} from 'expo-image'
type EventFunction = (index: number) => void type EventFunction = (index: number) => void
@ -14,8 +14,6 @@ interface GalleryItemProps {
imageStyle: ComponentProps<typeof Image>['style'] imageStyle: ComponentProps<typeof Image>['style']
} }
const DELAY_PRESS_IN = 500
export const GalleryItem: FC<GalleryItemProps> = ({ export const GalleryItem: FC<GalleryItemProps> = ({
images, images,
index, index,
@ -28,8 +26,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
return ( return (
<View> <View>
<TouchableOpacity <Pressable
delayPressIn={DELAY_PRESS_IN}
onPress={onPress ? () => onPress(index) : undefined} onPress={onPress ? () => onPress(index) : undefined}
onPressIn={onPressIn ? () => onPressIn(index) : undefined} onPressIn={onPressIn ? () => onPressIn(index) : undefined}
onLongPress={onLongPress ? () => onLongPress(index) : undefined} onLongPress={onLongPress ? () => onLongPress(index) : undefined}
@ -44,7 +41,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
accessibilityHint="" accessibilityHint=""
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors
/> />
</TouchableOpacity> </Pressable>
{image.alt === '' ? null : ( {image.alt === '' ? null : (
<View style={styles.altContainer}> <View style={styles.altContainer}>
<Text style={styles.alt} accessible={false}> <Text style={styles.alt} accessible={false}>

View File

@ -23,9 +23,9 @@ export const YoutubeEmbed = ({
return ( return (
<Link <Link
asAnchor
style={[styles.extOuter, pal.view, pal.border, style]} style={[styles.extOuter, pal.view, pal.border, style]}
href={link.uri} href={link.uri}>
noFeedback>
<ExternalLinkEmbed link={link} imageChild={imageChild} /> <ExternalLinkEmbed link={link} imageChild={imageChild} />
</Link> </Link>
) )

View File

@ -150,7 +150,6 @@ export function PostEmbeds({
return ( return (
<Link <Link
asAnchor asAnchor
noFeedback
style={[styles.extOuter, pal.view, pal.border, style]} style={[styles.extOuter, pal.view, pal.border, style]}
href={link.uri}> href={link.uri}>
<ExternalLinkEmbed link={link} /> <ExternalLinkEmbed link={link} />