“Switch to the Light Theme and Open Search Dialogue” buttons are not visible after applying Reflow: A11y_ Visual Studio Code Services_Open Source AI code editor screen _Reflow.

[AnKushSingh05]

GitHub Tags:

#A11yTCS; #A11yMAS; #A11ySev2; #A11yWCAG2.1; #DesktopWeb; #ChromiumEdge; #Win11; #Visual Studio Code Services; #E2E_Visual Studio Code Services_Web_Jan26; #WCAG1.4.10; #Reflow; #ES Chat;

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification."

Try ES Chat to learn more about the MAS rule and how to fix the issue. If you need more help, use our Teams channel or office hours.

Environment Details:

Application Name: Visual Studio Code Services
URL: https://code.visualstudio.com
Chromium Edge: Version 144.0.3719.104 (Official build) dev (64-bit)
Edition: Windows 11 Enterprise Insider Preview
Version: 24H2
OS build: 26558.1000

Prerequisites to apply resize:

1. Open the web page / screen of the web application that is to be tested.
2. Open Chrome/Edge dev Inspect tools. Keyboard shortcut "Ctrl+Shift+I" 
3. Ensure devtools are customized to Dock location: "undock into separate window". Minimize devtools so they are not obscuring the page.
4. Zoom the browser window of the page to be tested to 200%.
5. Adjust the browser window's width to 320px and full height. As long as devtools remain open while resizing the viewport size will be displayed in the upper right corner of the browser so the size can be verified. 

Repro steps:

1. Hit the URL: https://code.visualstudio.com
2. Tab navigate to “Switch to the Light Theme and Open Search Dialogue” buttons.
3. Observe that “Switch to the Light Theme and Open Search Dialogue” buttons are not visible after applying Reflow.

Actual Result:

When reflow is applied (e.g., zooming to 400% or resizing to a 320px-wide viewport), the "Switch to Light Theme" and "Open Search Dialogue" buttons are not visible. This prevents users from accessing these functionalities.

Expected Result:

The "Switch to Light Theme" and "Open Search Dialogue" buttons should remain visible and accessible when reflow is applied. The layout should adapt responsively to fit all critical content within the viewport without requiring horizontal scrolling.

User Impact:

Low vision users may experience significant challenges if the "Switch to the Light Theme" and "Open Search Dialogue" buttons are not visible after reflow is applied. This lack of visibility can hinder their ability to navigate and interact with the interface effectively, potentially impacting their overall user experience and accessibility. Ensuring these buttons remain accessible is essential for supporting users with low vision.

Attachment:

Bug.5.mp4