Fix VideoPlayer accessibility issues

[joshfarrant]

Summary

Fixes two Sev-2 VideoPlayer a11y issues.

The styling of the controls bar is heavier than it was before, but it's necessary to achieve the required contrast.

List of notable changes:

• Improved contrast of VideoPlayer focus styles by making the focus outline thicker and offsetting it.
• Improved contrast of controls and title.
• To offset the heavier title bar styles, the title bar now hides while the video is playing. This should probably have been default behaviour from day 1.
• Similarly, the controls bar now hides when the cursor or focus leaves the VideoPlayer, or after a few seconds of inactivity, and reappears when the cursor or focus returns.
• Made the video tooltip more efficient by being more judicious about when the event listener is added.

Steps to test:

1. Focus the VideoPlayer with the keyboard
2. Observe the focus styles

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

• Closes https://github.com/github/primer/issues/3773
• Closes https://github.com/github/primer/issues/3774

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
• New visual snapshots have been generated / updated for any UI changes
• 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

Screenshots:

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: 7aeb162

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]

🔍 Design token changes found

View CSS variable changes

- --brand-videoPlayer-title-bgColor: linear-gradient(#01040966, var(--base-color-scale-transparent));
+ --brand-videoPlayer-title-bgColor: linear-gradient(180deg, #000000e6, #00000073 66%, transparent);

- --brand-videoPlayer-controls-bgColor: linear-gradient(var(--base-color-scale-transparent), #01040966);
+ --brand-videoPlayer-controls-bgColor: #000000bf;

- --brand-videoPlayer-range-bgColor-progress: var(--base-color-scale-blue-5);
+ --brand-videoPlayer-range-bgColor-progress: var(--base-color-scale-blue-4);

- --brand-videoPlayer-title-bgColor: linear-gradient(#01040966, var(--base-color-scale-transparent));
+ --brand-videoPlayer-title-bgColor: linear-gradient(180deg, #000000e6, #00000073 66%, transparent);

- --brand-videoPlayer-controls-bgColor: linear-gradient(var(--base-color-scale-transparent), #01040966);
+ --brand-videoPlayer-controls-bgColor: #000000bf;

- --brand-videoPlayer-range-bgColor-progress: var(--base-color-scale-blue-5);
+ --brand-videoPlayer-range-bgColor-progress: var(--base-color-scale-blue-4);

[github-actions]

🟢 No visual differences found

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

[rezrah]

It's looking great, thanks @joshfarrant.

Something that would be nice to look at in a follow-up is the position of captions. It's quite high at the moment due to the controls bar offset.