Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Some immersive video a11y fixes (#7528)

* Add playing/paused handling to tap area

* Show text and remove expand button if screen reader enabled

* Clarify actions

* DRY

authored by

Eric Bailey and committed by
GitHub
bdda3020 76885f85

+33 -14
+33 -14
src/screens/VideoFeed/index.tsx
··· 21 21 useSafeAreaFrame, 22 22 useSafeAreaInsets, 23 23 } from 'react-native-safe-area-context' 24 + import {useEvent} from 'expo' 24 25 import {useEventListener} from 'expo' 25 26 import {Image, ImageStyle} from 'expo-image' 26 27 import {LinearGradient} from 'expo-linear-gradient' ··· 52 53 import {cleanError} from '#/lib/strings/errors' 53 54 import {sanitizeHandle} from '#/lib/strings/handles' 54 55 import {isAndroid} from '#/platform/detection' 56 + import {useA11y} from '#/state/a11y' 55 57 import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' 56 58 import {useProfileShadow} from '#/state/cache/profile-shadow' 57 59 import { ··· 140 142 <View 141 143 style={[ 142 144 a.absolute, 143 - a.z_30, 145 + a.z_50, 144 146 {top: 0, left: 0, right: 0, paddingTop: top}, 145 147 ]}> 146 148 <Header sourceContext={params} /> ··· 692 694 text: record?.text || '', 693 695 facets: record?.facets, 694 696 }) 697 + const handle = sanitizeHandle(post.author.handle, '@') 695 698 696 699 const animatedStyle = useAnimatedStyle(() => ({ 697 700 opacity: 1 - seekingAnimationSV.get(), ··· 731 734 <Hider.Content> 732 735 <View style={[a.absolute, a.inset_0, a.z_20]}> 733 736 <View style={[a.flex_1]}> 734 - <PlayPauseTapArea 735 - player={player} 736 - post={post} 737 - feedContext={feedContext} 738 - /> 737 + {player && ( 738 + <PlayPauseTapArea 739 + player={player} 740 + post={post} 741 + feedContext={feedContext} 742 + /> 743 + )} 739 744 </View> 740 745 741 746 <LinearGradient ··· 776 781 <Text 777 782 style={[a.text_sm, t.atoms.text_contrast_high]} 778 783 numberOfLines={1}> 779 - {sanitizeHandle(post.author.handle, '@')} 784 + {handle} 780 785 </Text> 781 786 </View> 782 787 </Link> ··· 785 790 <Button 786 791 label={ 787 792 profile.viewer?.following 788 - ? _(msg`Following`) 789 - : _(msg`Follow`) 793 + ? _(msg`Following ${handle}`) 794 + : _(msg`Follow ${handle}`) 790 795 } 791 796 accessibilityHint={ 792 797 profile.viewer?.following ? _(msg`Unfollow user`) : '' ··· 879 884 const [constrained, setConstrained] = useState(false) 880 885 const [contentHeight, setContentHeight] = useState(0) 881 886 const {_} = useLingui() 887 + const {screenReaderEnabled} = useA11y() 882 888 883 889 if (expanded && !hasBeenExpanded) { 884 890 setHasBeenExpanded(true) ··· 907 913 style={[a.text_sm, a.flex_1, a.leading_normal]} 908 914 authorHandle={authorHandle} 909 915 enableTags 910 - numberOfLines={expanded ? undefined : constrained ? 2 : 2} 916 + numberOfLines={ 917 + expanded || screenReaderEnabled ? undefined : constrained ? 2 : 2 918 + } 911 919 onTextLayout={evt => { 912 920 if (!constrained && evt.nativeEvent.lines.length > 1) { 913 921 setConstrained(true) 914 922 } 915 923 }} 916 924 /> 917 - {constrained && ( 925 + {constrained && !screenReaderEnabled && ( 918 926 <Pressable 919 927 accessibilityHint={_(msg`Tap to expand or collapse post text.`)} 920 928 accessibilityLabel={expanded ? _(msg`Read less`) : _(msg`Read more`)} ··· 971 979 post, 972 980 feedContext, 973 981 }: { 974 - player?: VideoPlayer 982 + player: VideoPlayer 975 983 post: Shadow<AppBskyFeedDefs.PostView> 976 984 feedContext: string | undefined 977 985 }) { ··· 980 988 const playHaptic = useHaptics() 981 989 const [queueLike] = usePostLikeMutationQueue(post, 'ImmersiveVideo') 982 990 const {sendInteraction} = useFeedFeedbackContext() 991 + const {isPlaying} = useEvent(player, 'playingChange', { 992 + isPlaying: player.playing, 993 + }) 983 994 984 995 const togglePlayPause = () => { 985 996 if (!player) return ··· 1010 1021 return ( 1011 1022 <Button 1012 1023 disabled={!player} 1013 - label={_(`Tap to play or pause the video`)} 1024 + aria-valuetext={ 1025 + isPlaying ? _(msg`Video is playing`) : _(msg`Video is paused`) 1026 + } 1027 + label={_( 1028 + `Video from ${sanitizeHandle( 1029 + post.author.handle, 1030 + '@', 1031 + )}. Tap to play or pause the video`, 1032 + )} 1014 1033 accessibilityHint={_(msg`Double tap to like`)} 1015 1034 onPress={onPress} 1016 - style={[a.absolute, a.inset_0]}> 1035 + style={[a.absolute, a.inset_0, a.z_10]}> 1017 1036 <View /> 1018 1037 </Button> 1019 1038 )