Controls Incorrectly Coded as Checkboxes Instead of Tabs #227514
Description
Does this issue occur when all extensions are disabled?: Yes/No
- VS Code Version: 1.92.2
- OS Version: 14.6.1 (23G93)
Description:
Controls such as "User" and "Workspace" are incorrectly coded as checkboxes rather than tabs, which makes them inaccessible to screen reader users who cannot determine which panels are revealed.
Steps to Reproduce:
- Navigate to the "User" and "Workspace" controls in VSCode.
- Use a screen reader to interact with these controls and notice they are treated as checkboxes instead of tabs.
User Impact: Screen reader users cannot identify that these controls reveal panels of content or determine which panel is currently active.
Expected Behavior: The controls should be coded as tabs with appropriate roles and states, including tablist, tab, and tabpanel, and use ARIA attributes like aria-controls and aria-selected.
Actual Behavior: The controls are coded as checkboxes, preventing screen readers from providing the necessary context for navigation.
Recommendation: Ensure proper tab structure by assigning role="tablist", role="tab", and role="tabpanel" where needed, and include ARIA attributes such as aria-controls and aria-selected to indicate the active panel.
