🎨 Palette: Add accessibility attributes and focus rings to expandable elements

packages/web/src/components/dashboard/event-list.tsx

@@ -123,7 +123,8 @@ function getSinglePreview(event: TimelineEvent): string {
     return normalized.slice(0, 80);
   }
   if (event.isSkillCall && event.skillName) return `Skill: ${event.skillName}`;
-  if (event.isAgentCall && event.agentType) return `Subagent: ${event.agentType}`;
+  if (event.isAgentCall && event.agentType)
+    return `Subagent: ${event.agentType}`;
   return event.toolName;
 }
 
@@ -164,8 +165,9 @@ function RowView({
     <button
       type="button"
       onClick={onClick}
+      aria-expanded={chevron !== undefined ? chevron === "expanded" : undefined}
       className={cn(
-        "w-full h-full text-left flex items-center gap-3 py-2 border-b border-border/60 transition-colors",
+        "w-full h-full text-left flex items-center gap-3 py-2 border-b border-border/60 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
         indented ? "pl-10 pr-3" : "px-3",
         isSelected
           ? "border-l-2 border-l-brand bg-brand-subtle"
@@ -238,11 +240,12 @@ function Row({
   }
 
   const label = row.labelOverride ?? getSingleLabel(row.event);
-  const preview = row.labelOverride === "Tool"
-    ? row.event.kind === "tool"
-      ? row.event.toolName
-      : getSinglePreview(row.event)
-    : getSinglePreview(row.event);
+  const preview =
+    row.labelOverride === "Tool"
+      ? row.event.kind === "tool"
+        ? row.event.toolName
+        : getSinglePreview(row.event)
+      : getSinglePreview(row.event);
 
   return (
     <div style={style} role="listitem">

packages/web/src/components/dashboard/overview-stats.tsx

@@ -1,38 +1,43 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import { cn } from '@/lib/utils'
-import { formatTokens, formatCost } from '@/lib/format'
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { formatTokens, formatCost } from "@/lib/format";
 
 interface OverviewStatsProps {
-  periodLabel: string
-  sessions: number
-  turns: number
-  inputTokens: number
-  outputTokens: number
-  cacheReadTokens: number
-  cacheCreationTokens: number
-  estimatedCostUsd: number
-  rangeSelector?: React.ReactNode
+  periodLabel: string;
+  sessions: number;
+  turns: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheCreationTokens: number;
+  estimatedCostUsd: number;
+  rangeSelector?: React.ReactNode;
 }
 
 interface StatTileProps {
-  label: string
-  value: string
-  valueTone?: 'default' | 'success'
-  subtext?: string
+  label: string;
+  value: string;
+  valueTone?: "default" | "success";
+  subtext?: string;
 }
 
-function StatTile({ label, value, valueTone = 'default', subtext }: StatTileProps) {
+function StatTile({
+  label,
+  value,
+  valueTone = "default",
+  subtext,
+}: StatTileProps) {
   return (
     <div className="flex flex-col gap-1 rounded-lg bg-card-elevated ring-1 ring-foreground/5 px-4 py-3 min-w-[130px]">
       <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
         {label}
       </span>
       <span
         className={cn(
-          'text-2xl font-semibold leading-tight tabular-nums',
-          valueTone === 'success' ? 'text-success' : 'text-foreground',
+          "text-2xl font-semibold leading-tight tabular-nums",
+          valueTone === "success" ? "text-success" : "text-foreground",
         )}
       >
         {value}
@@ -41,7 +46,7 @@ function StatTile({ label, value, valueTone = 'default', subtext }: StatTileProp
         <span className="text-[10px] text-muted-foreground">{subtext}</span>
       )}
     </div>
-  )
+  );
 }
 
 export function OverviewStats({
@@ -55,7 +60,7 @@ export function OverviewStats({
   estimatedCostUsd,
   rangeSelector,
 }: OverviewStatsProps) {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <div className="rounded-xl bg-card ring-1 ring-foreground/10 p-4 sm:p-5">
@@ -73,7 +78,10 @@ export function OverviewStats({
         <StatTile label="Input" value={formatTokens(inputTokens)} />
         <StatTile label="Output" value={formatTokens(outputTokens)} />
         <StatTile label="Cache Read" value={formatTokens(cacheReadTokens)} />
-        <StatTile label="Cache Create" value={formatTokens(cacheCreationTokens)} />
+        <StatTile
+          label="Cache Create"
+          value={formatTokens(cacheCreationTokens)}
+        />
         <StatTile
           label="Est. Cost"
           value={formatCost(estimatedCostUsd)}
@@ -84,37 +92,58 @@ export function OverviewStats({
 
       <button
         type="button"
-        onClick={() => setExpanded(v => !v)}
-        className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        aria-controls="stats-explanation"
+        className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
       >
-        <span 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
+          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="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 세션 수.
+            <span className="font-medium text-foreground">Sessions</span> —
+            팀원들이 시작한 Claude Code 세션 수.
           </p>
           <p>
-            <span className="font-medium text-foreground">Turns</span> — Human → Assistant 한 번의 왕복(Stop 이벤트 기준).
+            <span className="font-medium text-foreground">Turns</span> — Human →
+            Assistant 한 번의 왕복(Stop 이벤트 기준).
           </p>
           <p>
-            <span className="font-medium text-foreground">Input / Output</span> — Claude에 보낸 토큰과 Claude가 응답으로 쓴 토큰의 합계.
+            <span className="font-medium text-foreground">Input / Output</span>{" "}
+            — Claude에 보낸 토큰과 Claude가 응답으로 쓴 토큰의 합계.
           </p>
           <p>
-            <span className="font-medium text-foreground">Cache Create</span> — 재사용을 위해 저장된 토큰(예: CLAUDE.md).
-            한 번 지불하면 이후 읽기는 훨씬 저렴해집니다.
+            <span className="font-medium text-foreground">Cache Create</span> —
+            재사용을 위해 저장된 토큰(예: CLAUDE.md). 한 번 지불하면 이후 읽기는
+            훨씬 저렴해집니다.
           </p>
           <p>
-            <span className="font-medium text-foreground">Cache Read</span> — 캐시에서 재사용된 토큰. 일반 input 대비 약 ~10× 싸므로 이 숫자가 높은 건 좋은 신호입니다.
+            <span className="font-medium text-foreground">Cache Read</span> —
+            캐시에서 재사용된 토큰. 일반 input 대비 약 ~10× 싸므로 이 숫자가
+            높은 건 좋은 신호입니다.
           </p>
           <p>
-            <span className="font-medium text-foreground">Est. Cost</span> — 모델별 공식 단가로 계산한 추정 청구액 (USD).
+            <span className="font-medium text-foreground">Est. Cost</span> —
+            모델별 공식 단가로 계산한 추정 청구액 (USD).
           </p>
         </div>
       )}
     </div>
-  )
+  );
 }