Keep habit history behind an accessible disclosure

src/components/HabitHistory.tsx

@@ -1,5 +1,5 @@
 import { Modal } from "./design-system/Modal";
-import { Pencil } from "lucide-react";
+import { ChevronDown, Pencil } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { CalendarResponse } from "../shared/calendar";
 import { habitRequest, scheduleLabel, type TodayHabit } from "../lib/dashboard";
@@ -41,6 +41,7 @@ export function HabitHistory({
   calendarOnly?: boolean;
 }) {
   const [selectedDate, setSelectedDate] = useState<string>();
+  const [historyExpanded, setHistoryExpanded] = useState(false);
   const [editingDay, setEditingDay] = useState(false);
   const [savingDay, setSavingDay] = useState(false);
   const [calendar, setCalendar] = useState<CalendarResponse | null>(null);
@@ -164,7 +165,28 @@ export function HabitHistory({
       target={habit.target ?? 0}
       unit={habit.unit}
       color={calendar?.settings.mainColor ?? "#196127"}
-      calendar={chart}
+      calendar={
+        <div className="ds-habit-history">
+          <Button
+            variant="text"
+            className="ds-habit-history-toggle"
+            aria-expanded={historyExpanded}
+            aria-controls={`history-panel-${habit.habitId}`}
+            aria-label={`${historyExpanded ? "Hide" : "View"} history for ${habit.name ?? "habit"}`}
+            onClick={() => setHistoryExpanded((value) => !value)}
+          >
+            <ChevronDown size={16} aria-hidden="true" />
+            {historyExpanded ? "Hide history" : "View history"}
+          </Button>
+          <div
+            id={`history-panel-${habit.habitId}`}
+            className="ds-habit-history-panel"
+            hidden={!historyExpanded}
+          >
+            {historyExpanded && chart}
+          </div>
+        </div>
+      }
       tasks={tasks}
       tasksLabel="Tasks"
       headingLevel={3}