Repository navigation
Dashboard Records & Sessions chart has no legend, so its two series can only be told apart by colour #1782
Description
The dashboard's "Records & Sessions Trend" chart plots two series, a blue area for records and a green area for sessions, with no legend. The only way to tell which line is which is to hover a point and read the tooltip. Colour alone carries the distinction, which fails WCAG 1.4.1 (Use of Color): a colour-blind user, a user on a touch screen without hover, or anyone reading a screenshot or printout cannot tell the records line from the sessions line. The subject graph's LineGraph (components/LineGraph/LineGraph.tsx:123) already renders a recharts <Legend />; the dashboard does not import one.
Where
apps/web/src/routes/_app/dashboard.tsx:430-523. The chart has two Areas and no Legend:
<AreaChart data={combinedTrendsData} margin={{ bottom: 0, left: 0, right: 30, top: 10 }}>
...
<Area dataKey="records" stroke={chartColors.records.stroke} ... />
<Area dataKey="sessions" stroke={chartColors.sessions.stroke} ... />
</AreaChart>The import at dashboard.tsx:10 (Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis) has no Legend, and the Areas have no name, so even a default legend would read "records" and "sessions" untranslated.
Reproduce
- Sign in as an admin on an instance with records and sessions (e.g. the demo data) and open the Dashboard.
- Look at "Records & Sessions Trend" without hovering.
Actual: two overlapping coloured areas with nothing saying which is records and which is sessions.
Expected: a legend reading "Records" and "Sessions" in the interface language, ideally also differentiated by more than colour (for example a dashed stroke on one series).
Tests
apps/web/src/routes/_app/__tests__/dashboard.test.tsx:it('should label both trend series in a legend, so records and sessions can be told apart without hovering'). The file already mocksrechartsto expose the props the page passes, so assert that aLegendis rendered and that eachAreareceives a translatedname.testing/src/specs/dashboard.spec.ts: assert the trend chart (dashboard-chart-records-sessions) contains the "Records" and "Sessions" legend labels.
Suggested fix
Give each Area a translated name (t({ en: 'Records', ... }), t({ en: 'Sessions', ... })), add <Legend /> to the AreaChart, and set strokeDasharray on one series.
Activity