feat: add accessible data table alternative

[somotochukwu-dev]

Summary

Add accessible data-table alternatives for all chart-heavy analytics and performance views, ensuring every chart exposes the same information through semantic summaries and keyboard-operable data tables.

Changes

src/components/analytics/ChartDataTable.tsx (new)

Reusable accessible data table component. Renders a semantic <table> with:

• <caption> (visually hidden via sr-only class) providing a table description
• <thead> with <th scope="col"> for column headers
• <tbody> rows with formatted values
• Custom format functions per column
• Empty-data fallback message
• id prop for aria-controls linkage from toggle buttons

Chart components updated (6 files)

Each chart in src/components/analytics/ now:

1. Wraps the Recharts SVG in <div role="img" aria-label="..."> with a descriptive summary of what the chart shows
2. Adds a keyboard-operable toggle button (<button> with aria-expanded and aria-controls) to show/hide the data table
3. Renders a ChartDataTable with the same data as the chart when the toggle is activated

Files:

• ProgressChart.tsx — Line chart: button with aria-controls="progress-chart-table", shows date/completed/inProgress/notStarted
• CompletionPie.tsx — Pie chart: button with aria-controls="completion-pie-table", shows category/percentage
• SkillRadar.tsx — Radar chart: button with aria-controls="skill-radar-table", shows skill/level
• TrendChart.tsx — Composed chart: button with aria-controls="trend-chart-table", shows week/score/velocity
• TimeDistributionChart.tsx — Area chart: button with aria-controls="time-distribution-table", shows hour/sessions
• StudyHeatmap.tsx — Custom heatmap: button with aria-controls="study-heatmap-table", shows date/activities; individual cells have role="gridcell" and aria-label

src/components/performance-metrics/PerformanceMetricsDashboard.tsx

Updated the existing Time Spent bar chart and Completion Rate pie chart with:

• Descriptive aria-label values on their role="img" containers
• Toggle buttons with aria-expanded/aria-controls for each chart
• ChartDataTable instances showing matching data

Test files (new)

src/components/analytics/__tests__/ChartDataTable.test.tsx — 8 unit tests:

• Renders table element with caption
• Column headers have scope="col"
• Data rows match input
• Custom format functions applied
• Empty data fallback renders
• Null values render as empty strings
• ID prop assigned to container
• Boolean values display correctly

src/components/analytics/__tests__/ChartAccessibility.test.tsx — 14 unit tests across 5 chart components:

• Each chart has role="img" with descriptive aria-label
• Each chart renders a toggle button with aria-expanded and aria-controls
• Clicking toggle shows the data table; clicking again hides it
• Table data matches chart input data

Acceptance criteria coverage

• Every chart has an accessible summary (role="img" + aria-label)
• Table data matches chart data (same data array passed to both components)
• Controls are keyboard operable (standard <button> with aria-expanded/aria-controls)
• Tests cover rendered alternatives (22 passing tests across 2 test files)
• Error boundaries preserved (no changes to error handling)
• Existing behavior preserved on desktop and mobile layouts

Closes #931

[vercel]

@Stanley-Owoh is attempting to deploy a commit to the Ayomide Adeniran's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@somotochukwu-dev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[ayomideadeniran]

pr under review