UI: Visual focus indicators (VFIs) aren't visible in high contrast mode (rebase)

[Sidnioulz]

Closes #25935

What I did

Rebase of #29239. The original PR was approved by @MichaelArestad. The PR was left without review for ~9 months but seemed finished overall, so I'm helping it reach a mergeable state.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Caution

This does not appear to be testable automatically (see StackOverflow).

Manual testing

1. Open this PR's Storybook instance (and a control one) from Windows with high-contrast mode enabled
2. Check that focus indicators are more visible on this PR's instance

@MichaelArestad could you please confirm if you had completed manual testing as part of your review?

Documentation

N/A

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Improves accessibility by adding Windows high contrast mode support across core UI components, ensuring focus indicators remain visible when system high contrast is enabled.

• Added forced-colors media query support in code/addons/docs/src/blocks/controls/Boolean.tsx for visible state indicators
• Enhanced focus indicators in code/core/src/components/components/ActionBar/ActionBar.tsx using system highlight colors
• Implemented high-contrast compatible outlines in code/core/src/components/components/form/input/input.tsx while preserving existing focus styles

[Sidnioulz]

The original CI results are so old I can no longer find them in CircleCI. Re-running CI to find what's left to do after the rebase.

[greptile-apps]

LGTM

_{3 files reviewed, no comments
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4b6aac1.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 16s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-23 11:19:00 UTC

[valentinpalkovic]

@MichaelArestad Can you take a look on Windows? :)

[MichaelArestad]

@valentinpalkovic Phew! Tested it! This a notable improvement. We certainly have work to do in high contrast mode. Ship it!

[jonniebigodes]

Ran some tests on this and it's working. And agree with @MichaelArestad.

@valentinpalkovic all is good on my end and @Sidnioulz thank you for taking the time to follow up on this 🙏