fix(theme-default): code group accessibility

nruffing commented 7 months ago

Before submitting the PR, please make sure you do the following

[X] Read the Contributing Guidelines.
[X] Provide a description in this PR that addresses what the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. close #123).

What is the purpose of this pull request?

[X] Bug fix
[ ] New feature
[ ] Documentation update
[ ] Other

Description

While doing some accessibility testing on my site written in the RC release of Vuepress 2 I came across some accessibility issues with the code group and code group item components.

I have been testing with the latest version of the axe chrome extension.

It reported on the code block item component that Elements must only use supported ARIA attributes.
https://dequeuniversity.com/rules/axe/4.8/aria-allowed-attr?application=AxeChrome

The code group item component renders the aria-selected attribute which should only be on elements with the roles gridcell, cell, row, or tab.

Looking through the MDN documentation at ARIA attributes and tab roles the code group item should actually have the tabpanel role and the button to select the tab should have the tab role.

The changes in this PR were modeled after the example on MDN. Also, since the roles have requirements of being direct parent/child of each other I removed the wrapping ul and li elements and only had to slightly alter the CSS to keep the same visual result.

I also added a few color variables for some hard coded colors while I was in there.

Screenshots

Before

After

Other Accessibility Issues

The only other accessibility I came across was that all of the heading anchors have aria-hidden attributes but are still focusable via keyboard navigation. There was a bit of discussion around this already in the markdown-it-anchor repo and you can address this by just using the headerLink render function instead of the ariaHidden render function since it wraps the entire header in an anchor. I applied this change in my site config directly but I am happy to create a PR to make that the default behavior if that is desired.

meteorlxy commented 7 months ago

@nruffing Thanks a lot! However, we just migrated default theme into another repo. Would mind create a new PR in that repo? Or we might help to implement this change, but it would be better to not omit your contribution. Thanks!

nruffing commented 7 months ago

No problem. I will create a PR in the new repo.

vuepress / core