Open
Description
openedon Sep 4, 2024
- 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:
- Open VSCode.deva and under Explorer panel section, the accessible
role="tabpanel"
andaria-labelledby
is missing.
Screenshot:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment