diff --git a/src/components/ui/StatCard.test.tsx b/src/components/ui/StatCard.test.tsx index 829226c..0eefd60 100644 --- a/src/components/ui/StatCard.test.tsx +++ b/src/components/ui/StatCard.test.tsx @@ -337,4 +337,22 @@ describe("StatCard — sparkline", () => { "Earnings history: 4 data points, trending up from 10 to 30, range 10 to 30", ); }); + + it("formats sparkline values through the card's own format/asset, not raw numbers (#709)", () => { + render( + , + ); + const svg = screen.getByRole("img"); + // Previously announced "trending up from 1234.5 to 8420" via describeTrend's + // String(v) fallback -- no currency symbol or locale grouping, unlike the + // visible "$8,420.00" value right next to it. + expect(svg).toHaveAccessibleName(/trending up from 1,234.5 USDC to 8,420 USDC/); + }); }); diff --git a/src/components/ui/StatCard.tsx b/src/components/ui/StatCard.tsx index eff652f..539e083 100644 --- a/src/components/ui/StatCard.tsx +++ b/src/components/ui/StatCard.tsx @@ -279,8 +279,16 @@ export function StatCard({
{/* The card's own label becomes the sparkline's accessible name, so the trend is announced as "Earnings: 8 data points, trending up - from …" rather than as an unlabelled graphic. */} - + from …" rather than as an unlabelled graphic. formatValue is + threaded through too (#709): without it, describeTrend falls + back to String(v), so a currency card like "Lifetime earnings" + announced "trending up from 1234.5 to 8420" with no currency or + locale grouping, while the visible value reads "$8,420.00". */} + formatValue(v, format, asset, locale).display} + />
)} ,