From f3e88aef45dc4a803b23c107ca29666cc8a523e0 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 4 Jun 2026 21:25:13 +0000
Subject: [PATCH] feat(web): add accessibility attributes to overview stats
 toggle

Added `aria-expanded` and `aria-controls` to the "What do these numbers mean?" toggle button in the OverviewStats component, and a matching `id` to the toggled content. This improves screen reader accessibility by announcing the expanded state and the relationship between the button and the content.
---
 packages/web/src/components/dashboard/overview-stats.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..4833a9b 100644
--- a/packages/web/src/components/dashboard/overview-stats.tsx
+++ b/packages/web/src/components/dashboard/overview-stats.tsx
@@ -85,6 +85,8 @@ export function OverviewStats({
       <button
         type="button"
         onClick={() => setExpanded(v => !v)}
+        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"
       >
         <span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</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-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>