Skip to content

[Accessibility] The Explorer section view needs role and name information. #227580

Open

Description

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

[Issue]
The tab panel for "Explorer (Ctrl+Shift+E) - You have 1 unsaved changes" tab lacks name and role information.

[User Impact]
Screen reader users will be unable to determine that these controls reveal panels of content and which panel is currently revealed.

[Code Reference]

<div class="part sidebar left pane-composite-part" id="workbench.parts.sidebar" **role="none"** 
(...)>
</div>

[Recommendation]
Ensure page tabs provide state and role.

For tabs, the following information is expected:

  • Each panel container must have role="tabpanel".
  • If the tablist has a visible label, the tablist element must have aria-labelledby set to the ID of the labelling element. Otherwise, the tablist element must have aria-label set to the accessible name.
  • Each tab must have aria-controls set to the ID of its corresponding tabpanel.
  • Tabpanel elements must have aria-labelledby set to the ID of their corresponding tab.
  • If the tablist is vertically oriented, it must have aria-orientation="vertical".

Note: Also when contributes any new extension webviews/tree views, ensure to have aria attributes corresponding to the Explorer tabpanel section.

Steps to Reproduce:

  1. Open VSCode.deva and under Explorer panel section, the accessible role="tabpanel" and aria-labelledby is missing.

Screenshot:

Screenshot 2024-09-04 at 6 08 19 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

accessibilityKeyboard, mouse, ARIA, vision, screen readers (non-specific) issuesbugIssue identified by VS Code Team member as probable bug

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions