Show VideoPlayer tooltips when associated control receives focus

packages/react/src/VideoPlayer/VideoPlayer.module.css

@@ -335,6 +335,10 @@
   color: var(--base-color-scale-gray-9);
 }
 
+.VideoPlayer__tooltip-visible {
+  opacity: 1;
+}
+
 .VideoPlayer__controlTextColor {
   color: var(--base-color-scale-white-0);
 }

packages/react/src/VideoPlayer/VideoPlayer.module.css.d.ts

@@ -25,6 +25,7 @@ declare const styles: {
   readonly "VideoPlayer__rangeProgress": string;
   readonly "VideoPlayer__tooltipContent": string;
   readonly "VideoPlayer__tooltipText": string;
+  readonly "VideoPlayer__tooltip-visible": string;
   readonly "VideoPlayer__controlTextColor": string;
   readonly "VideoPlayer__seekTime": string;
 };

packages/react/src/VideoPlayer/components/CCButton/CCButton.tsx

@@ -18,10 +18,11 @@ export const CCButton = ({className, ...props}: HTMLAttributes<HTMLButtonElement
         !ccEnabled && styles.VideoPlayer__ccOff,
       )}
       onClick={toggleCC}
-      aria-label={ccEnabled ? 'Disable captions' : 'Enable captions'}
       {...props}
     >
-      <Text className={styles.VideoPlayer__ccText}>CC</Text>
+      <Text className={styles.VideoPlayer__ccText} aria-hidden="true">
+        CC
+      </Text>
       <VideoTooltip>{ccEnabled ? 'Disable captions' : 'Enable captions'}</VideoTooltip>
     </button>
   )

packages/react/src/VideoPlayer/components/IconControl/IconControl.tsx

@@ -9,9 +9,8 @@ type IconControlProps = {
 } & HTMLAttributes<HTMLButtonElement>
 
 export const IconControl = ({tooltip, children, className, ...rest}: IconControlProps) => (
-  <button className={clsx(styles.VideoPlayer__iconControl, className)} {...rest} aria-label={tooltip}>
+  <button className={clsx(styles.VideoPlayer__iconControl, className)} {...rest}>
     {children}
-    <span className="visually-hidden">{tooltip}</span>
     <VideoTooltip>{tooltip}</VideoTooltip>
   </button>
 )

packages/react/src/VideoPlayer/components/Range/Range.tsx

@@ -37,12 +37,14 @@ export const Range = ({
   }, [startValue])
 
   useEffect(() => {
-    if (!max || !tooltip || !inputRef.current) {
+    const input = inputRef.current
+
+    if (!max || !tooltip || !input) {
       return
     }
 
     const handleMouseMove = event => {
-      if (event.target !== inputRef.current) {
+      if (event.target !== input) {
         setHoverValue(0)
         setMousePos(0)
         return
@@ -53,10 +55,10 @@ export const Range = ({
       setHoverValue((event.offsetX / event.target.clientWidth) * max)
     }
 
-    window.addEventListener('mousemove', handleMouseMove)
+    input.addEventListener('mousemove', handleMouseMove)
 
     return () => {
-      window.removeEventListener('mousemove', handleMouseMove)
+      input.removeEventListener('mousemove', handleMouseMove)
     }
   }, [max, tooltip, inputRef])
 

packages/react/src/VideoPlayer/components/VideoTooltip/VideoTooltip.tsx

@@ -1,17 +1,60 @@
-import React, {type HTMLAttributes} from 'react'
+import React, {useEffect, useRef, useState, type HTMLAttributes} from 'react'
 import clsx from 'clsx'
 
 import {Text} from '../../../Text'
 import styles from '../../VideoPlayer.module.css'
 
 type VideoTooltipProps = HTMLAttributes<HTMLDivElement>
 
-export const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps) => (
-  <div className={clsx(styles.VideoPlayer__tooltip, className)} {...rest}>
-    <span className={styles.VideoPlayer__tooltipContent}>
-      <Text className={styles.VideoPlayer__tooltipText} weight="medium">
-        {children}
-      </Text>
-    </span>
-  </div>
-)
+export const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps) => {
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const [hasFocus, setHasFocus] = useState(false)
+
+  useEffect(() => {
+    const tooltip = tooltipRef.current
+    const parent = tooltip?.parentElement
+
+    if (!tooltip || !parent) {
+      return
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setHasFocus(false)
+      }
+    }
+
+    const checkFocus = () => {
+      const isFocused = parent === document.activeElement || parent.contains(document.activeElement)
+      setHasFocus(isFocused)
+    }
+
+    parent.addEventListener('focus', checkFocus)
+    parent.addEventListener('blur', checkFocus)
+    parent.addEventListener('focusin', checkFocus)
+    parent.addEventListener('focusout', checkFocus)
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      parent.removeEventListener('focus', checkFocus)
+      parent.removeEventListener('blur', checkFocus)
+      parent.removeEventListener('focusin', checkFocus)
+      parent.removeEventListener('focusout', checkFocus)
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [tooltipRef])
+
+  return (
+    <div
+      className={clsx(styles.VideoPlayer__tooltip, hasFocus && styles['VideoPlayer__tooltip-visible'], className)}
+      ref={tooltipRef}
+      {...rest}
+    >
+      <span className={styles.VideoPlayer__tooltipContent}>
+        <Text className={styles.VideoPlayer__tooltipText} weight="medium">
+          {children}
+        </Text>
+      </span>
+    </div>
+  )
+}