Improve more actions button accessibility in the context menu component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 13.8k
- Forks
- 1.4k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 5
Description
Problem to solve
The more actions button in the context menu component currently comes with poor accessibility.
Generally, a div-based button can become quite accessible, however, you'd still need to make the element focusable and define event handlers when a button-based button automatically takes care of this. See relevant documentation[1][2][3][...].
For example, in this case where we're using a div-based button, we're missing the basic role="button" attribute, which could improve the existing situation. ➿
This component is also used 11 times across the codebase, most commonly within the Items List component. 🔍
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 ContextMenu component and inspect its usages, especially components/dashboard/src/components/ItemsList.tsx. Compare the more actions element with the WAI-ARIA button guidance linked in the issue; done means the control has the requested button semantics and its accessibility behavior is verified across the listed usages.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100