Content in “Copilot Chat Section” is not visible after applying reflow in 'Open source AI code editor' screen: 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 Agent Mode image.
3. Tab navigate to “Copilot Chat Section”
4. Observe that Content in “Copilot Chat Section” is not visible after applying reflow in 'Open source AI code editor' screen.

Actual Result:

When reflow is applied (e.g., zooming in to 400% or resizing the viewport to 320px wide), the content in the "Copilot Chat Section" is not visible in the "Open Source AI Code Editor" screen. Users cannot access or interact with the chat content due to this issue.

Expected Result:

The "Copilot Chat Section" should remain visible and accessible when reflow is applied. The layout should adjust responsively to fit within the viewport without requiring horizontal scrolling or hiding essential content.

User Impact:

Low vision users may encounter challenges if the content in the “Copilot Chat Section” becomes inaccessible after reflow is applied on the 'Open source AI code editor' screen. Ensuring that this section remains visible and usable is important for accessibility, as any loss of visibility could hinder these users from effectively interacting with the chat features. Addressing this issue will help provide a more inclusive experience for everyone.

Attachment:

Bug.3.mp4