🎨 Palette: 요약 카드 툴팁 키보드 접근성 개선

[seonghobae]

💡 무엇을

• index.html의 .meta-value-card (전체일수, 계획진척률, 실적진척률) 요소에 tabindex="0"과 role="note" 속성을 추가했습니다.
• styles.css에 .meta-value-card:focus-visible 선택자를 추가하여 키보드 포커스 시 브라우저 기본 포커스 링이 보이도록 기존 버튼들과 동일한 스타일을 적용했습니다.

🎯 왜

• 프로젝트 상태를 나타내는 요약 카드에는 각각의 의미를 설명하는 중요한 title 툴팁 정보가 포함되어 있습니다.
• 하지만 <div>와 같은 비대화형 요소에만 툴팁이 정의되어 있어 스크린 리더 및 키보드(Tab) 내비게이션 사용자는 이 추가 설명을 인지하거나 접근할 수 없는 접근성 문제가 있었습니다.

📸 변경 전/후

• 변경 전: 요약 카드가 키보드 탭(Tab) 흐름에 포함되지 않으며, 시각적으로도 포커스 상태를 알 수 없음.
• 변경 후: 탭 키를 눌렀을 때 요약 카드가 포커스를 받을 수 있으며, 파란색 테두리(outline)가 표시되어 툴팁 정보를 키보드로도 확인할 수 있음.

♿ 접근성

• tabindex="0": 비대화형 요소를 키보드 내비게이션 순서에 포함시켰습니다.
• role="note": 스크린 리더가 단순한 컨테이너(div)가 아니라 부가적인 정보나 메모를 담고 있는 의미 있는 요소로 해석하도록 시맨틱 역할을 부여했습니다.
• :focus-visible: 마우스 사용자의 경험은 그대로 유지하면서 키보드 사용자에게만 포커스 상태를 명확하게 시각적으로 전달합니다.

---

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

---

Summary by CodeRabbit

• 접근성 개선

  • 요약 정보 카드(전체일수, 계획 진척률, 실적 진척률)를 키보드로 탐색할 수 있도록 개선했습니다.
  • 카드의 의미가 스크린 리더에 더 명확하게 전달되도록 보조 기술용 역할을 추가했습니다.
  • 키보드로 포커스된 카드가 시각적으로 구분되도록 포커스 표시 스타일을 적용했습니다.
  • 기존 마우스 오버 툴팁은 그대로 유지됩니다.

• 문서

  • 비대화형 요소의 툴팁 접근성 개선 방법에 대한 학습 노트를 추가했습니다.

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

Warning

Review limit reached

Next included review available in 45 minutes.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a7227373-c208-4485-afc0-207e0c00cf7d

📥 Commits

Reviewing files that changed from the base of the PR and between d248138 and 09c8b02.

📒 Files selected for processing (3)

• index.html
• summary-card-accessibility.css
• tests/e2e/toast-accessibility.spec.js

📝 Walkthrough

Walkthrough

세 요약 카드가 키보드로 포커스될 수 있고 노트로 전달되도록 HTML과 CSS를 수정했습니다. 관련 접근성 학습 노트도 추가했습니다.

Changes

요약 카드 접근성

Layer / File(s)	Summary
요약 카드 접근성 적용 index.html, styles.css, .jules/palette.md	세 요약 카드에 tabindex="0"과 role="note"를 추가했습니다. 기존 title 툴팁은 유지했습니다. .meta-value-card에 :focus-visible 아웃라인을 적용했습니다. 관련 접근성 학습 노트를 추가했습니다.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: 🔵 Low · up to d2481

The summary cards now receive keyboard focus, but their explanatory content still relies only on title tooltips, which may not be consistently available to screen-reader or keyboard users. The change is mergeable with explicit follow-up to provide accessible descriptions and verify the focused-card behavior.

Suggested reviewers: cursoragent

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 요약 카드 툴팁의 키보드 접근성 개선이라는 주요 변경 사항을 정확하고 간결하게 설명합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
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.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (3 skipped: 3 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-summary-card-a11y-9750894586752617750

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[devin-ai-integration]

Note

This report is out of date. Scroll down for Devin Review's latest report on this PR.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[devin-ai-integration]

Devin Review found 1 new potential issue.

[devin-ai-integration]

🔍 Description may be announced twice by screen readers

Each card carries role="note" and contains the .meta-card-description span as a child while also pointing to it through aria-describedby. On focus a screen reader can announce that text both as note content and as the description. The span is visibility: hidden by default, which limits the effect, but this is worth checking with an actual screen reader.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[seonghobae]

Closing as superseded by #509 after fresh exact-head comparison against protected develop@2c328875e00e86537df3e965170be80532571cad.

#617 current head 09c8b029b90486ce9acc3cb690356d87a97de86b solves the same three summary-card explanation surface by making otherwise static cards synthetic keyboard stops (tabindex="0", role="note") and showing hidden aria-describedby text on focus/hover. The current review state still has an unresolved exact-head Devin concern that the child description can be announced twice because it is both note content and the ARIA description.

#509 current head ea9027743ebafd1ca5774a5a14227585cf796052 already owns this buyer-visible accessibility repair with the stronger non-interactive contract: the same explanations are persistent visible DOM text for pointer, touch, keyboard, and assistive-technology users; static cards remain out of the tab order with no synthetic role/tabindex/title; its browser regressions reject reintroduction of those attributes; and it adds executable normal-text contrast coverage across the accent gradients plus the current W3C/WAI traceability record.

No unique product behavior in #617 needs preservation beyond #509. Keeping both open would create competing accessibility contracts on the same index.html/styles.css surface and risks reintroducing the synthetic-tab-stop design that #509 explicitly tests against.