🎨 접근성 개선: OverviewStats 토글 버튼에 ARIA 공시 패턴 적용 by seonghobae · Pull Request #6 · ContextualWisdomLab/argos

seonghobae · 2026-05-29T21:19:07Z

개요

OverviewStats의 "이 숫자들의 의미는?" 토글 버튼에 aria-expanded / aria-controls 속성을 추가하고, 대응하는 섹션에 id를 부여합니다.

변경 파일

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

변경 세부 사항

적용 전

<button onClick={toggle}>이 숫자들의 의미는?</button>

적용 후

<button
  onClick={toggle}
  aria-expanded={isOpen}
  aria-controls="overview-stats-explanation"
>
  이 숫자들의 의미는?
</button>

개선 이유

ARIA 속성 없이는 스크린 리더 사용자가:

섹션이 펼쳐져 있는지 접혀 있는지 알 수 없음
버튼과 해당 콘텐츠의 관계를 파악할 수 없음

WAI-ARIA Disclosure Widget 패턴 준수로 접근성 표준 달성

PR #4와의 관계

PR #4는 동일 컴포넌트에 더 광범위한 ARIA 개선(aria-hidden 장식 요소 처리 등)을 포함합니다. 이 PR은 핵심 토글 패턴에만 집중한 최소 변경입니다. 두 PR 중 더 완전한 것을 선택하거나 통합을 권장합니다.

…gle 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.

google-labs-jules · 2026-05-29T21:19:09Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

coderabbitai · 2026-05-29T21:19:19Z

📝 Walkthrough

Walkthrough

OverviewStats 컴포넌트의 "설명" 토글 UI가 ARIA disclosure 표준을 따르도록 개선되었습니다. 토글 버튼에 aria-expanded와 aria-controls 속성을 추가하고, 설명 영역은 조건부 렌더링 대신 hidden 속성으로 표시/숨김을 제어하도록 변경되었으며, 이러한 패턴을 개발 가이드에 문서화했습니다.

Changes

ARIA Disclosure Pattern in OverviewStats

Layer / File(s)	Summary
ARIA 속성 및 가시성 제어 구현 `packages/web/src/components/dashboard/overview-stats.tsx`	토글 버튼에 `aria-expanded`, `aria-controls` 속성을 추가하여 설명 패널과의 접근성 관계를 정의하고, 설명 영역을 조건부 렌더링에서 `id="overview-stats-explanation"`, `hidden={!expanded}` 기반 렌더링으로 변경하여 DOM 안정성을 개선했습니다.
접근성 패턴 문서화 `.Jules/palette.md`	확장 가능한 섹션의 ARIA 속성 적용 표준(aria-expanded, aria-controls, id 연결)을 개발 가이드에 추가하여 미래의 유사한 UI 패턴 구현 시 참고 자료로 활용하도록 했습니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 버튼과 내용이 손잡고, (aria-expanded 손을 쥐고)
화면 읽기 친구들도 이제 반갑게,
hidden의 춤으로 사라졌다 나타나고,
문서에 별 메모, 패턴은 영원히! ✨

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

Ignore

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Docstring Coverage	❌ Error	Docstring coverage is 0.00% which is insufficient. The required threshold is 100.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	제목이 PR의 주요 변경 사항인 OverviewStats 컴포넌트의 ARIA 접근성 속성 추가를 명확하게 설명하고 있습니다.
Description check	✅ Passed	설명이 변경 사항과 관련성이 있으며, 개선 이유, 적용 전후 코드, WAI-ARIA 패턴 준수 등을 구체적으로 설명하고 있습니다.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch palette-a11y-overview-stats-4193087038602449140

✨ Simplify code

Create PR with simplified code
Commit simplified code in branch palette-a11y-overview-stats-4193087038602449140

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

seonghobae · 2026-05-30T14:37:41Z

@codex[agent] 리뷰하시오.

google-labs-jules · 2026-05-30T14:38:45Z

@codex[agent] 리뷰하시오.

Acknowledged.

