From 230330ef6c80c647aadd45b1076d9b61db4492bd Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 9 Jun 2026 21:41:42 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20for=20overview=20stats=20collapsible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added proper ARIA attributes to the collapsible "What do these numbers mean?"
section in `overview-stats.tsx` to provide standard accessibility for screen readers.

- Linked button to collapsible content with `aria-controls`
- Reflected collapsed/expanded state with `aria-expanded`
- Added `aria-hidden="true"` to visual icons/instructional texts to avoid redundancy.
---
 packages/web/src/components/dashboard/overview-stats.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..aa6e11d 100644
--- a/packages/web/src/components/dashboard/overview-stats.tsx
+++ b/packages/web/src/components/dashboard/overview-stats.tsx
@@ -85,15 +85,17 @@ 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>
+        <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>
+        <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>