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}
+ />
)}
,