…gle 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.

Co-authored-by: seonghobae <8172694+seonghobae@users.noreply.github.com>

Codex · 2026-05-30T14:41:35Z

@codex[agent] 리뷰하시오.

토글/섹션 a11y 패턴 확인했고, aria-controls가 항상 DOM에 존재하는 요소를 가리키도록 섹션을 조건부 렌더링 대신 hidden 토글로 바꿨습니다. @argos/web lint/typecheck 통과했습니다. 커밋: d5f3970

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

checkpoint.prisma.io
- Triggering command: /opt/hostedtoolcache/node/24.16.0/x64/bin/node /opt/hostedtoolcache/node/24.16.0/x64/bin/node /home/REDACTED/work/argos/argos/node_modules/.pnpm/prisma@6.19.3_typescript@5.9.3/node_modules/prisma/build/child {"product":"prisma","version":"6.19.3","cli_install_type":"local","information":"","local_timestamp":"2026-05-30T14:39:33Z","project_hash":"256f53da","cli_path":"/home/REDACTED/work/argos/argos/packages/web/node_modules/prisma/build/index.js","cli_path_hash e/git (dns block)
fonts.googleapis.com
- Triggering command: /opt/hostedtoolcache/node/24.16.0/x64/bin/node /opt/hostedtoolcache/node/24.16.0/x64/bin/node /home/REDACTED/work/argos/argos/node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/compiled/jest-worker/processChild.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot cloud agent settings (admins only)

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.Jules/palette.md:
- Line 1: Update the document header date to match the actual change date by
replacing the header line starting with "## 2024-05-29 - [Expandable sections
need ARIA attributes]" to use the correct date (e.g., "## 2026-05-29 -
[Expandable sections need ARIA attributes]") and scan the rest of
.Jules/palette.md for any other dated entries to update so the file's documented
date(s) reflect the real modification date.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 63ffe55e-db50-4ebc-9713-856a5732a7b1

📥 Commits

Reviewing files that changed from the base of the PR and between 8640510 and d5f3970.

📒 Files selected for processing (2)

.Jules/palette.md
packages/web/src/components/dashboard/overview-stats.tsx

coderabbitai · 2026-05-30T14:43:56Z

@@ -0,0 +1,3 @@
+## 2024-05-29 - [Expandable sections need ARIA attributes]


⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

문서 날짜를 실제 변경 시점으로 맞춰 주세요.

Line 1의 2024-05-29는 이번 PR 생성일(2026-05-29)과 맞지 않아 이력 추적을 혼동시킬 수 있습니다. 날짜를 실제 반영일로 수정하는 것이 좋습니다.

수정 제안

-## 2024-05-29 - [Expandable sections need ARIA attributes] +## 2026-05-29 - [Expandable sections need ARIA attributes]

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

## 2024-05-29 - [Expandable sections need ARIA attributes]

## 2026-05-29 - [Expandable sections need ARIA attributes]

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.Jules/palette.md at line 1, Update the document header date to match the actual change date by replacing the header line starting with "## 2024-05-29 - [Expandable sections need ARIA attributes]" to use the correct date (e.g., "## 2026-05-29 - [Expandable sections need ARIA attributes]") and scan the rest of .Jules/palette.md for any other dated entries to update so the file's documented date(s) reflect the real modification date.

seonghobae · 2026-05-30T15:41:08Z

@coderabbitai ARIA 접근성 개선 PR을 리뷰해 주세요:

WAI-ARIA Disclosure Widget 패턴 올바른 구현 여부
PR #4와 동일 파일 수정 — 두 PR 중 어떤 것이 더 완전한지 의견 주세요
id 충돌 가능성(동일 컴포넌트 다중 렌더링 시)

coderabbitai · 2026-05-30T15:42:12Z

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== overview-stats.tsx current content ==="
cat packages/web/src/components/dashboard/overview-stats.tsx 2>/dev/null || echo "File not found"

echo ""
echo "=== .Jules/palette.md ==="
cat .Jules/palette.md 2>/dev/null || echo "File not found"

