Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

[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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 77 77 min={0} 78 78 max={100} 79 79 value={sliderVolume} 80 + aria-label={_(msg`Volume`)} 80 81 style={ 81 82 // Ridiculous safari hack for old version of safari. Fixed in sonoma beta -h 82 83 isSafari ? {height: 92, minHeight: '100%'} : {height: '100%'}