Skip to content

fix(a11y): ensure productivity level badge is screen-reader accessible (#952)#2206

Open
mallya-m wants to merge 7 commits into
Priyanshu-byte-coder:mainfrom
mallya-m:fix/a11y-productivity-badge-952
Open

fix(a11y): ensure productivity level badge is screen-reader accessible (#952)#2206
mallya-m wants to merge 7 commits into
Priyanshu-byte-coder:mainfrom
mallya-m:fix/a11y-productivity-badge-952

Conversation

@mallya-m
Copy link
Copy Markdown
Contributor

@mallya-m mallya-m commented Jun 8, 2026

Summary

Fixes color-only encoding accessibility violation in CodingActivityInsightsCard productivity badge.

Closes #952


Type of Change

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

Changes Made

  • Added optional ariaLabel prop to the InsightRow component
  • Added aria-label="Productivity level: <Level>" to the productivity badge <p> tag so screen readers announce the level in plain English instead of the emoji name
  • Added explicit TypeScript type annotation to insightRows array to support the optional ariaLabel field
  • Emoji remains as a supplementary visual indicator — text label is now confirmed as the primary encoding, satisfying WCAG 2.1 SC 1.4.1

How to Test

  1. Open the dashboard Coding Activity Insights card
  2. Inspect the Productivity row in browser DevTools → Accessibility tree
  3. Confirm the <p> element announces "Productivity level: Excellent" (or whichever level applies) — not "large green circle Excellent"
  4. Confirm the text label (Excellent, Good, Moderate, etc.) is always visible regardless of color perception

Screenshots (if UI change)

N/A — no visual change. The fix is in the accessibility tree only.


Checklist

  • Linked issue in summary
  • npm run lint passes locally
  • No TypeScript errors in changed file (npx tsc --noEmit 2>&1 | Select-String "CodingActivityInsightsCard" → blank)
  • Self-reviewed the diff
  • Added/updated tests if applicable

Accessibility Checklist

  • aria-label added to productivity badge for screen reader support
  • Color is supplementary only — text label carries the meaning (WCAG SC 1.4.1)
  • Emoji marked as decorative via accessible label on parent element
  • Responsive UI unaffected — no layout changes

Additional Notes

Pre-existing build errors exist in upstream/main unrelated to this PR (@/lib/leaderboard, session.error type mismatch in repos route) — introduced by other open PRs with zero overlap with this change. Only CodingActivityInsightsCard.tsx was modified.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 8, 2026

@mallya-m 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 labels Jun 8, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 8, 2026

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

@mallya-m mallya-m force-pushed the fix/a11y-productivity-badge-952 branch 2 times, most recently from 4672da8 to cad8a5a Compare June 8, 2026 12:37
@mallya-m mallya-m force-pushed the fix/a11y-productivity-badge-952 branch from cad8a5a to ca89dca Compare June 8, 2026 12:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:accessibility GSSoC type bonus: accessibility (+15 pts) type:bug GSSoC type bonus: bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[A11Y] Color-only encoding in productivity level badge fails WCAG contrast requirements

1 participant