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');