echo ""
echo "=== PR `#4` details ==="
gh pr view 4 --json title,body,files,state

echo ""
echo "=== PR `#4` diff for overview-stats.tsx ==="
gh pr diff 4 -- packages/web/src/components/dashboard/overview-stats.tsx 2>/dev/null || echo "Could not get diff"

echo ""
echo "=== PR `#6` diff ==="
gh pr diff 6 2>/dev/null || echo "Could not get diff"

Length of output: 10595

@seonghobae 세 가지 항목 모두 상세히 검토했습니다.

1. WAI-ARIA Disclosure Widget 패턴 구현 여부

올바르게 구현된 부분 ✅

요건	구현 여부
버튼에 `aria-expanded`	✅
버튼에 `aria-controls`	✅
대상 요소에 일치하는 `id`	✅
`hidden` 속성으로 DOM 유지 (aria-controls 대상은 DOM에 존재해야 함)	✅
`type="button"`	✅

누락된 부분 ⚠️

장식용 요소들이 aria-hidden 없이 스크린 리더에 그대로 노출됩니다:

// 현재 (PR `#6`)
<span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
<span>— {expanded ? 'click to collapse' : 'click to expand'}</span>

aria-expanded가 이미 상태를 전달하는데, "click to expand/click to collapse" 텍스트가 중복 발화됩니다. WAI-ARIA Authoring Practices에서는 장식용·중복 텍스트에 aria-hidden="true"를 권장합니다.

2. PR `#4` vs PR `#6` — 어느 것이 더 완전한가?

PR #4가 더 완전합니다.

PR #4 설명에 따르면 aria-hidden="true"를 장식 화살표와 "click to expand/collapse" 텍스트에 명시적으로 추가했습니다. PR #6에는 이 처리가 없습니다.

// PR `#4` 방식 (더 완전)
<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 aria-hidden="true">— {expanded ? 'click to collapse' : 'click to expand'}</span>

두 PR이 충돌하므로, 병합 시 PR #4의 aria-hidden 처리를 포함하는 방향으로 통합을 권장합니다.

3. `id` 충돌 가능성 🔴

실제 버그입니다. id="overview-stats-explanation"이 하드코딩되어 있어, OverviewStats가 같은 페이지에 두 번 이상 렌더링되면(예: 기간별 비교 뷰, 테스트 환경 등):

HTML 유효성 위반 (중복 id)
aria-controls가 DOM에서 첫 번째로 발견된 요소만 가리킴
스크린 리더 동작 예측 불가

권장 수정 — React 18의 useId() 훅 사용:

import { useState, useId } from 'react'

export function OverviewStats({ ... }) {
  const [expanded, setExpanded] = useState(false)
  const explanationId = useId()  // 인스턴스별 고유 id 자동 생성

  return (
    // ...
    <button
      aria-expanded={expanded}
      aria-controls={explanationId}
      // ...
    >
      ...
    </button>
    <div
      id={explanationId}
      hidden={!expanded}
      // ...
    >
      ...
    </div>
  )
}

요약: PR #6의 핵심 패턴은 올바르지만, (1) 장식 요소에 aria-hidden 미적용과 (2) 하드코딩된 id 충돌 위험이 남아 있습니다. PR #4가 전자를 해결하고, useId() 도입이 후자를 해결합니다. 두 PR을 머지하기 전에 통합하는 것을 권장합니다.

google-labs-jules · 2026-05-30T15:42:31Z

@coderabbitai ARIA 접근성 개선 PR을 리뷰해 주세요:

WAI-ARIA Disclosure Widget 패턴 올바른 구현 여부

PR #4와 동일 파일 수정 — 두 PR 중 어떤 것이 더 완전한지 의견 주세요

id 충돌 가능성(동일 컴포넌트 다중 렌더링 시)

Acknowledged. Since the comment explicitly asks @coderabbitai for a review and specifies specific points for the other bot to check, I will leave this for coderabbitai to handle.

