[a11y] Video - fix labels and make more detailed (#6635)

* fix labels and make more detailed

* move overall label to parent

src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx

@@ -1,5 +1,7 @@
 import {StyleProp, ViewStyle} from 'react-native'
 import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -16,6 +18,7 @@ export function TimeIndicator({
   style?: StyleProp<ViewStyle>
 }) {
   const t = useTheme()
+  const {_} = useLingui()
 
   if (isNaN(time)) {
     return null
@@ -27,6 +30,8 @@ export function TimeIndicator({
   return (
     <View
       pointerEvents="none"
+      accessibilityLabel={_(msg`Time remaining: ${time} seconds`)}
+      accessibilityHint=""
       style={[
         {
           backgroundColor: 'rgba(0, 0, 0, 0.5)',

src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useId, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {AppBskyEmbedVideo} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import type * as HlsTypes from 'hls.js'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
@@ -27,6 +29,7 @@ export function VideoEmbedInnerWeb({
   const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
   const [hlsLoading, setHlsLoading] = React.useState(false)
   const figId = useId()
+  const {_} = useLingui()
 
   // send error up to error boundary
   const [error, setError] = useState<Error | null>(null)
@@ -49,7 +52,10 @@ export function VideoEmbedInnerWeb({
   }, [lastKnownTime])
 
   return (
-    <View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
+    <View
+      style={[a.flex_1, a.rounded_md, a.overflow_hidden]}
+      accessibilityLabel={_(msg`Embedded video player`)}
+      accessibilityHint="">
       <div ref={containerRef} style={{height: '100%', width: '100%'}}>
         <figure style={{margin: 0, position: 'absolute', inset: 0}}>
           <video

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx

@@ -23,7 +23,8 @@ export function ControlButton({
   return (
     <PressableWithHover
       accessibilityRole="button"
-      accessibilityHint={active ? activeLabel : inactiveLabel}
+      accessibilityLabel={active ? activeLabel : inactiveLabel}
+      accessibilityHint=""
       onPress={onPress}
       style={[
         a.p_xs,
@@ -32,9 +33,9 @@ export function ControlButton({
       ]}
       hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
       {active ? (
-        <ActiveIcon fill={t.palette.white} width={20} />
+        <ActiveIcon fill={t.palette.white} width={20} aria-hidden />
       ) : (
-        <InactiveIcon fill={t.palette.white} width={20} />
+        <InactiveIcon fill={t.palette.white} width={20} aria-hidden />
       )}
     </PressableWithHover>
   )

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/Scrubber.tsx

@@ -186,7 +186,9 @@ export function Scrubber({
         </View>
         <div
           ref={circleRef}
-          aria-label={_(msg`Seek slider`)}
+          aria-label={_(
+            msg`Seek slider. Use the arrow keys to seek forwards and backwards, and space to play/pause`,
+          )}
           role="slider"
           aria-valuemax={duration}
           aria-valuemin={0}

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx

@@ -313,13 +313,14 @@ export function Controls({
         onPointerEnter={onPointerMoveEmptySpace}
         onPointerMove={onPointerMoveEmptySpace}
         onPointerLeave={onPointerLeaveEmptySpace}
-        accessibilityHint={_(
+        accessibilityLabel={_(
           !focused
             ? msg`Unmute video`
             : playing
             ? msg`Pause video`
             : msg`Play video`,
         )}
+        accessibilityHint=""
         style={[
           a.flex_1,
           web({cursor: showCursor || !playing ? 'pointer' : 'none'}),
@@ -401,7 +402,7 @@ export function Controls({
             <ControlButton
               active={isFullscreen}
               activeLabel={_(msg`Exit fullscreen`)}
-              inactiveLabel={_(msg`Fullscreen`)}
+              inactiveLabel={_(msg`Enter fullscreen`)}
               activeIcon={ArrowsInIcon}
               inactiveIcon={ArrowsOutIcon}
               onPress={onPressFullscreen}

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VolumeControl.tsx

@@ -77,6 +77,7 @@ export function VolumeControl({
               min={0}
               max={100}
               value={sliderVolume}
+              aria-label={_(msg`Volume`)}
               style={
                 // Ridiculous safari hack for old version of safari. Fixed in sonoma beta -h
                 isSafari ? {height: 92, minHeight: '100%'} : {height: '100%'}