One Small Accessibility Fix in VitePress

Описание и применение

В VitePress элемент, оборачивающий группы кода, не имел роли и атрибута aria-label, что затрудняло работу экранных читалок. Добавлен role="radiogroup" и aria-label="Code group" к элементу .tabs, тесты пройдены без ошибок.

Задача

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.

Источник