Show VideoPlayer tooltips when associated control receives focus

[joshfarrant]

Summary

Previously, the VideoPlayer component's tooltips would only show when the associated control was hovered. This PR makes them show on focus as well.

Unfortunately we can't just use the :focus pseudo-class because we need to be able to dismiss the tooltip with the Esc key.

Longer term, we'd benefit from using the PB Tooltip component, rather than this custom implementation.

This change doesn't show the tooltip when focusing the Range sliders (eg seek, volume) as those tooltips are currently bound to mouse position, which isn't relevant when using keyboard controls.

List of notable changes:

• Show/hide VideoTooltip on focus/blur
• Allow dismissing with Esc key
• Remove duplicate labels from some of the controls
• Reduce scope of mousemove listener. Previously it listened for mousemoves on the whole window, which was unnecessary.

What should reviewers focus on?

• Check that tooltips appear when the relevant control is focused, and that they can be dismissed with Esc

Steps to test:

1. Open one of the VideoPlayer stories
2. Tab through the video's controls
3. Observe that the Play, CC, Mute, and Fullscreen buttons display tooltips when they receive focus
4. Observe that the tooltips can be dismissed with the Esc key

Supporting resources (related issues, external links, etc):

• Closes https://github.com/github/primer/issues/3804

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

[changeset-bot]

⚠️ No Changeset found

Latest commit: 18707d8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🟢 No design token changes found

Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.

Files not reviewed (1)

• packages/react/src/VideoPlayer/VideoPlayer.module.css: Language not supported

Comments suppressed due to low confidence (3)

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

• The removal of the 'aria-label' attribute might affect accessibility. Ensure that the tooltip alone is sufficient for screen readers or consider retaining the 'aria-label' attribute.

aria-label={ccEnabled ? 'Disable captions' : 'Enable captions'}

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

• Ensure that the focus and blur event listeners correctly show and hide the tooltip. Add tests if not already covered.

const tooltipRef = useRef<HTMLDivElement>(null)

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

• Removing the aria-label attribute may affect accessibility. Consider keeping aria-label={tooltip} to ensure screen readers can provide the necessary information.

<button className={clsx(styles.VideoPlayer__iconControl, className)} {...rest}>

Tip: If you use Visual Studio Code, you can request a review from Copilot before you push from the "Source Control" tab. Learn more

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.