fix(accessibility): add ARIA attributes to goal progress bar#2179
Conversation
|
@VIDYANKSHINI is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds accessibility semantics to the goal progress indicator so assistive technologies can correctly interpret progress state.
Changes:
- Annotates the progress bar with
role="progressbar"and ARIA value attributes - Adds an
aria-labeldescribing the goal and current progress
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="h-2 overflow-hidden rounded-full bg-[var(--control)]"> | ||
| <div | ||
| role="progressbar" | ||
| aria-valuenow={Math.round(pct)} |
|
Thanks for the suggestion! Even though |
d41dd92
into
Priyanshu-byte-coder:main
|
🎉 Merged! Thanks for contributing to DevTrack. If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers. Keep an eye on open issues for your next contribution! |
Summary
Added missing ARIA attributes to the goal progress bar inside
GoalTracker.tsxto make it fully accessible to screen reader users and compliant with WCAG 2.1 AA standards.Closes #1507
Type of Change
Changes Made
<div>insrc/components/GoalTracker.tsxwithrole="progressbar".aria-valuenow,aria-valuemin, andaria-valuemaxattributes reflecting the completion percentage.aria-labelformatted as[Goal Title]: [Current] of [Target] [Unit].How to Test
Screenshots (if UI change)
N/A (Invisible underlying DOM updates only)
Checklist
npm run lintpasses locallynpm run type-check)