mdx-editor / mdx-editor/editor

Improve accessibility

Open
#544 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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 to aria-label="editable markdown") so we cannot customize the accessible name

image

  • 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

image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Brave Version 1.50.120 | Chromium: 112.0.5615.121

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.