From a2fafa1dac9247b379e09b47d2f6f086cdcdf93b Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 10 Jun 2026 21:16:46 +0000
Subject: [PATCH] fix(web): add accessibility attributes to overview stats
 toggle button

Added `aria-expanded` and `aria-controls` to the toggle button, `id` to the content container, and `aria-hidden` to purely decorative elements to improve screen reader experience.
---
 .Jules/palette.md                                        | 0
 packages/web/src/components/dashboard/overview-stats.tsx | 8 +++++---
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..e46221e 100644
--- a/packages/web/src/components/dashboard/overview-stats.tsx
+++ b/packages/web/src/components/dashboard/overview-stats.tsx
@@ -86,14 +86,16 @@ 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-explanation"
       >
-        <span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
+        <span aria-hidden="true" className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
         <span className="font-medium text-foreground">What do these numbers mean?</span>
-        <span>— {expanded ? 'click to collapse' : 'click to expand'}</span>
+        <span aria-hidden="true">— {expanded ? 'click to collapse' : 'click to expand'}</span>
       </button>
 
       {expanded && (
-        <div className="mt-3 text-xs text-muted-foreground space-y-2 leading-relaxed">
+        <div id="overview-stats-explanation" 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>