UI: Fix search highlight visibility in High Contrast Mode

[Maelryn]

Closes #30218

What I did

I added a media query for forced-colors: active to the Mark component in SearchResults.tsx.
This ensures that highlighted search terms use the system's Highlight and HighlightText colors, making them visible when Windows High Contrast Mode is enabled.

Checklist for Contributors

Testing

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

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

• Manual testing

1. Open Storybook.
2. Enable "High Contrast Mode" in your OS (or emulate forced-colors: active in Chrome DevTools > Rendering).
3. Type something in the sidebar search.
4. Verify that the matching characters are visible (highlighted) and not hidden.

Summary by CodeRabbit

• Style
  • Enhanced visual accessibility for high-contrast mode, ensuring highlighted text elements maintain optimal visibility and contrast ratios. This improvement benefits users with high-contrast display settings enabled, providing a clearer and more comfortable viewing experience when interacting with search results and text highlights throughout the interface.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

A CSS media query for forced-colors mode is added to the Mark component in SearchResults, adapting text color to HighlightText and background to Highlight for high-contrast accessibility support. No functional or behavioral changes introduced.

Changes

Cohort / File(s)	Summary
SearchResults accessibility styling code/core/src/manager/components/sidebar/SearchResults.tsx	Added @media (forced-colors: active) rule to Mark component, setting text color to HighlightText and background to Highlight for forced-colors mode support.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 39067a6 and fba5c96.

📒 Files selected for processing (1)

• code/core/src/manager/components/sidebar/SearchResults.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• code/core/src/manager/components/sidebar/SearchResults.tsx

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

• code/core/src/manager/components/sidebar/SearchResults.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

• code/core/src/manager/components/sidebar/SearchResults.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/manager/components/sidebar/SearchResults.tsx

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

• code/core/src/manager/components/sidebar/SearchResults.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: normal

🔇 Additional comments (1)

code/core/src/manager/components/sidebar/SearchResults.tsx (1)

67-74: LGTM! Excellent accessibility fix.

The implementation correctly uses CSS system colors (HighlightText and Highlight) within the forced-colors: active media query to ensure search highlights remain visible in Windows High Contrast Mode. This follows WCAG best practices for high contrast support and directly addresses the reported issue.

---

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.}

[Sidnioulz]

Tested on Linux Chrome with forced colour rendering mode, looks much better. As we're using the appropriate system colours, I'm confident the fix will also work on Windows HCM.

Thanks @Maelryn!

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 350a514

---

☁️ Nx Cloud last updated this comment at 2025-12-29 16:32:38 UTC

[Maelryn]

Thanks @Sidnioulz for the review and for testing this on Linux! I'm glad it works well Let me know if I need to do anything on my end!