From 0ba920f8e1fa351254f9e19ddbb7df4e5ae5b0f9 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 17 Mar 2026 21:12:16 +0800
Subject: [PATCH] Fix issues from QA review: stale closure, aria-labels, mobile
 sheet close

W-01: Use functional updater in handleDayClick to remove displayedMonth
      from dependency array, eliminating stale closure risk
S-02: Add aria-label with full date string to day buttons for screen readers
S-04: Close mobile sidebar sheet when clicking a date in mini calendar,
      matching existing onUseTemplate behavior

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/calendar/CalendarPage.tsx | 2 +-
 frontend/src/components/calendar/MiniCalendar.tsx | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index fbf4a9f..cde92b4 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -613,7 +613,7 @@ export default function CalendarPage() {
         <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
           <SheetContent className="w-72 p-0">
             <SheetClose onClick={() => setMobileSidebarOpen(false)} />
-            <CalendarSidebar onUseTemplate={(tmpl) => { setMobileSidebarOpen(false); handleUseTemplate(tmpl); }} onSharedVisibilityChange={setVisibleSharedIds} width={288} onDateClick={handleMiniCalClick} currentDate={currentDate} firstDayOfWeek={firstDayOfWeek} navKey={navKey} />
+            <CalendarSidebar onUseTemplate={(tmpl) => { setMobileSidebarOpen(false); handleUseTemplate(tmpl); }} onSharedVisibilityChange={setVisibleSharedIds} width={288} onDateClick={(dateStr) => { setMobileSidebarOpen(false); handleMiniCalClick(dateStr); }} currentDate={currentDate} firstDayOfWeek={firstDayOfWeek} navKey={navKey} />
           </SheetContent>
         </Sheet>
       )}
diff --git a/frontend/src/components/calendar/MiniCalendar.tsx b/frontend/src/components/calendar/MiniCalendar.tsx
index 369793c..2fa3147 100644
--- a/frontend/src/components/calendar/MiniCalendar.tsx
+++ b/frontend/src/components/calendar/MiniCalendar.tsx
@@ -77,12 +77,9 @@ const MiniCalendar = memo(function MiniCalendar({
   const handleDayClick = useCallback((day: Date) => {
     const dateStr = format(day, 'yyyy-MM-dd');
     setSelectedDate(dateStr);
-    // If clicking a day in another month, also shift the displayed month
-    if (!isSameMonth(day, displayedMonth)) {
-      setDisplayedMonth(startOfMonth(day));
-    }
+    setDisplayedMonth((prev) => isSameMonth(day, prev) ? prev : startOfMonth(day));
     onDateClick(dateStr);
-  }, [displayedMonth, onDateClick]);
+  }, [onDateClick]);
 
   const selectedDateObj = useMemo(
     () => selectedDate ? parseDate(selectedDate) : null,
@@ -137,6 +134,7 @@ const MiniCalendar = memo(function MiniCalendar({
             <button
               key={format(day, 'yyyy-MM-dd')}
               type="button"
+              aria-label={format(day, 'EEEE, MMMM d, yyyy')}
               onClick={() => handleDayClick(day)}
               className={[
                 'h-7 text-xs flex items-center justify-center rounded-md transition-colors duration-100',