forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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
)