Search icon not visible in High Contrast mode

[Nina-1210]

Describe the bug
When Microsoft MakeCode is set to High Contrast theme, the search icon in the search bar becomes invisible. The icon appears normally in all other themes.

Steps to reproduce the behavior:
1.Navigate to Microsoft MakeCode Arcade
2.Open any project and set the Theme to High Contrast.
3.Search any items in the Toolbox.
4.Observe the search icon.

Actual behavior
Search icon is not visible in High Contrast mode.

Expected behavior
The search icon should remain clearly visible and accessible in High Contrast mode, consistent with other themes.

Screenshots

Additional context
1.OS: Windows 11 24H2 & iPad Pro 11 26.2.1
2.Browser: Microsoft Edge, Chrome, Firefox and Safari
3.Arcade version: 3.0.1
4.Microsoft MakeCode version: 12.2.23

[github-actions]

Recommendation for Triage

Issue Type: bug

Status: info-complete

Label(s): high contrast, accessibility, toolbox

Duplicate Issue(s): No exact duplicate found

Likely Related:

• [Green Screen] Toolbox background disappears in Debug mode when Green Screen is enabled #7262 (High Contrast + Green Screen toolbox background issue)
• Asset Preview missing background or border color in High Contrast mode #7162 (High Contrast Asset Preview missing background/border)
• The toolbox is not clearly visible when High Contrast and Green Screen are turned on. #6857 (High Contrast + Green Screen toolbox visibility)

Suggested Priority: p2

Complexity: low

Copilot Agent Ready: ✅ Yes

Recommendations for Assignee

Analysis

This is a visual bug affecting accessibility in High Contrast mode where the search icon in the toolbox becomes invisible. The issue is well-documented with clear reproduction steps, screenshots, and affects multiple browsers/platforms (Windows 11, iPad Pro, Edge, Chrome, Firefox, Safari). This is an accessibility concern that impacts users who rely on High Contrast mode. The fix likely involves adjusting CSS/styling for the search icon to ensure proper contrast in High Contrast theme mode.

---

Duplicate & Related Issues

Duplicates:

• No exact duplicates found

Related Issues:

• [Green Screen] Toolbox background disappears in Debug mode when Green Screen is enabled #7262 - Similar High Contrast theme issue with toolbox background when Green Screen is enabled
• Asset Preview missing background or border color in High Contrast mode #7162 - High Contrast theme issue with Asset Preview missing background/border colors
• The toolbox is not clearly visible when High Contrast and Green Screen are turned on. #6857 - High Contrast + Green Screen combination causing toolbox visibility problems

Pattern: There appears to be a broader pattern of High Contrast theme styling issues affecting various UI components (toolbox, asset preview, search icon). These may share a common root cause in how High Contrast theme styles are applied.

---

Location Hints

Likely fix location: microsoft/pxt (pxt-core)

The toolbox search functionality and High Contrast theme styling are part of the core MakeCode editor framework, not arcade-specific. The fix likely needs to be made in the pxt-core repository in one of these areas:

• Core editor theme/styling files handling High Contrast mode
• Blockly toolbox integration CSS/LESS files
• Search icon rendering in the toolbox component

Since no arcade-specific theme overrides were found for the search icon or High Contrast mode in this repository (theme/ directory only has arcade-dark, arcade-light, and arcade-orange themes), the issue originates from the base pxt-core implementation.

---

Next Steps

Copilot Coding Agent Assessment:

Can assign to Copilot Coding Agent: ✅ Yes, ready as-is

Reasoning: This is a straightforward CSS/styling fix with clear reproduction steps and expected behavior. The issue is well-documented with screenshots showing the problem across multiple browsers. A coding agent can identify the search icon styles in High Contrast mode and ensure proper color contrast. The fix should be isolated to theme/styling files without requiring architectural changes.

Note for assignee: While this issue is filed in pxt-arcade, the actual fix will need to be made in the microsoft/pxt (pxt-core) repository as it affects the core editor's High Contrast theme implementation. This is normal for the multi-repo MakeCode workspace and doesn't require the reporter to re-file the issue.

AI generated by Triage