Skip to content

feat(a11y): add keyboard navigation to goal cards#2443

Open
Mahesh-forcode wants to merge 1 commit into
Umbrella-io:mainfrom
Mahesh-forcode:feat/a11y-goal-card-keyboard-nav
Open

feat(a11y): add keyboard navigation to goal cards#2443
Mahesh-forcode wants to merge 1 commit into
Umbrella-io:mainfrom
Mahesh-forcode:feat/a11y-goal-card-keyboard-nav

Conversation

@Mahesh-forcode

Copy link
Copy Markdown

Summary

Add keyboard navigation to goal cards so keyboard-only users can Tab to each card and interact with Enter/Space.

Closes #2251


Type of Change

  • 🐛 Bug fix
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change
  • 📝 Documentation update
  • ♻️ Refactor / code cleanup
  • ⚡ Performance improvement
  • 🔒 Security fix
  • 🧪 Tests only

What Changed

  • src/components/GoalTracker.tsx: Added tabIndex={0} to each goal card <li> to make it focusable via Tab
  • src/components/GoalTracker.tsx: Added onKeyDown handler — Enter/Space triggers the first interactive button inside the card
  • src/components/GoalTracker.tsx: Added focus-visible:ring-2 focus-visible:ring-[var(--accent)] for visible focus indicator
  • src/components/GoalTracker.tsx: Added aria-label announcing goal title, progress, and status to screen readers

How to Test

  1. Open the dashboard and go to the Goal Tracker section
  2. Press Tab until a goal card is focused
  3. Press Enter or Space on the focused card

Expected result: Card receives a visible accent-colored ring on focus. Enter/Space triggers the primary button (+1 for manual goals, delete for auto-synced goals). Mouse behavior is unchanged.


Checklist

  • Linked the related issue above
  • Self-reviewed my own diff
  • No unnecessary console.log, debug code, or commented-out blocks
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Added or updated tests where applicable
  • Updated documentation / comments if behavior changed

Accessibility (UI changes only)

  • Keyboard navigation works correctly
  • Color contrast meets WCAG AA standard
  • ARIA labels / roles added where needed
  • Tested on mobile / responsive layout

Additional Context

Only GoalTracker.tsx was modified. No visual changes for mouse/touch users. Implements WCAG 2.1 Level A — 2.1.1 Keyboard requirement.

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

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Umbrella-io — 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

@github-actions github-actions Bot added type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) labels Jun 14, 2026
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 type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[GOOD FIRST ISSUE] Add keyboard navigation to Goal Tracker cards

1 participant