Core: Improve ActionBar focus indicator in high contrast mode

[TheSeydiCharyyev]

What I did

Strengthened the focus outline on ActionBar buttons (used by the Copy button in code blocks, action items in Preview, etc.) when rendered under forced-colors: active.

 '@media (forced-colors: active)': {
-  outline: '1px solid highlight',
+  outline: '2px solid CanvasText',
+  outlineOffset: '2px',
 },

The previous 1px solid highlight rule did render an outline, but on Windows 11 contrast themes it appears as a thin violet line that's easy to miss next to the button's existing border — failing the spirit of WCAG 2.4.7 (Focus Visible).

Changes:

• 2px width instead of 1px for visibility
• CanvasText (primary text system color) for guaranteed contrast against any HC background
• outline-offset: 2px to separate the focus ring from the button border so they don't merge visually

CanvasText is a CSS system color defined by the OS contrast theme, so the fix adapts automatically across Night sky / Desert / Dusk / Aquatic on Windows 11 and the legacy Black/White themes from Windows 10.

Fixes #22707

Manual testing

1. Enable a Windows contrast theme: Settings → Accessibility → Contrast themes → Night sky (or any other)
2. cd code && yarn storybook:ui
3. Navigate to Components → Syntaxhighlighter → Bordered Copyable
4. Tab to (or click) the Copy button
5. Focus outline should be a clear 2px ring offset from the button border

Same applies to other consumers of ActionBar, e.g. the additional actions in the docs Preview block.

Screenshots

Tested on Windows 11 Night sky theme.

Before (1px solid highlight): thin violet outline, easy to miss.

After (2px solid CanvasText + outline-offset: 2px): thick, well-separated focus ring.

Summary by CodeRabbit

• Bug Fixes
  • Improved focus styling for ActionBar buttons in high-contrast/forced-colors mode: thicker, clearer outline and increased offset to make keyboard focus more visible and accessible.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ba63f4c0-9660-497a-ad2e-744971d55ba0

📥 Commits

Reviewing files that changed from the base of the PR and between 54ceb29 and 9ccd4c1.

📒 Files selected for processing (1)

• code/core/src/components/components/ActionBar/ActionBar.tsx

---

📝 Walkthrough

Walkthrough

The PR changes ActionButton’s :focus styles under @media (forced-colors: active): the forced-colors outline is now 2px solid ButtonBorder with outlineOffset: 2px instead of 1px solid highlight.

Changes

High-Contrast Mode Focus Styling

Layer / File(s)	Summary
ActionButton forced-colors focus outline code/core/src/components/components/ActionBar/ActionBar.tsx	ActionButton's :focus outline for forced-colors mode updated to outline: 2px solid ButtonBorder and outlineOffset: 2px, replacing 1px solid highlight.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• storybookjs/storybook#33427: Updates forced-colors styling for UI highlight elements; both PRs adjust High-Contrast Mode appearance of focus/highlight indicators.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/core/src/components/components/ActionBar/ActionBar.tsx`:
- Around line 59-62: The forced-colors media rule in the ActionBar component
uses the wrong system color; in the style block keyed by "@media (forced-colors:
active)" inside ActionBar.tsx replace the outline color 'CanvasText' with the
correct system color 'ButtonBorder' (keep outline and outlineOffset as-is) so
the button focus outline uses the proper forced-colors semantic color.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5df44d42-c2dc-4244-a2d3-7f0be2d56a68

📥 Commits

Reviewing files that changed from the base of the PR and between 97716bd and 8b36428.

📒 Files selected for processing (1)

• code/core/src/components/components/ActionBar/ActionBar.tsx