🎨 Palette: 날짜 범위 선택기 접근성 개선

.Jules/palette.md

@@ -0,0 +1,6 @@
+## 2024-06-22 - Overview Stats 토글 버튼 키보드 접근성 개선
+**Learning:** `overview-stats` 컴포넌트의 설명 텍스트를 펼치거나 접는 `<button>` 요소에 키보드 포커스 스타일이 누락되어 있어, 키보드 내비게이션 사용자에게 현재 포커스 위치를 명확히 보여주지 못했습니다. `hover` 스타일은 있었으나 `focus-visible` 처리가 없어 접근성 결함이 있었습니다.
+**Action:** Tailwind CSS의 `focus-visible` 관련 유틸리티 클래스(`focus-visible:outline-none`, `focus-visible:ring-2`, `focus-visible:ring-ring`, `rounded-sm`)를 추가하여 탭(Tab) 키 이동 시 포커스 링이 보이도록 수정했습니다. 앞으로 대화형 컴포넌트를 설계할 때는 항상 키보드 접근성(focus states)을 염두에 두고 작업해야 합니다.
+## 2024-07-04 - Segment Controls State Accessibility
+**Learning:** React segment controls/toggles (like preset buttons) built with basic buttons often visually distinguish the active state (e.g. using a background color) but fail to communicate this to screen readers. They also easily miss standard keyboard focus outlines when built with custom padding/borders.
+**Action:** 항상 커스텀 토글/세그먼트 컨트롤 버튼을 구현할 때는 `aria-pressed={isActive}` 속성을 추가하여 상태를 스크린 리더에 명시적으로 알리고, `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1` 클래스를 적용해 키보드 네비게이션 시 명확한 시각적 피드백을 제공해야 한다.

.gitignore

@@ -17,3 +17,4 @@ __pycache__/
 .jules/
 .state/
 .claude/worktrees/
+coverage/

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## [Unreleased]
+
+### 🎨 변경 사항 (UX / 접근성)
+
+- 웹 대시보드의 각종 로그아웃 버튼(`org-sidebar.tsx`, `org-header.tsx`, `no-organization-state.tsx`)에 스크린 리더용 `aria-label="Log out of your account"` (또는 `Sign out of your account`) 속성을 추가하여 접근성을 개선했습니다.
+
+### Fixed
+- 날짜 범위 선택기의 접근성을 개선했습니다 (Screen Reader 및 키보드 네비게이션).

package.json

@@ -5,10 +5,16 @@
     "dev": "turbo dev",
     "build": "turbo build",
     "lint": "turbo lint",
-    "typecheck": "turbo typecheck"
+    "typecheck": "turbo typecheck",
+    "test": "pnpm -r run test",
+    "coverage": "pnpm -r run test --coverage"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/coverage-v8": "3.2.6",
     "eslint": "^9",
     "turbo": "^2.9.16",
     "typescript-eslint": "^8"

packages/web/package.json

@@ -45,8 +45,11 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "4",
+    "@vitest/coverage-v8": "3.2.6",
     "dotenv": "^17.4.2",
     "eslint-config-next": "^16.2.3",
+    "happy-dom": "^20.10.6",
     "prisma": "^6",
     "shadcn": "^4.10.0",
     "tailwindcss": "^4",

packages/web/src/app/dashboard/[orgSlug]/sessions/[sessionId]/page.tsx

@@ -13,7 +13,7 @@ import {
   SessionFilesTab,
 } from '@/components/dashboard/session-files'
 import { useSessionDetail } from '@/hooks/use-dashboard-sessions'
