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

[seonghobae]

💡 무엇을

• 상단 요약 지표 카드(.meta-value-card)에 tabindex="0"과 role="note"를 추가했습니다.
• 키보드로 이동 시 포커스를 시각적으로 확인할 수 있도록 styles.css에 .meta-value-card:focus-visible 셀렉터를 추가했습니다.

🎯 왜

기존 요약 지표 카드는 title 속성을 통해 상세 정보를 툴팁으로 제공하고 있었으나, 마우스 오버에만 반응하고 키보드 포커스를 받을 수 없었습니다. 이로 인해 키보드만 사용하는 사용자 및 스크린 리더 사용자는 툴팁 내용에 접근할 수 없는 접근성 문제가 있어 이를 개선했습니다.

📸 변경 전/후

• 변경 전: 요약 지표 카드를 Tab 키로 이동할 수 없었고 툴팁 내용 접근이 불가능했습니다.
• 변경 후: Tab 키로 요약 지표 카드에 초점을 맞출 수 있으며, 포커스 링이 표시되고 스크린 리더가 카드의 제목(title 속성)을 읽을 수 있습니다.

♿ 접근성

• tabindex="0"을 통해 키보드 순차 탐색 기능 지원
• role="note"를 부여하여 스크린 리더 등 보조 기기가 해당 요소의 정보성 맥락을 명확히 인지
• 기존 시스템의 :focus-visible 스타일 일관성을 유지하여 시각 장애 및 저시력 사용자의 초점 인지 개선

---

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

Warning

Review limit reached

Next included review available in 41 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: a827b2c4-0de1-42e5-9b37-abb30371fc04

📥 Commits

Reviewing files that changed from the base of the PR and between 2c32887 and 223879d.

📒 Files selected for processing (3)

• .jules/palette.md
• index.html
• styles.css

---

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]

✅ Devin Review: No Issues Found

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

[seonghobae]

Closing as superseded by the stronger existing accessibility lane #509 after exact-head semantic comparison.

Current #599 head 223879d228bf387a22b6901e30008c59ff656561 is a one-commit delta from protected develop@2c328875e00e86537df3e965170be80532571cad that keeps the three native title tooltips and makes each otherwise-static .meta-value-card a role="note" / tabindex="0" tab stop, plus a focus outline. That improves one pointer-only failure mode, but it preserves the underlying discoverability dependency on user-agent title behavior and adds three non-actionable keyboard stops.

#509 already owns this exact buyer-visible problem on current head ea9027743ebafd1ca5774a5a14227585cf796052 and implements the materially stronger contract: persistent visible .meta-description copy for all three metrics, no title fallback, no synthetic role/tabindex on static cards, browser acceptance that rejects reintroduction of those attributes, and executable >=4.5:1 contrast coverage across the accent-card gradients. It also carries the standards/traceability record for the decision.

The #599 learning text is therefore contrary to the canonical active accessibility contract in #509, and merging both would create a direct semantic conflict in index.html/styles.css while regressing the deliberate keyboard-navigation design. Preserve #509 as the single implementation/evidence vehicle; #599 has no unique product behavior worth carrying forward. Its currently queued checks are not needed to establish this duplication decision.

[google-labs-jules]

Closing as superseded by the stronger existing accessibility lane #509 after exact-head semantic comparison.

Current #599 head 223879d228bf387a22b6901e30008c59ff656561 is a one-commit delta from protected develop@2c328875e00e86537df3e965170be80532571cad that keeps the three native title tooltips and makes each otherwise-static .meta-value-card a role="note" / tabindex="0" tab stop, plus a focus outline. That improves one pointer-only failure mode, but it preserves the underlying discoverability dependency on user-agent title behavior and adds three non-actionable keyboard stops.

#509 already owns this exact buyer-visible problem on current head ea9027743ebafd1ca5774a5a14227585cf796052 and implements the materially stronger contract: persistent visible .meta-description copy for all three metrics, no title fallback, no synthetic role/tabindex on static cards, browser acceptance that rejects reintroduction of those attributes, and executable >=4.5:1 contrast coverage across the accent-card gradients. It also carries the standards/traceability record for the decision.

The #599 learning text is therefore contrary to the canonical active accessibility contract in #509, and merging both would create a direct semantic conflict in index.html/styles.css while regressing the deliberate keyboard-navigation design. Preserve #509 as the single implementation/evidence vehicle; #599 has no unique product behavior worth carrying forward. Its currently queued checks are not needed to establish this duplication decision.

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