While navigating through "select a subscription" list using the tab key, two keyboard focus indicators appear on 2 different list items: A11y_VS Code_Appling filter on subscription_keyboard

[kapilvaishna]

Please do not close this bug. This bug should only be closed by Trusted Tester after verification.
"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

GitHub Tags

#A11yMAS; #A11yTCS; #Win32; #DesktopApp; #A11ySev2; #Visual Studio Code Client; #BM-VisualStudioCodeClient-Win32-Jan2024; #WCAG2.1.1; #FTP; #Keyboard;

Environment Details:

Application: VS Code
Visual studio code version: 1.96.3
OS: Windows 11 Enterprise 24H2
Build: 26100.2605
Screen reader
NVDA Version: 2024.4.1

Repro Steps

1. Turn on NVDA screen reader
2. Launch the VS Code.
3. Install the Azure Machine Learning extension and sign in.
4. Tab until the left toolbar (list of icons). This toolbar has a file icon, search icon, settings, etc.
5. Use the up/down arrow keys to navigate to the "Azure" icon and press enter
6. The Azure panel will now be active next to the toolbar.
7. Tab until the Machine Learning dropdown.
8. Tab till any subscription for example AML V1 Personal subscription.
9. Tab until the "Filter" button and press Enter. It will be a button with a funnel icon.
10. TAB till "Select subscriptions" combo box.
11. TAB till "Select subscriptions" list and press down arrow key to move focus to any list item.
12. Press "Shift + TAB" key to navigate "Select subscriptions" combo box.
13. Now navigate to list item of "Select subscriptions" list with TAB key and press space to check/uncheck.
14. Observer that this action will check or uncheck two list items because one more focus is there on list item which we can access with arrow key only.

Actual Experience

While navigating through "select a subscription" list using the tab key, two keyboard focus indicators appear on 2 different list items. When user tries to select/deselect any checkbox, action is getting performed at two different checkboxes which is kind of confusing to the users

Expected Experience

Two keyboard focus indicators should not appear in the list.

User Impact:

Screen reader used or keyboard used will face difficulty because when pressing the space key, this action will check or uncheck two list items simultaneously and screen reader will get announcement about one list item only.

Attachment

NVDA screen reader attachment

[TylerLeonhardt]

It's probably one indicator from the list and one from the checkbox itself.