[Supporting platform - Make code- New Project]: After setting the viewport to 320*256px, settings icon is overlapping with expand collapsed button.

[BURRAshiva01]

User Experience:

Low vision users who depend on zooming functionality for better readability will be impacted if the content present on the page is not visible or truncated after setting the viewport to 320*256px. They will not be able to access the share the project controls to share the project.

Note: User credentials should NOT be included in the bug.

Prerequisite:

Achieve viewport 320 X 256 by adjusting the browser. (Open developer's tool, resize and zoom the browser to achieve viewport 320 X 256).

Repro Steps:

1. Launch application URL: https://makecode.microbit.org/.
2. Home page will open and create 'New project'
3. Navigate "settings" option and select it

Actual Result:

Issue: : After setting the viewport to 320*256px, settings icon is overlapping with expand/collapsed button.

Expected Result:

After setting the viewport to 320*256px, 'Settings' control should be visible clearly without overlapping or truncation.

MAS Reference:

MAS 1.4.10 – Reflow

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

UIA/DOM details available: NA

Note:: Same issue replicating at 'Simulator' control.

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
URL: https://makecode.microbit.org/.

Attachment: