A11y_Visual Studio Code Services_Docs Python_Testing_Reflow : On applying reflow resolution(320*256) two scroll bars are appearing for whole page.

[manaswita-chougule]

GitHub Tags

#WCAG1.4.10; #A11ySev3; #Reflow; #A11yTCS; #A11yWCAG2.1; #Chrome; #DesktopWeb; #Win11; #Visual Studio Code Services; #BM_VisualStudioCodeServices_Web_Apr2023;

Environment Details

Application Name: Visual Studio Code Services
URL: https://code.visualstudio.com/
Microsoft Windows 11 Enterprise 10.0.22621 Build 22621
Chrome Version 113.0.5672.93 (Official Build) (64-bit)

Pre Requisites:

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 height and width to the required viewport of 320px*256px. 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 application URL: https://code.visualstudio.com/
2. Apply reflow.
3. Tab till "Docs" link and press enter.
4. Tab till "Python" link in the left navigation and press enter.
5. Tab till "Testing" link which is present under the python and press enter.
6. Observe that on applying reflow resolution(320*256) two scroll bars are appearing for whole page.

Actual Result

On applying reflow resolution(320*256) two scroll bars are appearing for whole page.

Expected Result

On applying reflow resolution(320*256) two scroll bars are appearing for whole page. Only for the specific element such as image, table, etc. two scroll bars can be accepted.

User Impact

People with low display resolution may find difficulty in viewing the page and will miss the important content of the page.

Attachment:

[rzhao271]

Note to self: the tables are causing https://code.visualstudio.com/docs/python/testing to overflow.

[manaswita-chougule]

@rzhao271 The table which is causing this overflow can have two scroll bars, i.e. the table element only can have two scroll bars instead of the entire page. As the tables have exception to have two scroll bars in reflow. Thanks!