-import { messagesToTimeline, formatSlashCommandText } from '@/lib/timeline-events'
+import { messagesToTimeline, buildTimelineGroups, formatSlashCommandText } from '@/lib/timeline-events'
 import { extractSessionFiles } from '@/lib/session-files'
 import {
   formatTokens,
@@ -46,6 +46,7 @@ export default function OrgSessionDetailPage({
     () => (data ? messagesToTimeline(data.messages) : []),
     [data],
   )
+  const groups = useMemo(() => buildTimelineGroups(events), [events])
   const files = useMemo(() => extractSessionFiles(events), [events])
   const [selectedIdx, setSelectedIdx] = useState<number | null>(0)
   const safeIdx =
@@ -221,6 +222,7 @@ export default function OrgSessionDetailPage({
             <div className="px-4 pt-3 pb-2">
               <SessionActivityRibbon
                 events={events}
+                groups={groups}
                 selectedIdx={safeIdx}
                 onSelect={setSelectedIdx}
                 sessionStartedAt={data.startedAt}
@@ -232,6 +234,7 @@ export default function OrgSessionDetailPage({
               <div className="border-r border-border min-h-0 overflow-hidden">
                 <EventList
                   events={events}
+                  groups={groups}
                   selectedIdx={safeIdx ?? -1}
                   onSelect={setSelectedIdx}
                   sessionStartedAt={data.startedAt}

packages/web/src/components/dashboard/date-range-picker.test.tsx

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { DateRangePicker } from './date-range-picker'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { format, subDays } from 'date-fns'
+
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+  useSearchParams: vi.fn(),
+}))
+
+describe('DateRangePicker', () => {
+  const TODAY = new Date('2024-07-04T00:00:00Z')
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(TODAY)
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('renders presets correctly and handles click', () => {
+    const mockPush = vi.fn()
+    vi.mocked(useRouter).mockReturnValue({ push: mockPush } as unknown as ReturnType<typeof vi.fn>)
+    const from = format(subDays(TODAY, 6), 'yyyy-MM-dd')
+    const to = format(TODAY, 'yyyy-MM-dd')
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams(`?from=${from}&to=${to}`))
+
+    render(<DateRangePicker />)
+
+    const button7d = screen.getByRole('button', { name: '7d' })
+    const button30d = screen.getByRole('button', { name: '30d' })
+    const button90d = screen.getByRole('button', { name: '90d' })
+    const buttonAll = screen.getByRole('button', { name: 'ALL' })
+
+    expect(button7d).toBeDefined()
+    expect(button30d).toBeDefined()
+
+    // Default is 7 days, check aria-pressed
+    expect(button7d.getAttribute('aria-pressed')).toBe('true')
+    expect(button30d.getAttribute('aria-pressed')).toBe('false')
+
+    fireEvent.click(button30d)
+
+    const from30 = format(subDays(TODAY, 30), 'yyyy-MM-dd')
+    const to30 = format(TODAY, 'yyyy-MM-dd')
+
+    expect(mockPush).toHaveBeenCalledWith(`?from=${from30}&to=${to30}`)
+
+    // 90d click
+    fireEvent.click(button90d)
+    const from90 = format(subDays(TODAY, 90), 'yyyy-MM-dd')
+    const to90 = format(TODAY, 'yyyy-MM-dd')
+    expect(mockPush).toHaveBeenCalledWith(`?from=${from90}&to=${to90}`)
+
+    // ALL click
+    fireEvent.click(buttonAll)
+    const fromAll = format(subDays(TODAY, 3650), 'yyyy-MM-dd')
+    const toAll = format(TODAY, 'yyyy-MM-dd')
+    expect(mockPush).toHaveBeenCalledWith(`?from=${fromAll}&to=${toAll}`)
+
+  })
+
+  it('identifies custom date range', () => {
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as unknown as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams('?from=2023-01-01&to=2023-01-10'))
+
+    render(<DateRangePicker />)
+
+    const button7d = screen.getByRole('button', { name: '7d' })
+    const button30d = screen.getByRole('button', { name: '30d' })
+
+    expect(button7d.getAttribute('aria-pressed')).toBe('false')
+    expect(button30d.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('identifies 30d preset correctly from url', () => {
+    const from = format(subDays(TODAY, 29), 'yyyy-MM-dd')
+    const to = format(TODAY, 'yyyy-MM-dd')
+
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as unknown as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams(`?from=${from}&to=${to}`))
+
+    render(<DateRangePicker />)
+
+    const button30d = screen.getByRole('button', { name: '30d' })
+    expect(button30d.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('identifies 90d preset correctly from url', () => {
+    const from = format(subDays(TODAY, 89), 'yyyy-MM-dd')
+    const to = format(TODAY, 'yyyy-MM-dd')
+
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as unknown as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams(`?from=${from}&to=${to}`))
+
+    render(<DateRangePicker />)
+
+    const button90d = screen.getByRole('button', { name: '90d' })
+    expect(button90d.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('identifies ALL preset correctly from url', () => {
+    const from = format(subDays(TODAY, 3649), 'yyyy-MM-dd')
+    const to = format(TODAY, 'yyyy-MM-dd')
+
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as unknown as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams(`?from=${from}&to=${to}`))
+
+    render(<DateRangePicker />)
+
+    const buttonAll = screen.getByRole('button', { name: 'ALL' })
+    expect(buttonAll.getAttribute('aria-pressed')).toBe('true')
+  })
+})
+
+describe('DateRangePicker default params coverage', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2024-07-04T00:00:00Z'))
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('covers daysDiff logic when isToday=false', () => {
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as unknown as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams('?from=2024-07-01&to=2024-07-02'))
+    render(<DateRangePicker />)
+    const button7d = screen.getByRole('button', { name: '7d' })
+    expect(button7d.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('covers currentTo null', () => {
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as unknown as ReturnType<typeof vi.fn>)
+    const p = new URLSearchParams()
+    p.set('from', '2024-07-01')
+    vi.mocked(useSearchParams).mockReturnValue(p)
+    render(<DateRangePicker />)
+    const button7d = screen.getByRole('button', { name: '7d' })
+    expect(button7d.getAttribute('aria-pressed')).toBe('false')
+  })
+})
+
+describe('DateRangePicker default params coverage edge cases', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2024-07-04T00:00:00Z'))
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('covers daysDiff no match', () => {
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams('?from=2024-07-03&to=2024-07-04'))
+    render(<DateRangePicker />)
+    const button7d = screen.getByRole('button', { name: '7d' })
+    expect(button7d.getAttribute('aria-pressed')).toBe('false')
+  })
+})
+
+describe('DateRangePicker params from null', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2024-07-04T00:00:00Z'))
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('covers currentFrom null', () => {
+    vi.mocked(useRouter).mockReturnValue({ push: vi.fn() } as ReturnType<typeof vi.fn>)
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams('?to=2024-07-04'))
+    render(<DateRangePicker />)
+    const button7d = screen.getByRole('button', { name: '7d' })
+    expect(button7d.getAttribute('aria-pressed')).toBe('false')
+  })
+})

packages/web/src/components/dashboard/date-range-picker.tsx

@@ -62,9 +62,10 @@ function DateRangePickerContent() {
           <button
             key={preset.days}
             type="button"
+            aria-pressed={activePreset === preset.days}
             onClick={() => handlePreset(preset.days)}
             className={cn(
-              'px-3 py-1 text-xs font-medium rounded-md transition-colors',
+              'px-3 py-1 text-xs font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
               activePreset === preset.days
                 ? 'bg-primary text-primary-foreground'
                 : 'text-muted-foreground hover:text-foreground hover:bg-muted',

packages/web/src/components/dashboard/event-list.tsx

@@ -3,13 +3,14 @@ import { List, type RowComponentProps } from "react-window";
 import { User, Bot, Wrench, ChevronRight } from "lucide-react";
 import {
   formatSlashCommandText,
-  buildTimelineGroups,
   type TimelineEvent,
+  type TimelineGroup,
 } from "@/lib/timeline-events";
 import { cn } from "@/lib/utils";
 
 type EventListProps = {
   events: TimelineEvent[];
+  groups: TimelineGroup[];
   selectedIdx: number;
   onSelect: (idx: number) => void;
   sessionStartedAt: string;
@@ -50,11 +51,10 @@ function formatElapsed(timestamp: string, sessionStartedAt: string): string {
 }
 
 function buildFlatRows(
-  events: TimelineEvent[],
+  groups: TimelineGroup[],
   expandedGroups: Set<number>,
   selectedIdx: number,
 ): FlatRow[] {
-  const groups = buildTimelineGroups(events);
   const rows: FlatRow[] = [];
   for (const group of groups) {
     if (group.kind === "single") {
@@ -261,15 +261,16 @@ function Row({
 
 export function EventList({
   events,
+  groups,
   selectedIdx,
   onSelect,
   sessionStartedAt,
   expandedGroups,
   onToggleGroup,
 }: EventListProps) {
   const rows = useMemo(
-    () => buildFlatRows(events, expandedGroups, selectedIdx),
-    [events, expandedGroups, selectedIdx],
+    () => buildFlatRows(groups, expandedGroups, selectedIdx),
+    [groups, expandedGroups, selectedIdx],
   );
 
   if (events.length === 0) {

packages/web/src/components/dashboard/no-organization-state.tsx

@@ -37,6 +37,7 @@ export function NoOrganizationState({
             <button
               onClick={() => signOut({ callbackUrl: '/login' })}
               className="text-sm text-destructive hover:underline"
+              aria-label="Log out of your account"
             >
               Log out
             </button>

packages/web/src/components/dashboard/overview-stats.tsx

@@ -88,7 +88,7 @@ export function OverviewStats({
         id="overview-stats-explanation-toggle"
         aria-expanded={expanded}
         aria-controls="overview-stats-explanation"
-        className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors rounded-sm"
       >
         <span
           aria-hidden="true"

packages/web/src/components/dashboard/reports/weekly-flow-chart.tsx

@@ -12,6 +12,7 @@ import {
   Legend,
   type TooltipProps,
 } from 'recharts'
+import { useMemo } from 'react'
 import { parseISO } from 'date-fns'
 import { formatTokens } from '@/lib/format'
 import type { DailySeriesPoint } from '@/types/reports'
@@ -57,18 +58,22 @@ function sumTokens(p: DailySeriesPoint): number {
 }
 
 export function WeeklyFlowChart({ thisWeek, prevWeek }: WeeklyFlowChartProps) {
-  // 요일 기준으로 병합 (월~일 7개 슬롯)
-  const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  const data: ChartRow[] = dayNames.map((day) => ({ day, thisWeekTokens: 0, prevWeekTokens: 0 }))
+  const data = useMemo(() => {
+    // 요일 기준으로 병합 (월~일 7개 슬롯)
+    const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    const result: ChartRow[] = dayNames.map((day) => ({ day, thisWeekTokens: 0, prevWeekTokens: 0 }))
 
-  for (const p of thisWeek) {
-    const idx = dayIndex(p.date)
-    if (idx >= 0) data[idx].thisWeekTokens += sumTokens(p)
-  }
-  for (const p of prevWeek) {
-    const idx = dayIndex(p.date)
-    if (idx >= 0) data[idx].prevWeekTokens += sumTokens(p)
-  }
+    for (const p of thisWeek) {
+      const idx = dayIndex(p.date)
+      if (idx >= 0) result[idx].thisWeekTokens += sumTokens(p)
+    }
+    for (const p of prevWeek) {
+      const idx = dayIndex(p.date)
+      if (idx >= 0) result[idx].prevWeekTokens += sumTokens(p)
+    }
+
+    return result
+  }, [thisWeek, prevWeek])
 
   return (
     <ResponsiveContainer width="100%" height={260}>