🎨 Palette: [Accessibility] Improve collapsible section in Overview Stats

[seonghobae]

What

Added accessibility attributes (aria-expanded, aria-controls, aria-hidden) to the collapsible "What do these numbers mean?" section in the Overview Stats component.

Why

To ensure screen readers can correctly identify the button as an expand/collapse toggle, know its current state, and understand which content block it controls. It also hides decorative visual icons from screen readers to reduce unnecessary noise.

Before/After

• Before: Button was just a <button> with visual icons and text. Screen readers couldn't tell if it was expanded or what it controlled.
• After: Button is semantically linked to the content container, state is announced properly, and visual-only arrows/labels are hidden from screen readers.

Accessibility

• Added aria-expanded and aria-controls to the toggle button.
• Added id to the content div to link with aria-controls.
• Added aria-hidden="true" to the purely decorative arrow and the "click to expand" instruction to eliminate duplicative noise.

---

PR created automatically by Jules for task 18417779644745569749 started by @seonghobae

[google-labs-jules]

👋 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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f1ad4714-6dde-4511-ad6e-6efee571c3bb

📥 Commits

Reviewing files that changed from the base of the PR and between 220b497 and a2fafa1.

📒 Files selected for processing (2)

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

---

📝 Walkthrough

Summary by CodeRabbit

릴리스 노트

• 개선 사항
  • 대시보드 개요 통계의 토글 버튼 접근성 개선으로 스크린리더 사용자의 이용성 향상
  • 버튼 상태 정보 명확화 및 관련 콘텐츠 영역 연결 개선

Walkthrough

OverviewStats 컴포넌트의 토글 버튼에 ARIA 접근성 속성을 추가했습니다. 버튼에 aria-expanded와 aria-controls 속성을 연결하고, 버튼 내 시각적 표시 요소를 aria-hidden으로 처리하여 스크린리더와 시각적 표시를 분리했으며, 설명 컨테이너에 대응하는 id를 추가했습니다.

Changes

Toggle 버튼 ARIA 접근성 개선

Layer / File(s)	Summary
Toggle 버튼 ARIA 레이블링 및 설명 컨테이너 연결 packages/web/src/components/dashboard/overview-stats.tsx	토글 버튼에 aria-expanded와 aria-controls="overview-stats-explanation" 속성을 추가하여 확장 상태와 제어 대상을 명시했습니다. 버튼 내부의 화살표/안내 문구를 aria-hidden으로 감싸 스크린리더 노출을 제어했으며, 설명 컨테이너에 id="overview-stats-explanation"를 부여해 ARIA 관계를 완성했습니다.

예상 코드 리뷰 소요 시간

🎯 1 (Trivial) | ⏱️ ~3분

Poem

🐰 작은 버튼, 큰 목소리로
ARIA 속성 물씬 나고,
스크린리더 친구들 반겨주네!
접근성 마법, 완성됐어요. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목은 접근성 개선이라는 PR의 주요 목적을 명확하게 반영하고 있으며, 변경사항의 핵심 내용과 일치합니다.
Description check	✅ Passed	설명은 변경사항의 목적, 구현 내용, 그리고 기대효과를 상세하게 설명하고 있어 PR의 의도를 명확하게 전달합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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-18417779644745569749

✨ Simplify code

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

Warning

Billing warning: we have not been able to collect payment for this subscription for more than 72 hours. Please update the payment method or pay any pending invoices in Billing to avoid service interruption.

---

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

[seonghobae]

최신 upstream/main 기준으로 이 PR 브랜치(palette-a11y-overview-stats-18417779644745569749)는 95개 파일의 stale diff를 포함합니다. 특히 .claude agent/skill 파일 삭제와 오래된 lockfile/env/code 변경이 섞여 있어 그대로 유지하거나 upstream에 올리면 이미 반영된 변경을 되돌릴 위험이 큽니다.

현재 큐는 upstream #30 → upstream #21 순서로 정리 중입니다. 이 PR의 아이디어가 여전히 필요하면 최신 upstream/main에서 단일 목적 브랜치로 깨끗하게 다시 추출하겠습니다. stale PR로 닫습니다.