Not able to navigate through with the items of dropdowns under "Overview" using keyboard arrow keys: A11y_VisualStudioCodeServices_Uninstall Visual Studio Code_Overview_Usable

[prabhudevu]

GitHub Tags:

#A11yTCS; #A11ySev4; #DesktopWeb; #ChromiumEdge; #BM_VisualStudioCodeServices_Web_July2024; #Visual Studio Code Services; #Win11; #FTP; #Desktopweb; #A11yUsable; #A11yUsablehigh

Environment Details: 

Application Name:  Visual Studio Code Services
URL: https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2#_windows
Microsoft Edge version 126.0.2592.68 (Official build) (64-bit)

Repro steps:

1. Launch the application URL: https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2#_windows and press ENTER.
2. "Uninstall Visual Studio Code" screen gets opened.
3. TAB to "dropdowns" under "Overview".
4. Observe that we are not able to navigate through with the items of dropdowns under "Overview" using keyboard arrow keys.

Actual:

Not able to navigate through with the items of dropdowns under "Overview" using keyboard arrow keys.

Note: Issue is repro with below URLs as well
https://code.visualstudio.com/docs/setup/uninstall?dark-plus-v2
https://code.visualstudio.com/docs/supporting/faq?dark-plus-v2
https://code.visualstudio.com/docs?dark-plus-v2
https://code.visualstudio.com/download?dark-plus-v2
https://code.visualstudio.com/insiders/?dark-plus-v2
https://code.visualstudio.com/?dark-plus-v2
https://code.visualstudio.com/docs/?dv=win64user&dark-plus-v2
https://code.visualstudio.com/docs/editor/command-line?dark-plus-v2
https://code.visualstudio.com/docs/getstarted/introvideos?dark-plus-v2
https://code.visualstudio.com/docs/getstarted/keybindings?dark-plus-v2
https://code.visualstudio.com/docs/getstarted/locales?dark-plus-v2
https://code.visualstudio.com/docs/java/java-debugging?dark-plus-v2
https://code.visualstudio.com/docs/languages/csharp?dark-plus-v2
https://code.visualstudio.com/docs/python/debugging?dark-plus-v2
https://code.visualstudio.com/docs/python/editing?dark-plus-v2
https://code.visualstudio.com/docs/python/jupyter-support-py?dark-plus-v2
https://code.visualstudio.com/docs/python/linting?dark-plus-v2
https://code.visualstudio.com/docs/remote/remote-overview?dark-plus-v2
https://code.visualstudio.com/docs/remote/troubleshooting?dark-plus-v2
https://code.visualstudio.com/docs/remote/wsl?dark-plus-v2

Expected

we should be able to navigate through the dropdowns using arrow keys.

User Impact

Keyboard users will not be able to move quickly through the dropdowns of overview as they need to navigate through all the items of dropdowns using only TAB key.

Attachment

[12-shweta]

#rev:shwarh

[12-shweta]

#A11yPreview;

[rzhao271]

I confirm that https://learn.microsoft.com/en-us/visualstudio/ide/index-writing-code?view=vs-2022 uses arrow keys to navigate the dropdowns, and the space bar to collapse and expand dropdowns.

@prabhudevu considering the behaviour on learn.microsoft.com, I believe the real issue with pages such as https://code.visualstudio.com/docs/setup/uninstall is that users are unable to use the space bar to collapse or expand dropdowns on the left side of the page.

[12-shweta]

Seems these are not dropdown @rzhao271 , these are kind of tree items, please correct me if i am wrong. If these are tree item, so basically
Enter or Space::Performs the default action (e.g. onclick event) for the focused node which is to activate the link, opening its target page.
Moves focus to the h1 element in the newly loaded content.
Down arrow ::Moves focus to the next node that is focusable without opening or closing a node. If focus is on the last node, does nothing.
Up arrow:: Moves focus to the previous node that is focusable without opening or closing a node. If focus is on the first node, does nothing.
Right Arrow:: When focus is on a closed node, opens the node; focus does not move.
When focus is on a open node, moves focus to the first child node.
When focus is on an end node, does nothing.
Left Arrow:: When focus is on an open node, closes the node.
When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
When focus is on a root node that is also either an end node or a closed node, does nothing.