a11y: ensure task priority icons include screen reader accessible text
Open
Beginner friendly
Nobody has claimed this yet.
area:tasks
beginner friendly
community
contributions-welcome
difficulty:beginner
enhancement
good first issue
help wanted
time:<15m
type:a11y
up-for-grabs
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
🎯 What needs to be done
Add a <span className="sr-only">Priority: {priority}</span> element next to priority flame/flag icons in task-card.tsx.
Why this matters
Assistive technologies cannot infer priority purely from SVG icon colors. Hidden screen reader text ensures equal access to urgency information.
📍 Where to work
src/features/tasks/components/task-card.tsx
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
Open src/features/tasks/components/task-card.tsx and inspect the priority flame and flag icons. Add the specified screen-reader-only text next to those icons, using the current priority value. Done when each priority icon exposes readable “Priority” text for assistive technologies.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 95/100