Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Code snippet language picker missing required accessibility information #4790

Open
rschristian opened this issue Dec 25, 2024 · 1 comment

Comments

@rschristian
Copy link
Contributor

Just want to quickly drop mention as I happened to run into it tonight: the language picker (JS/TS) associated with most code snippets is missing the required accessibility props to tie a particular tab with a tabpanel. At a minimum, each tab should have aria-controls set w/ the ID of the corresponding tabpanel and you'll probably also want to add aria-labelledby to the tabpanel pointing back at the corresponding tab. Without this information, it's quite difficult for non-sighted users to discern the relationships between particular tabs and tabpanels.

MDN has a very comprehensive example going over this, should be a quick & easy fix. Took quick peek myself but couldn't find where you were creating these components -- maybe it's a Docusaurus thing? Not sure.

@markerikson
Copy link
Collaborator

Yeah, this is just the <TabItem> that's built into Docusaurus. Probably best to file an issue over there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants