[Supporting the Platform - Make code - New Project (Editor)]: Focus indicator is not visible on Basic, Input, more, Music, Led...etc buttons in High contrast (Aquatic, Desert, Dusk, Night sky) themes

[Chandangithb]

User Experience:

Color Sensitive people who rely on High contrast modes (to improve accessibility for vision impairments) will face difficulty in navigating the page if the focus indicator for any control is not adapting high contrast themes. As a result, they will be unable to identify the focused element. Note: User credentials should NOT be included in the bug.

Prerequisite:

• Open System settings.
• Navigate to 'Contrast theme' using tab key and activate it.
• Navigate to 'Contrast theme' dropdown and select 'Aquatic, 'Desert', 'Dusk' and 'Night sky' mode.
• Navigate to 'Apply' button and activate it.

Repro Steps:

1. Launch application URL : https://makecode.microbit.org/
2. Home page will open.
3. Navigate "New Project" option and select it.
4. Editor screen will open.
5. Navigate to search edit field.
6. Navigate to Basic, Input, more, Music, Led...etc buttons.
7. Verify whether focus indicator is visible on Basic, Input, more, Music, Led...etc buttons in high contrast theme or not.

Actual Result:

Issue: Focus indicator is not visible on Basic, Input, more, Music, Led...etc buttons In High contrast (Aquatic, Desert, Dusk, Night sky) themes. Observation: The issue is not repro with Application High contrast. Focus indicator is clearly visible on each control.

Expected Result:

In High contrast (Aquatic, Desert, Dusk, Night sky) themes, focus indicator should be properly visible on Basic, Input, more, Music, Led...etc buttons.

MAS Reference:

MAS 4.3.1 – No Disruption of Accessibility Features

ARIA Authoring Ref Link/Fluent Patterns Guidance /HITS Guidance:

NA

UIA/DOM details available:

NA

Reference Links:

• Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.
• External Bug Process: If this bug belongs to an external team, mark it as resolved/done and assign it back to the tester with notes on where to file/route the bug. For more information, please use this External Bug Process (sharepoint.com). “HCL Staff should not log any third-party external bugs. Should be routed to EDAD team”.
• Please reach out to C&AI Teams channel for any process-related queries.

Test Environment:

• OS Version: Windows 11 23H2 (OS Build:22631.3007)
• Browser: Chrome Version 121.0.2277.4 (Official build) dev (64-bit).
• Test Matrix: Chrome + JAWS
• URL: https://makecode.microbit.org/.

Attachments:

Application High Contrast:

System High Contrast:

[Chandangithb]

#Accessibility;#A11yMAS;#A11ySev3;#MAS4.3.1;#HCL;#Benchmark;#Win11-Chrome;#E2E-HCL-MakeCode-Feb2024;