Show VideoPlayer tooltips when associated control receives focus (#872)

* show VideoTooltip when the parent is focused (or contains focus) and allow dismissal with Esc key

* remove duplicate labels

* reduce scope of mousemove listener

* add changeset

* add interaction test to test tooltip focus visibility

* update snapshots

.changeset/wet-plants-melt.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+`VideoPlayer` tooltips now show when the associated control receives focus.

packages/react/src/VideoPlayer/VideoPlayer.features.stories.tsx

@@ -8,6 +8,7 @@ import {Stack} from '../Stack'
 import {Button} from '../Button'
 import {useVideo} from './hooks'
 import styles from './VideoPlayer.stories.module.css'
+import {expect, userEvent, waitFor, within} from '@storybook/test'
 
 export default {
   title: 'Components/VideoPlayer/Features',
@@ -104,3 +105,20 @@ export const CustomPlayIcon = () => (
     <VideoPlayer.Track src="./example.vtt" default />
   </VideoPlayer>
 )
+
+export const TooltipVisibleOnFocus = () => (
+  <VideoPlayer title="GitHub media player">
+    <VideoPlayer.Source src="./example.mp4" type="video/mp4" />
+    <VideoPlayer.Track src="./example.vtt" default />
+  </VideoPlayer>
+)
+TooltipVisibleOnFocus.play = async ({canvasElement}) => {
+  const {getByText} = within(canvasElement)
+
+  await waitFor(() => expect(getByText('Play video')).not.toBeVisible())
+
+  await userEvent.tab()
+  await userEvent.tab()
+
+  await waitFor(() => expect(getByText('Play video')).toBeVisible())
+}

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/VideoPlayer.visual.spec.ts

@@ -92,4 +92,13 @@ test.describe('Visual Comparison: VideoPlayer', () => {
     await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
+
+  test('VideoPlayer / Tooltip Visible On Focus', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-videoplayer-features--tooltip-visible-on-focus&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
 })

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>
+  )
+}