rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix issues from QA review: stale closure, aria-labels, mobile sheet close

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-17 21:12:16 +08:00
parent 68337b12a0
commit 0ba920f8e1
2 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -613,7 +613,7 @@ export default function CalendarPage() {
<Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}> <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
<SheetContent className="w-72 p-0"> <SheetContent className="w-72 p-0">
<SheetClose onClick={() => setMobileSidebarOpen(false)} /> <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> </SheetContent>
</Sheet> </Sheet>
)} )}

8
frontend/src/components/calendar/MiniCalendar.tsx
View File

@ -77,12 +77,9 @@ const MiniCalendar = memo(function MiniCalendar({
const handleDayClick = useCallback((day: Date) => { const handleDayClick = useCallback((day: Date) => {
const dateStr = format(day, 'yyyy-MM-dd'); const dateStr = format(day, 'yyyy-MM-dd');
setSelectedDate(dateStr); setSelectedDate(dateStr);
// If clicking a day in another month, also shift the displayed month setDisplayedMonth((prev) => isSameMonth(day, prev) ? prev : startOfMonth(day));
if (!isSameMonth(day, displayedMonth)) {
setDisplayedMonth(startOfMonth(day));
}
onDateClick(dateStr); onDateClick(dateStr);
}, [displayedMonth, onDateClick]); }, [onDateClick]);
const selectedDateObj = useMemo( const selectedDateObj = useMemo(
() => selectedDate ? parseDate(selectedDate) : null, () => selectedDate ? parseDate(selectedDate) : null,
@ -137,6 +134,7 @@ const MiniCalendar = memo(function MiniCalendar({
<button <button
key={format(day, 'yyyy-MM-dd')} key={format(day, 'yyyy-MM-dd')}
type="button" type="button"
aria-label={format(day, 'EEEE, MMMM d, yyyy')}
onClick={() => handleDayClick(day)} onClick={() => handleDayClick(day)}
className={[ className={[
'h-7 text-xs flex items-center justify-center rounded-md transition-colors duration-100', 'h-7 text-xs flex items-center justify-center rounded-md transition-colors duration-100',