One Small Accessibility Fix in VitePress

Description and use

In VitePress, the wrapper for code groups lacked a role and aria-label, hindering screen reader support. Added role="radiogroup" and aria-label="Code group" to the .tabs element; all tests passed.

Problem

VitePress code groups used native radio inputs and labels but the wrapper element lacked an explicit role and accessible name, hindering assistive technology communication.

Outcome

All 517 unit tests passed; no regressions introduced; accessibility markup improved for screen readers.

Workflow

• Identified issue #5530 on GitHub
• Reviewed code-group rendering logic in src/node/markdown/plugins/containers.ts
• Reviewed tab-switching logic in src/client/app/composables/codeGroups.ts
• Ensured changes would not break DOM hierarchy dependent JavaScript
• Added role and aria-label to .tabs element
• Updated unit tests and inline snapshot
• Ran focused code-group tests
• Ran full unit test suite (517 tests across 32 files)
• Verified type checking, formatting, and Git diff integrity
• Used AI assistant for codebase exploration but verified all suggestions manually
• Configured development tooling on Windows to run tests

Evidence

I kept the change minimal by adding role="radiogroup" and aria-label="Code group" to the existing .tabs element.

Source

All 517 unit tests passed across 32 test files.

Source