🎨 Palette: Add accessibility attributes to overview stats expander

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-24 - Add accessibility attributes to overview stats expander
+**Learning:** Collapsible sections need explicit semantic linkage between the toggle and the content, as well as state indication, to be accessible to screen reader users. Decorative visual cues like arrows can add noise for screen readers.
+**Action:** Always add `aria-expanded`, `aria-controls`, and an `id` to link toggle buttons to the content they control. Use `aria-hidden="true"` on non-semantic decorative icons.

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 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>
       </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>