From 94a5a6d460ee595c42b7eff447cc8f94ab24cb08 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 29 May 2026 21:19:03 +0000 Subject: [PATCH 1/3] feat(a11y): add aria-expanded and aria-controls to overview stats toggle button Adds necessary ARIA attributes to the expandable section in the OverviewStats component. This implements the standard disclosure pattern, improving the screen reader experience by communicating the expanded/collapsed state and establishing the relationship between the toggle button and the content it controls. --- .Jules/palette.md | 3 +++ packages/web/src/components/dashboard/overview-stats.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..74978aa --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-29 - [Expandable sections need ARIA attributes] +**Learning:** Found an accordion/expandable pattern in `overview-stats.tsx` that lacked `aria-expanded` and `aria-controls`. The content block was also missing an `id` tying back to `aria-controls`. +**Action:** Applied standard disclosure pattern by providing `aria-expanded` to the toggler button, assigning an `id` to the toggled content, and adding `aria-controls=""` to link them. diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx index cce93b6..da4a456 100644 --- a/packages/web/src/components/dashboard/overview-stats.tsx +++ b/packages/web/src/components/dashboard/overview-stats.tsx @@ -86,6 +86,8 @@ export function OverviewStats({ type="button" onClick={() => setExpanded(v => !v)} className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors" + aria-expanded={expanded} + aria-controls="overview-stats-explanation" > ▸ What do these numbers mean? @@ -93,7 +95,7 @@ export function OverviewStats({ {expanded && ( -
+

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

From 02a10ba750f611da9aea8f49b150e7a98d87ce59 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sat, 30 May 2026 14:39:07 +0000 Subject: [PATCH 2/3] feat(a11y): add aria-expanded and aria-controls to overview stats toggle button Adds necessary ARIA attributes to the expandable section in the OverviewStats component. This implements the standard disclosure pattern, improving the screen reader experience by communicating the expanded/collapsed state and establishing the relationship between the toggle button and the content it controls. From d5f3970ce7b37fca7b9743234fdc27ab3362472e Mon Sep 17 00:00:00 2001 From: "openai-code-agent[bot]" <242516109+Codex@users.noreply.github.com> Date: Sat, 30 May 2026 14:41:25 +0000 Subject: [PATCH 3/3] fix(a11y): keep overview stats disclosure region in DOM Co-authored-by: seonghobae <8172694+seonghobae@users.noreply.github.com> --- .../components/dashboard/overview-stats.tsx | 48 ++++++++++--------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx index da4a456..c0d8aa4 100644 --- a/packages/web/src/components/dashboard/overview-stats.tsx +++ b/packages/web/src/components/dashboard/overview-stats.tsx @@ -94,29 +94,31 @@ export function OverviewStats({ — {expanded ? 'click to collapse' : 'click to expand'} - {expanded && ( -
-

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

-

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

-

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

-

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

-

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

-

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

-
- )} +
) }