From 57a81fc630cccd495368a9dc02cbe4616cb18d74 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 2 Jun 2026 21:20:39 +0000
Subject: [PATCH] feat: add ARIA attributes to interactive elements

---
 packages/web/src/components/dashboard/date-range-picker.tsx | 1 +
 packages/web/src/components/dashboard/overview-stats.tsx    | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/dashboard/date-range-picker.tsx b/packages/web/src/components/dashboard/date-range-picker.tsx
index aef2f7b..241eb69 100644
--- a/packages/web/src/components/dashboard/date-range-picker.tsx
+++ b/packages/web/src/components/dashboard/date-range-picker.tsx
@@ -63,6 +63,7 @@ function DateRangePickerContent() {
             key={preset.days}
             type="button"
             onClick={() => handlePreset(preset.days)}
+            aria-pressed={activePreset === preset.days}
             className={cn(
               'px-3 py-1 text-xs font-medium rounded-md transition-colors',
               activePreset === preset.days
diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..095f233 100644
--- a/packages/web/src/components/dashboard/overview-stats.tsx
+++ b/packages/web/src/components/dashboard/overview-stats.tsx
@@ -86,6 +86,8 @@ export function OverviewStats({
         type="button"
         onClick={() => setExpanded(v => !v)}
         className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        aria-expanded={expanded}
+        aria-controls="overview-stats-info"
       >
         <span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
         <span className="font-medium text-foreground">What do these numbers mean?</span>
@@ -93,7 +95,7 @@ export function OverviewStats({
       </button>
 
       {expanded && (
-        <div className="mt-3 text-xs text-muted-foreground space-y-2 leading-relaxed">
+        <div id="overview-stats-info" className="mt-3 text-xs text-muted-foreground space-y-2 leading-relaxed">
           <p>
             <span className="font-medium text-foreground">Sessions</span> — 팀원들이 시작한 Claude Code 세션 수.
           </p>