Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (vs-code[hero-editor=""]):A11y_code.visualstudio.com_AI4W

[kupatkar99]

GitHub Tags

#A11ySev3; #A11yTCS; #ChromeiumEdge; #DesktopWeb; #Win11; #Visual Studio Code Services; #BM_VisualStudioCodeServices_Web_May2025; #nested-interactive; #WCAG4.1.2; #Name Role Value; #WCP; #P1_WCP;#A11yMAS;

Environment Details

Application Name: Visual Studio Code Services
URL: https://code.visualstudio.com/
Microsoft Windows 11 Enterprise (25H2) Build on 26200.6899
Chromium Edge: Version 142.0.3595.53 (Official build) (64-bit)

Repro Steps

1. Launch the application URL: https://code.visualstudio.com/.
2. The "Open source AI Code editor" Screen will get open.
3. Run accessibility insights foe Web.
4. Observe the issue

Issue:

Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (nested-interactive - https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=msftAI)

Target application:

Visual Studio Code - The open source AI code editor - https://code.visualstudio.com/

Element path:

vs-code[hero-editor=""]

Snippet:

Related paths:

#hero-tab-MailListItem-tsx-1
#hero-tab-delegate-to-cloud-agent-2

How to fix:

Fix any of the following:
Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with aria-hidden="true")

Environment: Microsoft Edge version 142.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.46.0 (axe-core 4.10.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Attachment: