mdx-editor / mdx-editor/editor
Improve accessibility
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 307
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 5
Description
If you want to ask for support or request features, sponsor the project and contact me over email.
- I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- I have read the documentation and cannot find an answer.
Describe the bug
If found a few easy (and yet important) improvments on accessibility:
- We cannot put id on the textarea field (
div role="textbox") neither customizing its aria-label / aria-labelledby (set toaria-label="editable markdown") so we cannot customize the accessible name
- All buttons have "radio" role which has no sense if they can be activated together (for exemple the bold, italic and underline buttons are independants, they shouldn't be specified by the "radio" role). Plus, the
button type="button"is redundant. For me, the only button which should be identified as radio (and grouped into a proper fieldset) are:- The list buttons
- The superscript / subscript buttons
Desktop (please complete the following information):
- OS: Windows
- Browser: Brave Version 1.50.120 | Chromium: 112.0.5615.121
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 editable div with role="textbox" and the toolbar buttons described in the issue, then inspect how their accessible names and ARIA roles are assigned. Done means consumers can provide an id and accessible name for the editor, and independent formatting controls no longer use radio semantics while the specified grouped controls retain appropriate semantics.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100