Enhance Accessibility and Keyboard Navigation in Radar SVG Charts - #9033
Enhance Accessibility and Keyboard Navigation in Radar SVG Charts#9033dinesh9997 wants to merge 3 commits into
Conversation
|
@dinesh9997 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
This pull request addresses the need for improved accessibility in our Radar SVG charts and profile comparison controls, aligning with previous decisions made to enhance usability for screen reader users. The changes include the addition of ARIA attributes and keyboard navigation compliance, which are crucial for meeting WCAG 2.1 guidelines. Thank you for your contribution to making our application more accessible! |
retenta-bot
Bot
changed the title
There was a problem hiding this comment.
Pull request overview
This PR addresses accessibility and keyboard navigation gaps for Radar visualizations and the Compare flow by adding ARIA labeling, landmark roles, focus-visible styling, and a new a11y-focused test.
Changes:
- Added
<title>/<desc>,role, andaria-labelledbyenhancements to Radar SVG outputs and the dashboard RadarChart SVG. - Improved keyboard focus visibility and ARIA labeling across CompareClient interactive controls (inputs, buttons, recent items, share/export actions).
- Added a new
CompareClient.a11y-keyboard.test.tsxto validate ARIA labels and focus-visible class presence.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
lib/svg/radar.ts |
Adds accessible metadata and per-axis dots/tooltips to generated Radar SVG output. |
components/dashboard/RadarChart.tsx |
Adds region + SVG role="img" and title/desc for screen readers. |
app/compare/CompareClient.tsx |
Adds focus-visible styling and aria-label improvements for keyboard navigation. |
app/compare/CompareClient.a11y-keyboard.test.tsx |
New tests covering ARIA labels and focus-visible class usage. |
components/burnout/BurnoutRiskTable.tsx |
Type formatting/refactor (no functional behavior change). |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const val = Math.max(0.1, metrics[i]); | ||
| const r = RADAR_RADIUS * val; | ||
| const x = RADAR_CENTER_X + r * Math.cos(angle); | ||
| const y = RADAR_CENTER_Y + r * Math.sin(angle); | ||
| dataPoints += `${x},${y} `; |
| <button | ||
| onClick={() => removeSearch(search)} | ||
| className="text-xs text-red-400 hover:text-red-600" | ||
| className="text-xs text-red-400 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:outline-none rounded px-0.5" | ||
| aria-label={`Remove ${search} from recent comparisions`} | ||
| > |
| const historyBtn = screen.getByRole('button', { name: 'octocat vs dinesh9997' }); | ||
| const removeBtn = screen.getByRole('button', { | ||
| name: /remove octocat vs dinesh9997 from recent comparisions/i, | ||
| }); | ||
|
|
…ion in Radar SVG charts (JhaSourav07#8288)
4d6196f to
fea8c8b
Compare
Aamod007
added
mentor:Aamod007
type:accessibility
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
Great accessibility improvements! Adding proper ARIA labels and \ ocus-visible\ focus states significantly enhances the keyboard navigation experience on the comparison page. The tests are clean and cover the new additions perfectly.
Approved!
Description
Resolves #8288.
This PR improves screen-reader accessibility and keyboard navigation compliance across Radar SVG charts (
lib/svg/radar.tsandcomponents/dashboard/RadarChart.tsx) and profile comparison controls inapp/compare/CompareClient.tsx.Key Enhancements & Fixes
Radar SVG Chart Accessibility (
lib/svg/radar.ts):role="img"andaria-labelledby="cp-radar-title cp-radar-desc"on root SVG container.<title>and<desc>tags inside the SVG chart.<title>tooltips for each radar metric dimension (Consistency, Volume, Weekend Activity, Night Owl, Growth, Diversity).Dashboard RadarChart (
components/dashboard/RadarChart.tsx):role="img"andaria-labelledby="radar-chart-title radar-chart-desc"on SVG element.<title>and<desc>elements for screen readers describing the chart content.role="region"witharia-label="Language Dominance Radar Comparison".Keyboard Navigation & ARIA Compliance (
app/compare/CompareClient.tsx):focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:outline-none) across:#compare-user1-input,#compare-user2-input)#compare-submit-button)aria-labelattributes on all floating action buttons and recent search items for keyboard Tab navigation.Target Files Modified / Created
lib/svg/radar.tscomponents/dashboard/RadarChart.tsxapp/compare/CompareClient.tsxapp/compare/CompareClient.a11y-keyboard.test.tsx[NEW]Verification & Testing
CompareClient.a11y-keyboard.test.tsx,RadarChart.accessibility.test.tsx, andradar.test.tsGSSoC 2026 Contribution