forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[a11y] Video - fix labels and make more detailed (#6635)
* fix labels and make more detailed
* move overall label to parent
authored by
Samuel Newman
and committed by
GitHub
5d4aaa5b
437bdcf9
+23
-7
+5
src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
+5
src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
···
1
1
import {StyleProp, ViewStyle} from 'react-native'
2
2
import {View} from 'react-native'
3
+
import {msg} from '@lingui/macro'
4
+
import {useLingui} from '@lingui/react'
3
5
4
6
import {atoms as a, useTheme} from '#/alf'
5
7
import {Text} from '#/components/Typography'
···
16
18
style?: StyleProp<ViewStyle>
17
19
}) {
18
20
const t = useTheme()
21
+
const {_} = useLingui()
19
22
20
23
if (isNaN(time)) {
21
24
return null
···
27
30
return (
28
31
<View
29
32
pointerEvents="none"
33
+
accessibilityLabel={_(msg`Time remaining: ${time} seconds`)}
34
+
accessibilityHint=""
30
35
style={[
31
36
{
32
37
backgroundColor: 'rgba(0, 0, 0, 0.5)',
+7
-1
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
+7
-1
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
···
1
1
import React, {useEffect, useId, useRef, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {AppBskyEmbedVideo} from '@atproto/api'
4
+
import {msg} from '@lingui/macro'
5
+
import {useLingui} from '@lingui/react'
4
6
import type * as HlsTypes from 'hls.js'
5
7
6
8
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
···
27
29
const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
28
30
const [hlsLoading, setHlsLoading] = React.useState(false)
29
31
const figId = useId()
32
+
const {_} = useLingui()
30
33
31
34
// send error up to error boundary
32
35
const [error, setError] = useState<Error | null>(null)
···
49
52
}, [lastKnownTime])
50
53
51
54
return (
52
-
<View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
55
+
<View
56
+
style={[a.flex_1, a.rounded_md, a.overflow_hidden]}
57
+
accessibilityLabel={_(msg`Embedded video player`)}
58
+
accessibilityHint="">
53
59
<div ref={containerRef} style={{height: '100%', width: '100%'}}>
54
60
<figure style={{margin: 0, position: 'absolute', inset: 0}}>
55
61
<video
+4
-3
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
+4
-3
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
···
23
23
return (
24
24
<PressableWithHover
25
25
accessibilityRole="button"
26
-
accessibilityHint={active ? activeLabel : inactiveLabel}
26
+
accessibilityLabel={active ? activeLabel : inactiveLabel}
27
+
accessibilityHint=""
27
28
onPress={onPress}
28
29
style={[
29
30
a.p_xs,
···
32
33
]}
33
34
hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
34
35
{active ? (
35
-
<ActiveIcon fill={t.palette.white} width={20} />
36
+
<ActiveIcon fill={t.palette.white} width={20} aria-hidden />
36
37
) : (
37
-
<InactiveIcon fill={t.palette.white} width={20} />
38
+
<InactiveIcon fill={t.palette.white} width={20} aria-hidden />
38
39
)}
39
40
</PressableWithHover>
40
41
)
+3
-1
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx
+3
-1
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx
···
186
186
</View>
187
187
<div
188
188
ref={circleRef}
189
-
aria-label={_(msg`Seek slider`)}
189
+
aria-label={_(
190
+
msg`Seek slider. Use the arrow keys to seek forwards and backwards, and space to play/pause`,
191
+
)}
190
192
role="slider"
191
193
aria-valuemax={duration}
192
194
aria-valuemin={0}
+3
-2
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
+3
-2
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
···
313
313
onPointerEnter={onPointerMoveEmptySpace}
314
314
onPointerMove={onPointerMoveEmptySpace}
315
315
onPointerLeave={onPointerLeaveEmptySpace}
316
-
accessibilityHint={_(
316
+
accessibilityLabel={_(
317
317
!focused
318
318
? msg`Unmute video`
319
319
: playing
320
320
? msg`Pause video`
321
321
: msg`Play video`,
322
322
)}
323
+
accessibilityHint=""
323
324
style={[
324
325
a.flex_1,
325
326
web({cursor: showCursor || !playing ? 'pointer' : 'none'}),
···
401
402
<ControlButton
402
403
active={isFullscreen}
403
404
activeLabel={_(msg`Exit fullscreen`)}
404
-
inactiveLabel={_(msg`Fullscreen`)}
405
+
inactiveLabel={_(msg`Enter fullscreen`)}
405
406
activeIcon={ArrowsInIcon}
406
407
inactiveIcon={ArrowsOutIcon}
407
408
onPress={onPressFullscreen}
+1
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx
+1
src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx