From 0fb3693d8ebde8cfb9285c391b37e96f0540437d Mon Sep 17 00:00:00 2001
From: smartcalsystems-sketch <smartcalsystems-sketch@users.noreply.github.com>
Date: Wed, 14 Oct 2026 00:18:36 +0530
Subject: [PATCH] fix: thread format/asset/locale into StatCard's sparkline
 (closes #709)

StatCard rendered <Sparkline data={sparkline} label={label} /> without
formatValue, so describeTrend fell back to String(v). A 'Lifetime
earnings' card was announced as 'trending up from 1234.5 to 8420', with
no currency symbol or locale grouping, while the visible value right
next to it read '$8,420.00'.

Pass formatValue={(v) => formatValue(v, format, asset, locale).display}
-- reusing the same formatter StatCard already applies to its own
headline value -- so the sparkline's accessible description agrees with
what's on screen. format='raw' cards are unaffected: formatValue's raw
case is already String(v), identical to the previous default.
---
 src/components/ui/StatCard.test.tsx | 18 ++++++++++++++++++
 src/components/ui/StatCard.tsx      | 12 ++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

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(
+      <StatCard
+        label="Lifetime earnings"
+        status="loaded"
+        value={8420}
+        format="currency"
+        asset="USDC"
+        sparkline={[1234.5, 4000, 6200, 8420]}
+      />,
+    );
+    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({
         <div data-testid="statcard-sparkline" className="text-indigo-500 dark:text-indigo-400">
           {/* 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. */}
-          <Sparkline data={sparkline} label={label} />
+              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". */}
+          <Sparkline
+            data={sparkline}
+            label={label}
+            formatValue={(v) => formatValue(v, format, asset, locale).display}
+          />
         </div>
       )}
     </div>,