microsoft / vscode-docs

Public documentation for Visual Studio Code
http://code.visualstudio.com/docs
Other
5.56k stars 4.51k forks source link

After applying Reflow "Visual studio code" page is getting 2 Scroll bars: A11y_VisualStudioCodeServices_Gettingstarted_Reflow #7409

Closed PrasannaPolisetty123 closed 2 weeks ago

PrasannaPolisetty123 commented 2 weeks ago

GitHub Tags:

A11yTCS; #A11ySev3; #A11yMAS; #DesktopWeb; #ChromiumEdge; #WCAG1.4.10;#Reflow;#A11yWCAG2.1;#BM_VisualStudioCodeServices_Web_July2024; #Visual Studio Code Services; #Benchmark; #Win11; #FTP; #Desktopweb;#PendingEnvironment;#ETA:07-03-24;

Environment Details: 

Application Name:  Visual Studio Code Services URL: https://code.visualstudio.com/docs/?dv=win64user&dark-plus-v2 Microsoft Edge version 126.0.2592.68 (Official build) (64-bit)

Pre-requisites:(Reflow)

  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.

    Alternatively:

  6. Change the OS display settings to a resolution of 1280x1024 at 100% dpi scaling.
  7. Open the web page/ screen of the web application that is to be tested.
  8. Zoom browser 400%.
  9. Set the browser to full screen. Keyboard shortcut "F11" key.
  10. If any browser sidebars are still visible (e.g. the Edge discover sidebar), these must be closed.

Repro steps:

  1. Launch the application URL https://code.visualstudio.com/docs/?dv=win64user&dark-plus-v2 and press ENTER. "visual studio code" "page will open.
  2. Now Apply the Reflow configuration and observe that "visual studio code" page is getting 2 scroll bars.

Note: Issue is repro with below URLS as well

  1. https://code.visualstudio.com/docs/python/editing?dark-plus-v2
  2. https://code.visualstudio.com/docs/python/linting?dark-plus-v2
  3. https://code.visualstudio.com/docs/remote/troubleshooting?dark-plus-v2
  4. https://code.visualstudio.com/docs/python/debugging?dark-plus-v2

    Actual :

    After applying reflow "visual studio code" page is getting 2 scroll bars.

    Expected

    After applying Reflow "visual studio code" page should not get 2 scroll bars.

User Impact

Low vision users will get impacted if the "visual studio code" page is getting 2 scroll bars.

Attachment

reflow

reflow 3

reflow 1

reflow 2

12-shweta commented 2 weeks ago

Rev:shwarh;

PrasannaPolisetty123 commented 2 weeks ago

@daviddossett could you please provide the environment where the issue is fixed , we will verify the bug As per updated Resolved Bug Process (sharepoint.com), if input is not provided by <Current Date + 5 days (for e.g. 3rd July 2024)> then we'll be reactivating the bug.

12-shweta commented 2 weeks ago

A11yPreview;