From b0f7f3009f60ed3cfdde68e44468816a5218a2e8 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 28 May 2026 22:11:46 +0000 Subject: [PATCH 1/4] feat(ui): improve accessibility for overview stats expand button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add `aria-expanded` and `aria-controls` to the expand button in `overview-stats.tsx` - Add an `id` to the toggled content div to match `aria-controls` - Hide purely visual indicators ('▸' and text like 'click to expand') from screen readers using `aria-hidden="true"` to reduce verbosity and redundancy since state is already conveyed via `aria-expanded`. --- .Jules/palette.md | 3 +++ packages/web/src/components/dashboard/overview-stats.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..d2572c0 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2026-05-28 - Added Accessibility to Expand/Collapse Component +**Learning:** In React components containing toggleable UI elements with descriptive supplementary text (e.g., 'click to expand'), combining `aria-expanded` with `aria-hidden='true'` on the descriptive text makes screen reader output much cleaner and less redundant. +**Action:** Always verify if a button using `aria-expanded` contains visual helper text that duplicates the accessibility state, and hide it from screen readers if it does. diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx index cce93b6..a4746b5 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({ {expanded && ( -
+

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

From 7ce2be5bbad5b13eb370b5fb33c463e9705c3dd0 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sat, 30 May 2026 14:37:38 +0000 Subject: [PATCH 2/4] feat(ui): improve accessibility for overview stats expand button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add `aria-expanded` and `aria-controls` to the expand button in `overview-stats.tsx` - Add an `id` to the toggled content div to match `aria-controls` - Hide purely visual indicators ('▸' and text like 'click to expand') from screen readers using `aria-hidden="true"` to reduce verbosity and redundancy since state is already conveyed via `aria-expanded`. From 891728c251e1257fc28a0358114662c810a4fee1 Mon Sep 17 00:00:00 2001 From: "openai-code-agent[bot]" <242516109+Codex@users.noreply.github.com> Date: Sat, 30 May 2026 14:39:37 +0000 Subject: [PATCH 3/4] fix(ui): improve OverviewStats expand a11y linkage Co-authored-by: seonghobae <8172694+seonghobae@users.noreply.github.com> --- .../components/dashboard/overview-stats.tsx | 59 +++++++++++-------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx index a4746b5..1fe465a 100644 --- a/packages/web/src/components/dashboard/overview-stats.tsx +++ b/packages/web/src/components/dashboard/overview-stats.tsx @@ -85,38 +85,49 @@ export function OverviewStats({ - {expanded && ( -
-

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

-

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

-

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

-

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

-

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

-

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

-
- )} +
) } From 3748b522457fc80c8f8019d289d5bf941cac002e Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Mon, 1 Jun 2026 20:16:37 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20-=20.Jules/palette.md=20=EC=82=AD=EC=A0=9C,=20role?= =?UTF-8?q?=3D'region'=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .Jules/palette.md AI 에이전트 내부 로그 파일 삭제 - role='region' 및 aria-labelledby 제거: WAI-ARIA Disclosure 패턴에서 짧은 설명 텍스트에 landmark role을 사용하면 스크린 리더의 landmark 네비게이션 목록에 불필요한 항목이 생기므로 제거 - aria-expanded + aria-controls + hidden 조합만으로 충분한 Disclosure 패턴 유지 Co-Authored-By: Mastra Code (anthropic/claude-opus-4-6) --- .Jules/palette.md | 3 --- packages/web/src/components/dashboard/overview-stats.tsx | 2 -- 2 files changed, 5 deletions(-) delete mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md deleted file mode 100644 index d2572c0..0000000 --- a/.Jules/palette.md +++ /dev/null @@ -1,3 +0,0 @@ -## 2026-05-28 - Added Accessibility to Expand/Collapse Component -**Learning:** In React components containing toggleable UI elements with descriptive supplementary text (e.g., 'click to expand'), combining `aria-expanded` with `aria-hidden='true'` on the descriptive text makes screen reader output much cleaner and less redundant. -**Action:** Always verify if a button using `aria-expanded` contains visual helper text that duplicates the accessibility state, and hide it from screen readers if it does. diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx index 1fe465a..7b30abd 100644 --- a/packages/web/src/components/dashboard/overview-stats.tsx +++ b/packages/web/src/components/dashboard/overview-stats.tsx @@ -102,8 +102,6 @@ export function OverviewStats({