Allow VideoPlayer tooltips to be hovered (#1051)

* use JS to control VideoTooltip hover visibility

* add changeset

* fix failing test

* apply PR feedback

* reword changeset

* clear timeout on unmount

* add test asserting new functionality

Author: joshfarrant

.changeset/heavy-turtles-accept.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Tooltips in the `VideoPlayer` component now remain briefly visible after the pointer is moved away from the toggle. This small delay improves general usability and helps meet the [WCAG 1.4.13 criterion](https://www.w3.org/TR/WCAG22/#content-on-hover-or-focus) for accessible hover interactions with tooltips.

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

@@ -183,10 +183,6 @@
   color: var(--brand-videoPlayer-controls-fgColor);
 }
 
-.VideoPlayer__iconControl:hover .VideoPlayer__tooltip {
-  opacity: 1;
-}
-
 .VideoPlayer__seek {
   flex: 1;
   display: flex;
@@ -240,10 +236,6 @@
   border-radius: var(--brand-VideoPlayer-range-borderRadius);
 }
 
-.VideoPlayer__range:hover .VideoPlayer__tooltip {
-  opacity: 1;
-}
-
 .VideoPlayer__rangeInput {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -323,10 +315,8 @@
   width: var(--base-size-8);
   height: var(--base-size-8);
   margin-bottom: var(--base-size-16);
-  pointer-events: none;
   opacity: 0;
   transform: translate(-50%, 50%);
-  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
 }
 
 .VideoPlayer__tooltip::before {

packages/react/src/VideoPlayer/VideoPlayer.test.tsx

@@ -210,4 +210,33 @@ describe('VideoPlayer', () => {
 
     expect(queryByLabelText('GitHub logo')).not.toBeInTheDocument()
   })
+
+  it('keeps tooltips visible for 100ms after the user stops hovering over the associated control', async () => {
+    const user = userEvent.setup()
+
+    const {getByRole, getByText} = render(
+      <VideoPlayer poster="/example-poster.jpg" title="test video">
+        <VideoPlayer.Source src="/example.mp4" />
+        <VideoPlayer.Track src="/example.vtt" default kind="subtitles" srcLang="en" label="English" />
+      </VideoPlayer>,
+    )
+
+    const captionsButton = getByRole('button', {name: 'Enable captions'})
+
+    await user.hover(captionsButton)
+
+    const tooltip = getByText('Enable captions')
+
+    expect(tooltip).toBeVisible()
+
+    await user.unhover(captionsButton)
+    expect(tooltip).toBeVisible()
+
+    await waitFor(
+      () => {
+        expect(tooltip).not.toBeVisible()
+      },
+      {timeout: 100},
+    )
+  })
 })

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

@@ -9,6 +9,7 @@ type VideoTooltipProps = HTMLAttributes<HTMLDivElement>
 export const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps) => {
   const tooltipRef = useRef<HTMLDivElement>(null)
   const [hasFocus, setHasFocus] = useState(false)
+  const mouseenterTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     const tooltip = tooltipRef.current
@@ -18,6 +19,13 @@ export const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps)
       return
     }
 
+    const clearTimeoutAndRef = () => {
+      if (mouseenterTimeoutRef.current) {
+        clearTimeout(mouseenterTimeoutRef.current)
+        mouseenterTimeoutRef.current = null
+      }
+    }
+
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         setHasFocus(false)
@@ -34,19 +42,38 @@ export const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps)
       setHasFocus(false)
     }
 
+    const onMouseEnterTooltip = () => {
+      clearTimeoutAndRef()
+      setHasFocus(true)
+    }
+
+    const onMouseLeaveTooltip = () => {
+      clearTimeoutAndRef()
+
+      mouseenterTimeoutRef.current = setTimeout(() => {
+        setHasFocus(false)
+      }, 100)
+    }
+
     parent.addEventListener('focus', checkFocus)
     parent.addEventListener('blur', checkFocus)
     parent.addEventListener('focusin', checkFocus)
     parent.addEventListener('focusout', checkFocus)
     parent.addEventListener('click', onClick)
+    parent.addEventListener('mouseenter', onMouseEnterTooltip)
+    parent.addEventListener('mouseleave', onMouseLeaveTooltip)
     window.addEventListener('keydown', handleKeyDown)
 
     return () => {
+      clearTimeoutAndRef()
+
       parent.removeEventListener('focus', checkFocus)
       parent.removeEventListener('blur', checkFocus)
       parent.removeEventListener('focusin', checkFocus)
       parent.removeEventListener('focusout', checkFocus)
       parent.removeEventListener('click', onClick)
+      parent.removeEventListener('mouseenter', onMouseEnterTooltip)
+      parent.removeEventListener('mouseleave', onMouseLeaveTooltip)
       window.removeEventListener('keydown', handleKeyDown)
     }
   }, [tooltipRef])
@@ -57,11 +84,15 @@ export const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps)
       ref={tooltipRef}
       {...rest}
     >
-      <span className={styles.VideoPlayer__tooltipContent}>
-        <Text className={styles.VideoPlayer__tooltipText} weight="medium">
-          {children}
-        </Text>
-      </span>
+      {hasFocus ? (
+        <span className={styles.VideoPlayer__tooltipContent}>
+          <Text className={styles.VideoPlayer__tooltipText} weight="medium">
+            {children}
+          </Text>
+        </span>
+      ) : (
+        <span className="visually-hidden">{children}</span>
+      )}
     </div>
   )
 }