Merge pull request #229 from springswell/fix/banner-favicon-a11y-responsive-211-214

Apple touch icon, Sparkline a11y label, responsive TvlChart (#212, #213, #214)

Author: ritaifeoluwa

src/app/apple-icon.png

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Sparkline } from "./Sparkline";
+
+describe("Sparkline", () => {
+  it("exposes an accessible name via role=img and aria-label", () => {
+    render(<Sparkline data={[1, 2, 3, 4]} />);
+    expect(screen.getByRole("img", { name: /trend chart: increasing/i })).toBeTruthy();
+  });
+
+  it("describes a decreasing trend", () => {
+    render(<Sparkline data={[4, 3, 2, 1]} />);
+    expect(screen.getByRole("img", { name: /trend chart: decreasing/i })).toBeTruthy();
+  });
+
+  it("describes a flat trend", () => {
+    render(<Sparkline data={[2, 2, 2, 2]} />);
+    expect(screen.getByRole("img", { name: /trend chart: flat/i })).toBeTruthy();
+  });
+
+  it("uses a custom label when provided", () => {
+    render(<Sparkline data={[1, 2, 3]} label="TVL trend: increasing over 24 hours" />);
+    expect(
+      screen.getByRole("img", { name: "TVL trend: increasing over 24 hours" }),
+    ).toBeTruthy();
+  });
+
+  it("includes a <title> element for tooltip/SR support", () => {
+    const { container } = render(<Sparkline data={[1, 2, 3]} />);
+    expect(container.querySelector("title")?.textContent).toBe("Trend chart: increasing");
+  });
+});

src/components/Sparkline/Sparkline.test.tsx

@@ -7,8 +7,20 @@ type SparklineProps = {
   color?: string;
   /** If true, fills the area under the line with a semi-transparent version of color. */
   fill?: boolean;
+  /**
+   * Accessible label describing the trend (issue #213), e.g.
+   * "TVL trend: increasing over 24 hours". Falls back to a label computed
+   * from the first/last data points when omitted.
+   */
+  label?: string;
 };
 
+function describeTrend(data: number[]): string {
+  const delta = data[data.length - 1] - data[0];
+  const direction = delta > 0 ? "increasing" : delta < 0 ? "decreasing" : "flat";
+  return `Trend chart: ${direction}`;
+}
+
 /**
  * Minimal SVG sparkline — no dependencies.
  * Renders a polyline (and optional fill area) from an array of numbers.
@@ -19,9 +31,12 @@ export function Sparkline({
   height = 32,
   color = "#4AE292",
   fill = true,
+  label,
 }: SparklineProps) {
   if (data.length < 2) return null;
 
+  const accessibleLabel = label ?? describeTrend(data);
+
   const min = Math.min(...data);
   const max = Math.max(...data);
   const range = max - min || 1;
@@ -44,8 +59,10 @@ export function Sparkline({
       width={width}
       height={height}
       viewBox={`0 0 ${width} ${height}`}
-      aria-hidden="true"
+      role="img"
+      aria-label={accessibleLabel}
     >
+      <title>{accessibleLabel}</title>
       {fill && (
         <path
           d={fillPath}

src/components/Sparkline/Sparkline.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Box, Skeleton, Text } from "@chakra-ui/react";
+import { Box, Skeleton, Text, useBreakpointValue } from "@chakra-ui/react";
 import {
   AreaChart,
   Area,
@@ -26,6 +26,9 @@ interface TvlChartProps {
 export default function TvlChart({ poolId }: TvlChartProps) {
   const [data, setData] = useState<TvlDataPoint[]>([]);
   const [loading, setLoading] = useState(true);
+  // Issue #214: a fixed 180px is tall relative to viewport width on small
+  // phones; shrink it below the sm breakpoint instead.
+  const chartHeight = useBreakpointValue({ base: 140, sm: 180 }, { fallback: "sm" }) ?? 180;
 
   useEffect(() => {
     let cancelled = false;
@@ -47,13 +50,13 @@ export default function TvlChart({ poolId }: TvlChartProps) {
   }, [poolId]);
 
   if (loading) {
-    return <Skeleton height="180px" borderRadius="2xl" startColor="app.border" endColor="app.surfaceHover" />;
+    return <Skeleton height={`${chartHeight}px`} borderRadius="2xl" startColor="app.border" endColor="app.surfaceHover" />;
   }
 
   if (data.length === 0) {
     return (
       <Box
-        h="180px"
+        h={`${chartHeight}px`}
         display="flex"
         alignItems="center"
         justifyContent="center"
@@ -69,7 +72,7 @@ export default function TvlChart({ poolId }: TvlChartProps) {
   }
 
   return (
-    <ResponsiveContainer width="100%" height={180}>
+    <ResponsiveContainer width="100%" height={chartHeight}>
       <AreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
         <defs>
           <linearGradient id="tvlGradient" x1="0" y1="0" x2="0" y2="1">