[Beta] Inaccessible UI Components
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Accordion a11y issues
- When an Accordion trigger is focused, pressing down/up should focus the next/previous trigger.
- When an Accordion trigger is focused, pressing space should expand/contract its panel.
- The Accordion trigger should be a
<button>rather than a<a>. - The Accordion trigger should be wrapped in a
htag. - The Accordion trigger should have an
aria-expandedattr set totruewhen open. - The Accordion trigger should have an
aria-controlsattr.
The same goes for the Tabs component (found in the sidebar and on code blocks), it fails a11y in many ways. I'd suggest you look at UI libs like Radix or ReachUI which provide high-quality, accessible UI components.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the Accordion and Tabs components used in the sidebar and code blocks, then compare their behavior with the Radix and ReachUI references linked in the issue. Done means the listed keyboard interactions and button, heading, aria-expanded, and aria-controls requirements are addressed for both components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100