Skip to content

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

Open
@rschristian

Description

@rschristian

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions