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

[kupatkar99]

"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

GitHub Tags

#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:

1. Install VS Code
2. Install the Azure Machine Learning extension and sign in with appropriate Credentials.
3. Open the Command Palette via the keyboard command Ctrl+Shift+P (or Command+Shift+P for MacOS)
4. Type "Open User Settings" and select the option from the dropdown list called "Preferences: Open User Settings") and press enter
5. In the search box, type "Azure Machine Learning"
6. Tab until the list of settings is active
7. Use the up/down arrows to navigate between settings
8. 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]

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

[tbombach]

I found this previous discussion of the role for [User, Workspace, etc] items in the Settings Scope Switcher: #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:

vscode/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts

Line 260 in ee56498

this.settingsSwitcherBar = this._register(new ActionBar(settingsTabsWidget, {

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:

vscode/src/vs/base/browser/ui/actionbar/actionViewItems.ts

Line 425 in ee56498

this.label.setAttribute('role', 'checkbox');

[rzhao271]

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:

• aria-selected MDN
• ARIA: tab role MDN

Considering this issue a bug @meganrogge

[rzhao271]

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]

Hi @rzhao271! @kupatkar99 closed the downstream issue in our Azure ML Extension repository where this issue was originally found during accessibility testing: microsoft/vscode-tools-for-ai#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: microsoft/vscode-tools-for-ai#2376 (comment)

Thank you so much for your work fixing this!