seonghobae · 2026-05-30T15:59:32Z

@coderabbitai review

이 PR을 전체 검토해 주세요. 특히 다음 사항을 중점적으로 확인해 주시기 바랍니다:

코드 정확성 및 잠재적 버그
보안 취약점 여부
성능 영향
코딩 표준 및 best practice 준수 여부

coderabbitai · 2026-05-30T16:00:31Z

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== PR `#6` full diff ==="
gh pr diff 6

echo ""
echo "=== overview-stats.tsx on PR branch ==="
cat packages/web/src/components/dashboard/overview-stats.tsx 2>/dev/null || echo "File not found"

echo ""
echo "=== .Jules/palette.md ==="
cat .Jules/palette.md 2>/dev/null || echo "File not found"

echo ""
echo "=== Check for useId usage across codebase ==="
rg "useId" --type tsx --type ts -n 2>/dev/null || rg "useId" -n 2>/dev/null || echo "No useId usage found"

echo ""
echo "=== Check for OverviewStats usages ==="
rg "OverviewStats" -n 2>/dev/null || echo "No usages found"

echo ""
echo "=== Check for overview-stats-explanation id references ==="
rg "overview-stats-explanation" -n 2>/dev/null || echo "No references found"

Length of output: 10083

@seonghobae PR #6 전체 검토 결과입니다.

전체 리뷰 요약

✅ 잘 된 점

항목	설명
WAI-ARIA Disclosure 패턴	`aria-expanded`, `aria-controls`, 일치하는 `id` 모두 구현
`hidden` 속성 사용	조건부 렌더링 대신 `hidden={!expanded}` — `aria-controls` 대상이 DOM에 항상 존재해야 하므로 올바른 구현
`type="button"`	form submit 방지 ✅
보안	외부 입력 없음, XSS 위험 없음 ✅
성능	정적 텍스트만 항상 DOM에 유지 — 영향 무시 가능 ✅

🔴 버그: 하드코딩된 `id`

// 현재 — 중복 id 위험
aria-controls="overview-stats-explanation"
...
id="overview-stats-explanation"

현재는 OverviewStats가 한 페이지에 한 번만 쓰이지만, 하드코딩된 id는 컴포넌트를 재사용 가능하게 설계하는 원칙에 위배됩니다. React 18의 useId()로 수정을 권장합니다:

import { useState, useId } from 'react'

export function OverviewStats({ ... }) {
  const [expanded, setExpanded] = useState(false)
  const explanationId = useId()

  return (
    // ...
    <button
      aria-expanded={expanded}
      aria-controls={explanationId}
      // ...
    >
    <div
      id={explanationId}
      hidden={!expanded}
      // ...
    >
  )
}

⚠️ A11y: 장식 요소에 `aria-hidden` 누락

aria-expanded가 이미 상태를 전달하는데, 아래 텍스트가 중복으로 스크린 리더에 읽힙니다:

// 현재 — 스크린 리더가 "click to expand" 중복 발화
<span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
<span>— {expanded ? 'click to collapse' : 'click to expand'}</span>

// 권장
<span aria-hidden="true" className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
<span aria-hidden="true">— {expanded ? 'click to collapse' : 'click to expand'}</span>

⚠️ `.Jules/palette.md` 파일

.Jules/palette.md는 AI 에이전트(Jules)의 내부 학습 로그 파일입니다. 소스코드 저장소에 커밋하기엔 적합하지 않습니다:

.gitignore에 추가하거나
삭제하는 것을 권장합니다

우선순위 정리

우선순위	항목
🔴 High	`useId()`로 하드코딩된 `id` 교체
⚠️ Medium	장식 요소에 `aria-hidden="true"` 추가
⚠️ Low	`.Jules/palette.md` 커밋 여부 검토

핵심 ARIA 패턴은 올바르게 구현되어 있습니다. useId() 수정과 aria-hidden 추가 후 병합하면 충분히 완성도 있는 PR이 될 것입니다.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

google-labs-jules · 2026-05-30T16:01:13Z

