From 02e137e6e45cbd65aa2b333a2038a2ae96649953 Mon Sep 17 00:00:00 2001
From: dezzy-music <quietdezzy@gmail.com>
Date: Tue, 13 Oct 2026 10:25:08 -0600
Subject: [PATCH] fix(a11y): format Sparkline numbers using StatCard format and
 asset props (#709)

---
 src/components/ui/StatCard.test.tsx | 33 +++++++++++++++++++++++++++++
 src/components/ui/StatCard.tsx      |  8 +++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/StatCard.test.tsx b/src/components/ui/StatCard.test.tsx
index 829226c..a51081f 100644
--- a/src/components/ui/StatCard.test.tsx
+++ b/src/components/ui/StatCard.test.tsx
@@ -337,4 +337,37 @@ describe("StatCard — sparkline", () => {
       "Earnings history: 4 data points, trending up from 10 to 30, range 10 to 30",
     );
   });
+
+  it("formats sparkline values according to format and asset props (#709)", () => {
+    render(
+      <StatCard
+        label="Lifetime earnings"
+        status="loaded"
+        value={8420}
+        format="currency"
+        asset="USDC"
+        sparkline={[1234.5, 2000, 5000, 8420]}
+      />,
+    );
+    const svg = screen.getByRole("img");
+    expect(svg).toHaveAccessibleName(
+      "Lifetime earnings: 4 data points, trending up from 1,234.5 USDC to 8,420 USDC, range 1,234.5 USDC to 8,420 USDC",
+    );
+  });
+
+  it("formats sparkline values for count format (#709)", () => {
+    render(
+      <StatCard
+        label="Completed tasks"
+        status="loaded"
+        value={5000}
+        format="count"
+        sparkline={[1000, 2500, 5000]}
+      />,
+    );
+    const svg = screen.getByRole("img");
+    expect(svg).toHaveAccessibleName(
+      "Completed tasks: 3 data points, trending up from 1,000 to 5,000, range 1,000 to 5,000",
+    );
+  });
 });
diff --git a/src/components/ui/StatCard.tsx b/src/components/ui/StatCard.tsx
index eff652f..b78c634 100644
--- a/src/components/ui/StatCard.tsx
+++ b/src/components/ui/StatCard.tsx
@@ -23,7 +23,7 @@
  */
 
 import { cn, formatCurrency, formatInteger, formatPercent } from "@/lib/utils";
-import { isRTLLocale, resolveLocale } from "@/lib/locale";
+import { resolveLocale } from "@/lib/locale";
 import { ArrowUpRight, ArrowDownRight, AlertCircle } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Sparkline } from "./Sparkline";
@@ -280,7 +280,11 @@ 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. */}
-          <Sparkline data={sparkline} label={label} />
+          <Sparkline
+            data={sparkline}
+            label={label}
+            formatValue={(v) => formatValue(v, format, asset, locale).display}
+          />
         </div>
       )}
     </div>,