After applying reflow, the keyboard focus is not visible for "hamburger" button: A11y_VisualStudioCodeServices_Editing Python in Visual Studio Code_Focus Visible

[Meghana274]

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility or the Divisional Driver".

GitHub Tags:

A11yTCS; #A11ySev2; #A11yMAS; #DesktopWeb; #ChromiumEdge; #A11yWCAG2.1; #BM_VisualStudioCodeServices_Web_July2024; #Visual Studio Code Services; #Win11; #FTP; #Desktopweb; #WCAG2.4.7; #Focus Visible; #Closed; #Regressed:06-28-24;

Environment Details: 

Application Name:  Visual Studio Code Services URL: https://code.visualstudio.com/docs/python/editing?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:

1. Change the OS display settings to a resolution of 1280x1024 at 100% dpi scaling.
2. Open the web page/ screen of the web application that is to be tested.
3. Zoom browser 400%.
4. Set the browser to full screen. Keyboard shortcut "F11" key.
5. 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/python/editing?dark-plus-v2 and press ENTER.
2. "Editing Python in Visual Studio Code" screen will appear.
3. Now Apply the Reflow configuration and TAB to hamburger icon.
4. Now observe whether the keyboard focus is visible for "Hamburger button" or not.

Actual:

After applying reflow, the keyboard focus is not visible for "hamburger" button.

Note: Issue is observed for below URL's also.

1. https://code.visualstudio.com/docs/python/editing?dark-plus-v2
2. https://code.visualstudio.com/docs/python/jupyter-support-py?dark-plus-v2
3. https://code.visualstudio.com/docs/python/linting?dark-plus-v2
4. https://code.visualstudio.com/docs/remote/remote-overview?dark-plus-v2
5. https://code.visualstudio.com/docs/remote/troubleshooting?dark-plus-v2
6. https://code.visualstudio.com/docs/remote/wsl?dark-plus-v2
7. https://code.visualstudio.com/docs/?dv=win64user&dark-plus-v2
8. https://code.visualstudio.com/docs/editor/command-line?dark-plus-v2
9. https://code.visualstudio.com/docs/getstarted/introvideos?dark-plus-v2
10. https://code.visualstudio.com/docs/getstarted/keybindings?dark-plus-v2
11. https://code.visualstudio.com/docs/getstarted/locales?dark-plus-v2
12. https://code.visualstudio.com/docs/java/java-debugging?dark-plus-v2
13. https://code.visualstudio.com/docs/languages/csharp?dark-plus-v2
14. https://code.visualstudio.com/docs/python/debugging?dark-plus-v2

Expected:

After applying reflow, the keyboard focus should be visible for "hamburger" button.

User Impact:

Low vision users won't be able to know where the keyboard focus is not visible.

Attachment:

[daviddossett]

Fixed via https://github.com/microsoft/vscode-website/pull/1804

[12-shweta]

@daviddossett we don't have access to PR, could you please help us with environment link

rev:shwarh

[12-shweta]

A11yPreview;

[MounicaDantuluri0809]

@daviddossett Issue is Fixed in the environment provided "https://code.visualstudio.com/?dark-plus-v2"

@Meghana274 Please help in closing the bug.

[Meghana274]

Verified the issue in below URL, the issue is fixed. So,clsoing the bug and added attachment. https://code.visualstudio.com/?dark-plus-v2