From 4faf8fb4b6bedd2809c6152e1f0b20aab9c2bcf4 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 31 May 2026 21:33:16 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibili?= =?UTF-8?q?ty=20attributes=20and=20focus=20rings=20to=20expandable=20eleme?= =?UTF-8?q?nts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds `aria-expanded` and explicit `focus-visible` styles to interactive elements in `overview-stats.tsx` and `event-list.tsx` that function as disclosure components. This improves keyboard navigation and screen reader support for these UI patterns. --- .Jules/palette.md | 3 + .../src/components/dashboard/event-list.tsx | 17 +-- .../components/dashboard/overview-stats.tsx | 103 +++++++++++------- 3 files changed, 79 insertions(+), 44 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..766eec9 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-06-25 - Missing accessibility attributes on expandable elements +**Learning:** Found multiple instances where interactive elements function as accordions or disclose additional content (e.g., `event-list.tsx`, `overview-stats.tsx`) but lacked `aria-expanded`, `aria-controls`, and consistent focus rings (`focus-visible`). This makes it difficult for screen reader users to understand the state of the content and for keyboard users to navigate. +**Action:** When implementing expandable or disclosure UI patterns, always include `aria-expanded` reflecting the current state, and ensure focus rings are visible using existing utility classes like `focus-visible:ring-2` to maintain keyboard accessibility. diff --git a/packages/web/src/components/dashboard/event-list.tsx b/packages/web/src/components/dashboard/event-list.tsx index 61a3f68..25a8650 100644 --- a/packages/web/src/components/dashboard/event-list.tsx +++ b/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({ {expanded && ( -
+

- Sessions — 팀원들이 시작한 Claude Code 세션 수. + Sessions — + 팀원들이 시작한 Claude Code 세션 수.

- Turns — Human → Assistant 한 번의 왕복(Stop 이벤트 기준). + Turns — Human → + Assistant 한 번의 왕복(Stop 이벤트 기준).

- Input / Output — Claude에 보낸 토큰과 Claude가 응답으로 쓴 토큰의 합계. + Input / Output{" "} + — Claude에 보낸 토큰과 Claude가 응답으로 쓴 토큰의 합계.

- Cache Create — 재사용을 위해 저장된 토큰(예: CLAUDE.md). - 한 번 지불하면 이후 읽기는 훨씬 저렴해집니다. + Cache Create — + 재사용을 위해 저장된 토큰(예: CLAUDE.md). 한 번 지불하면 이후 읽기는 + 훨씬 저렴해집니다.

- Cache Read — 캐시에서 재사용된 토큰. 일반 input 대비 약 ~10× 싸므로 이 숫자가 높은 건 좋은 신호입니다. + Cache Read — + 캐시에서 재사용된 토큰. 일반 input 대비 약 ~10× 싸므로 이 숫자가 + 높은 건 좋은 신호입니다.

- Est. Cost — 모델별 공식 단가로 계산한 추정 청구액 (USD). + Est. Cost — + 모델별 공식 단가로 계산한 추정 청구액 (USD).

)}
- ) + ); } From 3021431bd082220e56eb1ffaf0f217e7f149b2f1 Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Mon, 1 Jun 2026 20:32:16 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20.Jules/palette.md=20AI=20=EC=97=90?= =?UTF-8?q?=EC=9D=B4=EC=A0=84=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Mastra Code (anthropic/claude-opus-4-6) --- .Jules/palette.md | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md deleted file mode 100644 index 766eec9..0000000 --- a/.Jules/palette.md +++ /dev/null @@ -1,3 +0,0 @@ -## 2024-06-25 - Missing accessibility attributes on expandable elements -**Learning:** Found multiple instances where interactive elements function as accordions or disclose additional content (e.g., `event-list.tsx`, `overview-stats.tsx`) but lacked `aria-expanded`, `aria-controls`, and consistent focus rings (`focus-visible`). This makes it difficult for screen reader users to understand the state of the content and for keyboard users to navigate. -**Action:** When implementing expandable or disclosure UI patterns, always include `aria-expanded` reflecting the current state, and ensure focus rings are visible using existing utility classes like `focus-visible:ring-2` to maintain keyboard accessibility. From a869690b8805887b9d2e5d36a6fe3380f6abf237 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Mon, 1 Jun 2026 11:35:13 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibili?= =?UTF-8?q?ty=20attributes=20and=20focus=20rings=20to=20expandable=20eleme?= =?UTF-8?q?nts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds `aria-expanded` and explicit `focus-visible` styles to interactive elements in `overview-stats.tsx` and `event-list.tsx` that function as disclosure components. This improves keyboard navigation and screen reader support for these UI patterns.