From e6e44de14bf3d1d69e1f536bf25f707e1096fb9d Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 1 Jun 2026 21:41:48 +0000
Subject: [PATCH] Add accessibility attributes to stats disclosure button

- Added `aria-expanded` and `aria-controls` to the overview stats disclosure button
- Set `id` on the expandable content div to match `aria-controls`
- Hid the purely decorative arrow icon from screen readers using `aria-hidden`
---
 packages/web/src/components/dashboard/overview-stats.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..d8a472a 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="stats-explanation"
       >
-        <span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
+        <span className={cn('inline-block transition-transform', expanded && 'rotate-90')} aria-hidden="true">▸</span>
         <span className="font-medium text-foreground">What do these numbers mean?</span>
         <span>— {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="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>