From a2f5616b96d58b2f7a56d701c5bb3843bd7ae305 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Sat, 5 Sep 2026 07:50:41 +0200
Subject: [PATCH] Keep habit history behind an accessible disclosure

---
 src/components/HabitHistory.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/HabitHistory.tsx b/src/components/HabitHistory.tsx
index bbf2e3b..769b833 100644
--- a/src/components/HabitHistory.tsx
+++ b/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}