Accessibility: Add screenreader-only text to table cells for status indicators
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
Research direction
The issue names no files or tests; start by locating the table-cell rendering for insert and delete statuses. Check how row numbers and status indicators are exposed, then verify that each cell includes screen-reader-only text such as “added” or “deleted” without relying on color.
Written by the indexing model from the issue text.
Description
First, thank you for this fantastic component library! It's easy to use and obviously well-maintained.
I've noticed that the "insert" and "delete" statuses are currently represented solely by color. While this is visually effective, it creates a significant accessibility barrier for users who are colorblind or rely on screen readers.
To improve accessibility, I'd like to suggest adding a element within the table cell that also indicates the row number, which would be visible only to screen readers and would add a text-based status. This would contain a text description, such as "added" or "deleted," that a screen reader could announce, providing an alternative to the color-based visual cue.
Thank you for your consideration and for all the hard work you put into this project!
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 88
- PR merge metrics
- No merged PRs in 30d
Getting set up
This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.
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.
More from otakustay/react-diff-view
-
pinned
Difficulty 1/5 Under an hour Newbie friendliness 62/100
otakustay/react-diff-view#101 · 5 comments ·
-
Difficulty 4/5 3-5 days Newbie friendliness 42/100
otakustay/react-diff-view#238 · 1 comment ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
otakustay/react-diff-view#237 ·
-
跨行注释未闭合时的代码被高亮为注释了Open
Difficulty 3/5 1-2 days Newbie friendliness 45/100
otakustay/react-diff-view#233 · 2 comments ·
-
pinned
Difficulty 4/5 3-5 days Newbie friendliness 35/100
otakustay/react-diff-view#185 · 15 comments ·
All issues in otakustay/react-diff-view
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
clawsweeper:needs-maintainer-review clawsweeper:needs-product-decision clawsweeper:no-new-fix-pr impact:session-state issue-rating: 🌊 off-meta tidepool P2
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
openclaw/openclaw#165245 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
-
agent-canvas bug priority:low ready-for-dev
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
🐛 bug
Difficulty 2/5 1-3 hours Newbie friendliness 61/100
spicetify/marketplace#1262 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 Half a day Newbie friendliness 68/100
Maintainers usually reply within 1 day