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

[seonghobae]

💡 무엇을

• index.html의 .meta-value-card 요소들에 tabindex="0"과 role="note"를 추가했습니다.
• app.js에서 동적으로 생성되는 .status-badge 요소에 tabindex="0"과 role="note"를 추가했습니다.
• styles.css에 키보드 탐색 시 시각적 피드백을 제공하기 위해 .meta-value-card:focus-visible 및 .status-badge:focus-visible 스타일을 추가했습니다.
• .jules/palette.md에 비상호작용 요소의 툴팁 접근성에 대한 배움을 기록했습니다.

🎯 왜

기존에는 div나 span 같은 비상호작용 요소에 title 속성(툴팁)과 aria-label이 제공되어 있었으나, 해당 요소들이 포커스를 받을 수 없어 키보드 및 스크린 리더 사용자가 정보에 접근할 수 없었습니다.

📸 변경 전/후

• 변경 전: 마우스를 올려야만 전체일수, 계획진척률, 실적진척률 설명이나 배지의 설명을 볼 수 있었으며, 키보드로는 접근할 수 없었습니다.
• 변경 후: Tab 키를 사용하여 .meta-value-card와 .status-badge에 포커스를 이동할 수 있으며, 포커스 시 브라우저 기본 툴팁이 나타나고 스크린 리더가 내용을 읽어줍니다. 명확한 파란색 외곽선(.focus-visible) 피드백이 제공됩니다.

♿ 접근성

툴팁을 제공하는 비상호작용 요소에 시맨틱 롤(role="note")과 키보드 포커스(tabindex="0")를 결합하고, 명확한 포커스 표시(:focus-visible)를 제공하여 WCAG 키보드 접근성 가이드라인을 준수하도록 개선했습니다. 마우스 사용자에게는 시각적 방해가 없도록 :focus-visible만을 사용했습니다.

---

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

@seonghobae, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 57 minutes

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.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 13bbbc5e-2e16-4e54-9597-8ddd5111c74b

📥 Commits

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

📒 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 found 1 potential issue.

[devin-ai-integration]

📝 Info: Status badges add a focus stop per row

Each .status-badge with a description now gets tabIndex = 0 (app.js), adding one keyboard tab stop per table row. In dense tables this lengthens keyboard traversal noticeably. It matches the documented palette.md convention, so it appears intentional.

---

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

[seonghobae]

Closing this lane because its useful intent is already owned by a stronger accessibility slice, while its remaining unique change adds an avoidable keyboard-navigation regression.

Fresh exact state is unchanged at 7f98723c3a5e68e455598f80f7372510f112fc19 against protected develop@2c328875e00e86537df3e965170be80532571cad.

For the three summary metric cards, existing PR #509 at exact head ea9027743ebafd1ca5774a5a14227585cf796052 already owns this buyer-visible problem with the opposite, better-tested contract: persistent visible explanatory copy for pointer, touch, sighted-keyboard and assistive-technology users; no native title dependency; and no synthetic role/tabindex on static cards. Its browser regression explicitly rejects reintroduction of role, tabindex, or title, and checks normal-text contrast. The metric-card portion here therefore directly conflicts with, rather than extends, the canonical repair.

The remaining status-badge delta is not valuable enough to transplant as written. It adds one tabIndex=0 focus stop for every described status badge; the current Devin thread independently identifies the resulting per-row traversal cost. More importantly, making static badges focusable solely to expose a native title is not the WAI-ARIA tooltip pattern: an actual tooltip has a trigger-to-description relationship (aria-describedby) and a separate role=tooltip popup, while persistent explanatory text is preferable when the information is important enough to be continuously available. This PR supplies neither a browser acceptance contract for keyboard-visible badge help nor evidence that dense-table focus order remains usable.

If status descriptions later prove insufficient in browse mode, repair that as a focused tested interaction using persistent visible description or a proper tooltip/description contract rather than adding a tab stop to every static status indicator. No source from this branch should be merged into #509 or protected develop in its current form.

[google-labs-jules]

Closing this lane because its useful intent is already owned by a stronger accessibility slice, while its remaining unique change adds an avoidable keyboard-navigation regression.

Fresh exact state is unchanged at 7f98723c3a5e68e455598f80f7372510f112fc19 against protected develop@2c328875e00e86537df3e965170be80532571cad.

For the three summary metric cards, existing PR #509 at exact head ea9027743ebafd1ca5774a5a14227585cf796052 already owns this buyer-visible problem with the opposite, better-tested contract: persistent visible explanatory copy for pointer, touch, sighted-keyboard and assistive-technology users; no native title dependency; and no synthetic role/tabindex on static cards. Its browser regression explicitly rejects reintroduction of role, tabindex, or title, and checks normal-text contrast. The metric-card portion here therefore directly conflicts with, rather than extends, the canonical repair.

The remaining status-badge delta is not valuable enough to transplant as written. It adds one tabIndex=0 focus stop for every described status badge; the current Devin thread independently identifies the resulting per-row traversal cost. More importantly, making static badges focusable solely to expose a native title is not the WAI-ARIA tooltip pattern: an actual tooltip has a trigger-to-description relationship (aria-describedby) and a separate role=tooltip popup, while persistent explanatory text is preferable when the information is important enough to be continuously available. This PR supplies neither a browser acceptance contract for keyboard-visible badge help nor evidence that dense-table focus order remains usable.

If status descriptions later prove insufficient in browse mode, repair that as a focused tested interaction using persistent visible description or a proper tooltip/description contract rather than adding a tab stop to every static status indicator. No source from this branch should be merged into #509 or protected develop in its current form.

Understood. Acknowledging that this work is now obsolete and conflicts with existing accessibility improvements in PR #509, and stopping work on this task.