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]

🦋 Changeset detected

Latest commit: cf1b9c9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another 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]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[rezrah]

Looks great, @joshfarrant.

Few things to add before we merge:

• Needs a changeset for the React package
• Could you add a interaction test to Storybook please. We should have the focus state under visual test coverage given it's a MAS-related requirement (prior art here)

Feel free to ping me if you want another review

[joshfarrant]

@rezrah Great spot + suggestion, thanks!

Changeset and interaction test added, I'll hold off merging until you've had chance to look. Give it another ✅ when you're happy

[rezrah]

Looks good 👍

You should have a new snapshot added to this PR but can't see it, could you run the tests again please?