🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선

[seonghobae]

💡 무엇을:
index.html의 통계 카드(.meta-value-card)와 app.js에서 생성되는 상태 배지(.status-badge) 요소 중 툴팁(title, aria-label)을 가지는 비상호작용 요소에 tabindex="0"과 role="note" 속성을 추가하고, 키보드 포커스 시 시각적으로 표시될 수 있도록 styles.css에 :focus-visible 스타일을 적용했습니다.

🎯 왜:
기존에는 마우스를 올릴 때만 툴팁을 확인할 수 있었으며, div나 span 같은 비상호작용 요소이기 때문에 키보드나 스크린 리더로는 툴팁 내용에 접근할 수 없는 접근성 문제가 있었습니다.

📸 변경 전/후:

• 전: 키보드(Tab 키)로 카드나 상태 배지에 포커스를 이동할 수 없었습니다.
• 후: 키보드로 툴팁을 가지는 카드 및 상태 배지에 포커스를 이동할 수 있으며, 포커스 시 브라우저 기본 포커스 링이 아닌 디자인 시스템에 맞는 파란색 아웃라인이 표시됩니다.

♿ 접근성:
키보드만 사용하는 사용자도 tabindex="0"을 통해 요소에 접근하여 툴팁 내용을 확인할 수 있게 되었습니다. 또한 단순 초점 이동뿐만 아니라 스크린 리더 사용자가 해당 요소의 목적을 알 수 있도록 role="note"를 추가하여 의미(Semantic)를 부여했습니다.

---

PR created automatically by Jules for task 17100746048120487989 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 12 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: 11736b80-f25c-43e4-b4ac-62498bf41925

📥 Commits

Reviewing files that changed from the base of the PR and between 2c32887 and 7d27ff2.

📒 Files selected for processing (4)

• .jules/palette.md
• app.js
• 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]

Exact semantic comparison against the current protected base and the existing accessibility owner lane shows this PR should not be carried forward.

• 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628 exact head 7d27ff23a3eac6548b904f91f2282f0efcc5c5a5 makes the three static summary cards keyboard focusable with tabindex="0" / role="note" while retaining native title help. That is the same buyer problem already owned by fix(a11y): make summary metric explanations persistent #509 exact head ea9027743ebafd1ca5774a5a14227585cf796052, but fix(a11y): make summary metric explanations persistent #509 fixes it at the root: persistent visible explanations for pointer, keyboard, touch, and assistive-technology users; no synthetic tab stops on static cards; removal of title; executable Playwright regressions that reject reintroduction of role/tabindex/title; and a browser-measured WCAG 2.2 normal-text contrast floor. Carrying 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628's card delta would therefore regress the stronger tested contract rather than add unique value.
• The remaining 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628-only production delta adds tabindex="0" and role="note" to generated .status-badge spans. Those badges already render their state label visibly (완료, 지연, 진행, 진행전), and this PR adds no tooltip/disclosure interaction, aria-describedby relationship, or realistic browser acceptance proving that inserting every explanatory static badge into sequential keyboard navigation improves an actual user action. role="note" does not by itself turn the native title attribute into a robust tooltip contract. This is therefore an unsupported semantic change, not unique proven buyer value that should be preserved from this branch.
• 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628 adds no regression test for either surface, has no qualifying independent approval, and its exact-head opencode-review is currently failing. A green subset of checks cannot override the semantic conflict above.

The summary-card accessibility work remains canonically owned by #509. The status-badge focus change is rejected rather than silently transferred because this branch does not establish a correct tested interaction contract for it. Closing #628 as superseded/rejected avoids a competing accessibility writer on the same static-card surface.

[google-labs-jules]

Exact semantic comparison against the current protected base and the existing accessibility owner lane shows this PR should not be carried forward.

• 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628 exact head 7d27ff23a3eac6548b904f91f2282f0efcc5c5a5 makes the three static summary cards keyboard focusable with tabindex="0" / role="note" while retaining native title help. That is the same buyer problem already owned by fix(a11y): make summary metric explanations persistent #509 exact head ea9027743ebafd1ca5774a5a14227585cf796052, but fix(a11y): make summary metric explanations persistent #509 fixes it at the root: persistent visible explanations for pointer, keyboard, touch, and assistive-technology users; no synthetic tab stops on static cards; removal of title; executable Playwright regressions that reject reintroduction of role/tabindex/title; and a browser-measured WCAG 2.2 normal-text contrast floor. Carrying 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628's card delta would therefore regress the stronger tested contract rather than add unique value.
• The remaining 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628-only production delta adds tabindex="0" and role="note" to generated .status-badge spans. Those badges already render their state label visibly (완료, 지연, 진행, 진행전), and this PR adds no tooltip/disclosure interaction, aria-describedby relationship, or realistic browser acceptance proving that inserting every explanatory static badge into sequential keyboard navigation improves an actual user action. role="note" does not by itself turn the native title attribute into a robust tooltip contract. This is therefore an unsupported semantic change, not unique proven buyer value that should be preserved from this branch.
• 🎨 Palette: 비상호작용 요소의 툴팁 키보드 접근성 개선 #628 adds no regression test for either surface, has no qualifying independent approval, and its exact-head opencode-review is currently failing. A green subset of checks cannot override the semantic conflict above.

The summary-card accessibility work remains canonically owned by #509. The status-badge focus change is rejected rather than silently transferred because this branch does not establish a correct tested interaction contract for it. Closing #628 as superseded/rejected avoids a competing accessibility writer on the same static-card surface.

Understood. Acknowledging that this work is superseded by a more comprehensive fix (#509) and the badge focus change is rejected. I am stopping work on this task.