Improvements to various components in Windows High Contrast Mode

[joshfarrant]

Summary

Improvements to a variety of components when viewed in Windows High Contrast Mode.

There are likely further improvements that could be made across the board and with some more thorough style tweaks we could improve our support for High Contrast Mode across PB, but this PR sets a good baseline and addresses some low-hanging fruit.

List of notable changes

• FAQGroup: Improved selected styles for selected tab.
• Pagination: Improved selected styles for current page item.
• VideoPlayer: Made all controls and text visible and legible.
• Checkbox: Improved focus and checked styles.
• Radio: Improved focus and checked styles.
• TextInput: Improved focus styles.
• Textarea: Improved focus styles.
• ActionMenu: Improved focus styles.

What should reviewers focus on?

• Make sure the improvements work as expected in Windows High Contrast Mode
• Make sure non-High Contrast styles aren't affected
  • *Some small tweaks have been made to the non-High Contrast Mode VideoPlayer focus styles

Steps to test

1. Find a Windows machine (I can share instructions on how to set up a VM)
2. Enable High Contrast Mode
3. Test the components and states affected by this PR

Supporting resources (related issues, external links, etc)

SWP

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

Tetralogical accessibility audit

• Closes https://github.com/github/primer/issues/3866
• Closes https://github.com/github/primer/issues/3790

HCL accessibility audit

• Closes https://github.com/github/accessibility-audits/issues/10401
• Closes https://github.com/github/accessibility-audits/issues/10375
• Closes https://github.com/github/accessibility-audits/issues/10361
• Closes https://github.com/github/accessibility-audits/issues/10369
• Closes https://github.com/github/accessibility-audits/issues/10397
• Closes https://github.com/github/accessibility-audits/issues/10395

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

Videos

ActionMenu

whcm-actionmenu.mp4

FAQGroup

whcm-faqgroup.mp4

VideoPlayer

whcm-desert-videoplayer.mp4

whcm-night-sky-videoplayer.mp4

Pagination

whcm-pagination.mp4

Form

whcm-desert-form.mp4

whcm-night-sky-form.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 3e8cd7b

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

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	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

[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

[Copilot]

Pull Request Overview

This PR improves accessibility by enhancing the styling of various UI components when viewed in Windows High Contrast Mode, addressing multiple accessibility audit issues and improving the user experience for users with visual impairments.

Key changes include:

• Enhanced focus styles for form controls (TextInput, Textarea, Select, Checkbox, Radio) using proper outline styling
• Improved visibility and contrast for interactive elements like VideoPlayer controls, Pagination items, and ActionMenu items
• Updated selected/active state styling for FAQGroup tabs and Pagination current page indicators

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/src/forms/Textarea/Textarea.module.css	Added high contrast focus styling with outline
packages/react/src/forms/TextInput/TextInput.module.css	Added high contrast focus styling with outline
packages/react/src/forms/Select/Select.module.css	Added high contrast focus styling with outline
packages/react/src/forms/Radio/Radio.module.css	Added high contrast focus and checked state styling
packages/react/src/forms/Checkbox/Checkbox.module.css	Added high contrast focus and checked state styling
packages/react/src/VideoPlayer/VideoPlayer.module.css	Enhanced visibility of all controls, text, and progress elements
packages/react/src/Pagination/Pagination.module.css	Improved current page item styling with thicker border
packages/react/src/FAQ/FAQGroup.module.css	Enhanced selected tab styling with thicker border and proper colors
packages/react/src/ActionMenu/ActionMenu.module.css	Added high contrast focus styling for menu items
.changeset/chilly-yaks-unite.md	Added changelog entry documenting the improvements