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( + , + ); + 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( + , + ); + 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. */} - + formatValue(v, format, asset, locale).display} + /> )} ,