Skip to content

fix(accessibility): add ARIA attributes to goal progress bar#2179

Merged
Priyanshu-byte-coder merged 3 commits into
Priyanshu-byte-coder:mainfrom
VIDYANKSHINI:fix/goal-progress-accessibility
Jun 8, 2026
Merged

fix(accessibility): add ARIA attributes to goal progress bar#2179
Priyanshu-byte-coder merged 3 commits into
Priyanshu-byte-coder:mainfrom
VIDYANKSHINI:fix/goal-progress-accessibility

Conversation

@VIDYANKSHINI

Copy link
Copy Markdown
Contributor

Summary

Added missing ARIA attributes to the goal progress bar inside GoalTracker.tsx to make it fully accessible to screen reader users and compliant with WCAG 2.1 AA standards.

Closes #1507


Type of Change

  • Bug fix
  • Accessibility improvement
  • New feature
  • Documentation update
  • Refactor / code cleanup

Changes Made

  • Updated the inner progress <div> in src/components/GoalTracker.tsx with role="progressbar".
  • Added dynamic aria-valuenow, aria-valuemin, and aria-valuemax attributes reflecting the completion percentage.
  • Added a descriptive aria-label formatted as [Goal Title]: [Current] of [Target] [Unit].

How to Test

  1. Open the DevTrack dashboard locally with at least one active goal.
  2. Run an accessibility audit using browser DevTools or Axe.
  3. Verify that the progress bar now exposes the correct roles and ARIA values.
  4. If using a screen reader (like VoiceOver or NVDA), navigate to the progress bar and confirm it accurately announces the goal's title and its current progress values.

Screenshots (if UI change)

N/A (Invisible underlying DOM updates only)


Checklist

  • Linked issue in summary
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Self-reviewed the diff

Copilot AI review requested due to automatic review settings June 7, 2026 15:00
@vercel

vercel Bot commented Jun 7, 2026

Copy link
Copy Markdown

@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.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:accessibility GSSoC type bonus: accessibility (+15 pts) type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature labels Jun 7, 2026
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-label describing the goal and current progress

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/GoalTracker.tsx Outdated
<div className="h-2 overflow-hidden rounded-full bg-[var(--control)]">
<div
role="progressbar"
aria-valuenow={Math.round(pct)}
@VIDYANKSHINI

Copy link
Copy Markdown
Contributor Author

Thanks for the suggestion! Even though pct is clamped during initialization, I have added explicit [0, 100] bounds clamping directly to aria-valuenow as requested to guarantee it remains consistent with the rendered progress width and safe for assistive technologies.

@Priyanshu-byte-coder Priyanshu-byte-coder added gssoc:approved GSSoC: PR approved for scoring level1 GSSoC Level 1 - Beginner (10 points) quality:clean GSSoC: Clean quality multiplier (×1.2) labels Jun 8, 2026
@Priyanshu-byte-coder Priyanshu-byte-coder merged commit d41dd92 into Priyanshu-byte-coder:main Jun 8, 2026
13 checks passed
@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown

🎉 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved GSSoC: PR approved for scoring gssoc26 GSSoC 2026 contribution level1 GSSoC Level 1 - Beginner (10 points) quality:clean GSSoC: Clean quality multiplier (×1.2) type:accessibility GSSoC type bonus: accessibility (+15 pts) type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Goal Progress Bar Has No aria-label for Accessibility

3 participants