🎨 Palette: Improve accessibility of Overview Stats help toggle

[seonghobae]

💡 What

Added semantic ARIA attributes and focus styling to the help toggle button in the OverviewStats component.

🎯 Why

Screen reader users previously received no indication of the button's toggle state (expanded vs collapsed) or the fact that it controls the help text section below it. Furthermore, redundant visual characters like the "▸" arrow and the explicit text "— click to expand" were adding noise to screen reader announcements. Proper focus rings were also missing for keyboard users.

📸 Before/After

• Added aria-expanded={expanded}.
• Added aria-controls linked to a unique ID useId().
• Added aria-hidden="true" to visual hints.
• Added focus-visible:ring-2 class logic for keyboard outlines.

♿ Accessibility

This brings the simple disclosure interaction up to WCAG compliance and provides a much cleaner experience for those utilizing assistive technologies.

---

PR created automatically by Jules for task 9235034310723989918 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]

📝 Walkthrough

개요

OverviewStats 컴포넌트의 도움말 토글 버튼에 React useId 훅을 활용한 안정적인 ID 생성, aria-expanded 및 aria-controls 속성, 그리고 aria-hidden 마킹을 추가하여 접근성을 개선합니다.

변경 사항

도움말 토글 접근성

계층 / 파일	요약
도움말 ID 및 접근성 구현 packages/web/src/components/dashboard/overview-stats.tsx	React useId를 임포트하고, useId() 훅으로 안정적인 helpId를 생성합니다. 토글 버튼에 aria-expanded와 aria-controls 속성을 추가하고, 확장 패널에 id={helpId}를 할당하며, 장식용 chevron과 텍스트 요소에 aria-hidden을 적용합니다.

🎯 2 (Simple) | ⏱️ ~10 분

🐰 버튼과 패널이 손을 맞잡고,
ARIA 속성으로 춤을 추네요!
스크린 리더도 함께 노래 부르고,
접근성 왕국에 축배를!
useId로 든든히 안전하게~ 🎉

---

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
Title check	✅ Passed	제목은 주요 변경 사항(Overview Stats 헬프 토글의 접근성 개선)을 명확하게 요약하며, 이모지를 제외한 텍스트는 구체적이고 이해하기 쉽다.
Description check	✅ Passed	설명은 변경 사항의 목적(접근성 개선), 구체적인 수정 사항(aria 속성 추가, 포커스 스타일링), 그리고 WCAG 준수와의 연관성을 포함하여 변경 사항과 관련성이 높다.
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.

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

✨ Simplify code

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

---

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

[seonghobae]

최신 upstream/main 기준으로 이 PR은 80개 파일의 stale diff를 포함합니다. 특히 .claude agent/skill 파일 삭제와 오래된 워크플로우/lockfile/env 변경이 섞여 있어 그대로 유지하거나 upstream에 올리면 이미 반영된 변경을 되돌릴 위험이 큽니다.

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

[google-labs-jules]

최신 upstream/main 기준으로 이 PR은 80개 파일의 stale diff를 포함합니다. 특히 .claude agent/skill 파일 삭제와 오래된 워크플로우/lockfile/env 변경이 섞여 있어 그대로 유지하거나 upstream에 올리면 이미 반영된 변경을 되돌릴 위험이 큽니다.

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

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