@coderabbitai review

이 PR을 전체 검토해 주세요. 특히 다음 사항을 중점적으로 확인해 주시기 바랍니다:

코드 정확성 및 잠재적 버그

보안 취약점 여부

성능 영향

코딩 표준 및 best practice 준수 여부

Acknowledged. I will let @coderabbitai handle this review request as specified.

seonghobae · 2026-06-01T11:33:32Z

이 PR은 PR #4 (upstream PR vibemafiaclub#20)에 의해 대체되었습니다. PR #4에서 동일한 ARIA Disclosure 패턴이 적용되었으며, upstream 리뷰어의 피드백에 따라 role='region' 제거 등이 이미 반영되었습니다. 닫겠습니다.

google-labs-jules · 2026-06-01T11:34:34Z

이 PR은 PR #4 (upstream PR vibemafiaclub#20)에 의해 대체되었습니다. PR #4에서 동일한 ARIA Disclosure 패턴이 적용되었으며, upstream 리뷰어의 피드백에 따라 role='region' 제거 등이 이미 반영되었습니다. 닫겠습니다.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

Codex started work on behalf of seonghobae May 30, 2026 14:37 View session

seonghobae and others added 2 commits May 30, 2026 14:39

fix(a11y): keep overview stats disclosure region in DOM

d5f3970

Co-authored-by: seonghobae <8172694+seonghobae@users.noreply.github.com>

Codex finished work on behalf of seonghobae May 30, 2026 14:42

coderabbitai Bot suggested changes May 30, 2026

View reviewed changes

seonghobae changed the title ~~🎨 Palette: [UX improvement] Add ARIA attributes for better accessibility~~ 🎨 접근성 개선: OverviewStats 토글 버튼에 ARIA 공시 패턴 적용 May 30, 2026

seonghobae closed this Jun 1, 2026

		@@ -0,0 +1,3 @@
		## 2024-05-29 - [Expandable sections need ARIA attributes]

	## 2024-05-29 - [Expandable sections need ARIA attributes]
	## 2026-05-29 - [Expandable sections need ARIA attributes]

Conversation

seonghobae commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

개요

변경 파일

변경 세부 사항

적용 전

적용 후

개선 이유

PR #4와의 관계

Uh oh!

google-labs-jules Bot commented May 29, 2026

Uh oh!

coderabbitai Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks failed

❌ Failed checks (1 error)

Uh oh!

seonghobae commented May 30, 2026

Uh oh!

google-labs-jules Bot commented May 30, 2026

Uh oh!

Codex AI commented May 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 30, 2026

Choose a reason for hiding this comment

Uh oh!

seonghobae commented May 30, 2026

Uh oh!

coderabbitai Bot commented May 30, 2026

1. WAI-ARIA Disclosure Widget 패턴 구현 여부

2. PR #4 vs PR #6 — 어느 것이 더 완전한가?

3. id 충돌 가능성 🔴

Uh oh!

google-labs-jules Bot commented May 30, 2026

Uh oh!

seonghobae commented May 30, 2026

Uh oh!

coderabbitai Bot commented May 30, 2026

전체 리뷰 요약

✅ 잘 된 점

🔴 버그: 하드코딩된 id

⚠️ A11y: 장식 요소에 aria-hidden 누락

⚠️ .Jules/palette.md 파일

우선순위 정리

Uh oh!

google-labs-jules Bot commented May 30, 2026

Uh oh!

seonghobae commented Jun 1, 2026

Uh oh!

google-labs-jules Bot commented Jun 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

seonghobae commented May 29, 2026 •

edited

Loading

coderabbitai Bot commented May 29, 2026 •

edited

Loading

Codex AI commented May 30, 2026 •

edited

Loading

2. PR `#4` vs PR `#6` — 어느 것이 더 완전한가?

3. `id` 충돌 가능성 🔴

🔴 버그: 하드코딩된 `id`

⚠️ A11y: 장식 요소에 `aria-hidden` 누락

⚠️ `.Jules/palette.md` 파일