One Small Accessibility Fix in VitePress

说明与用途

在 VitePress 中，代码组的包装元素缺少角色和 aria-label，影响屏幕阅读器。为 .tabs 元素添加 role="radiogroup" 和 aria-label="Code group"，所有测试通过。

问题

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

结果

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

工作流

• 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

证据

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

来源

All 517 unit tests passed across 32 test files.

来源