A11yTCS; #A11ySev2; #WCAG4.1.2; #BM-VisualStudioCodeClient-Win32-Jan2024; #DesktopApp; #Visual Studio Code Client; #A11yMAS; #Name Role Value; #AILimited; #Win11; #AI4D;

Environment Details:

Application Name: Visual Studio Code Client Visual Studio Code: Version 1.89.1(User setup)

Repro Steps:

Install VS Code
Install the Azure Machine Learning extension and sign in with appropriate Credentials.
Open the Command Palette via the keyboard command Ctrl+Shift+P (or Command+Shift+P for MacOS)
Type "Open User Settings" and select the option from the dropdown list called "Preferences: Open User Settings") and press enter
In the search box, type "Azure Machine Learning"
Tab until the list of settings is active
Use the up/down arrows to navigate between settings
Tab till "User" menuitem and Verify whether the correct role is defined for "User", "Workspace" and "Remote[Azure ML: v-...]" or not.

Actual Result:

Incorrect role is defined for menuitems "User", "Workspace" and "Remote[Azure ML: v-...]" as checkboxes

Expected Result:

Correct role should be defined for "User", "Workspace" and "Remote[Azure ML: v-...]" as menuitems.

User Impact:

Screen reader users will face difficulty in accessing the control if the correct control type is not defined for the controls.

Attachment:

meganrogge commented 3 months ago

I'll leave this with @rzhao271 - IMO, the checkboxes make sense because the menu is either active or not.

tbombach commented 3 months ago

I found this previous discussion of the role for [User, Workspace, etc] items in the Settings Scope Switcher: https://github.com/microsoft/vscode/issues/97068

I think the recommendation in that discussion suggested that checkboxes can be confusing since it implies that multiple scopes can be active at the same time (i.e. multiple items with checked=true). But since User/Workspace/etc are mutually exclusive in the UI, maybe radio buttons or tablist/tab might be better suited for the role.

If I'm finding the right place in the code, it looks like the Scope Switcher is an ActionBar: https://github.com/microsoft/vscode/blob/ee56498a565e195dc4702c997c93c885ed9a0ccd/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts#L260 which could take an override for the ariaRole in the IActionBarOptions it passes for instantiation

It looks like the ActionViewItem in the container get set as role="checkbox" when they get checked/unchecked: https://github.com/microsoft/vscode/blob/ee56498a565e195dc4702c997c93c885ed9a0ccd/src/vs/base/browser/ui/actionbar/actionViewItems.ts#L425

rzhao271 commented 1 month ago

I confirmed this issue comes from https://github.com/microsoft/vscode/pull/182647/files#diff-b3cf600b1f7d2ffd25e21b29191fc6a7d65a8b636b6d8de2858ecafafb3fd966R416

Therefore, we are using the checked property to determine whether an ActionViewItem is "selected" or "checked". However, the menuitems in the Settings editor represent tabs, and there is another approach to annotate tabs:

Considering this issue a bug @meganrogge

rzhao271 commented 1 month ago

The change should now be in the latest VS Code Insiders. @kupatkar99 could you verify the issue is now fixed using VS Code Insiders?

tbombach commented 1 month ago

Hi @rzhao271! @kupatkar99 closed the downstream issue in our Azure ML Extension repository where this issue was originally found during accessibility testing: https://github.com/microsoft/vscode-tools-for-ai/issues/2376. The issue was closed as fixed with your changes in insiders, so I think this issue in VS Code repo can be closed too. Here is the comment: https://github.com/microsoft/vscode-tools-for-ai/issues/2376#issuecomment-2244295411

Thank you so much for your work fixing this!

microsoft / vscode

Incorrect role is defined for menuitems "User", "Workspace" and "Remote[Azure ML: v-...]" as checkboxes.: A11y_VS Code Client_Settings_AI4D #214227

GitHub Tags