[Accessibility] The tree structure following anyfileName or when the three dots are expanded lacks a proper organization.

[Krituhar]

• VS Code Version: 1.88.0
• OS Version: MacOS Sonoma (v14.6.1)

[Issue] The tree structure following index.mjs or when the three dots are expanded lacks a proper organization. Each expanded tree item is missing role=group, especially since there are nested tree items involved.

[User Impact] Screen reader users will have difficulty determining the purpose and state of these controls.

[Code Reference]

<div class="monaco-list list_id_37 mouse-support selection-none element-focused last-focused" tabindex="0" role="tree" aria-label="Document Symbols" data-keybinding-context="51" aria-activedescendant="list_id_37_1">...</div>

[Recommendation] Ensure custom controls provide proper textual name, role, and state information. Properly structured native controls provide this information automatically. For custom controls, developers must explicitly add this information by using ARIA attributes.

Most modern browsers have an Accessibility section in the developer tools panel that will display an element's calculated name, role, and state information.

A control's name must represent the general purpose of the control and include any visible labeling text. It can be set through a variety of methods. Custom controls typically use the aria-label attribute or the aria-labelledby attribute to supply the name.

A control's role indicates the type of control, such as "checkbox" or "button". For custom controls, the role must be set with the role attribute. The ARIA specification only permits certain values for this attribute. Additionally, the ARIA in HTML specification prevents the use of certain roles on some elements. For a list of HTML elements and their permitted roles, see the ARIA in HTML specification: https://www.w3.org/TR/html-aria/#docconformance

A control's state indicates several possible pieces of information. Common states include expanded, current, selected, checked, and disabled. Most are indicated with similarly named ARIA attributes. Certain states can only be used with certain roles. For a list of roles and their allowed states, see the ARIA specification: https://www.w3.org/TR/wai-aria/#role_definitions

Screenshot:

[vs-code-engineering[bot]]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.92.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[meganrogge]

I haven't had any reports of this from screen reader users as an issue. We indicate it's a group by specifying expanded/collapsed.