🎨 Palette: 키보드 접근성을 위한 툴팁 포커스 개선

[seonghobae]

💡 무엇을

• index.html의 툴팁이 있는 요약 카드 .meta-value-card 3개에 tabindex="0"과 role="region" 속성을 추가했습니다.
• app.js에서 툴팁이 추가되는 상태 배지 .status-badge에 tabindex="0"과 role="region" 속성을 동적으로 부여하도록 수정했습니다.
• styles.css에 .meta-value-card:focus-visible 및 .status-badge:focus-visible 선택자를 추가하여 키보드 초점 시 파란색 링이 표시되도록 했습니다.

🎯 왜

키보드로 탐색하는 사용자는 기존에 div나 span 같은 비대화형 요소에 포커스를 이동할 수 없었습니다. 이로 인해 마우스 마버(hover) 시 나타나는 title 툴팁을 확인할 방법이 없었습니다. tabindex="0"을 추가하여 초점을 받을 수 있게 하고, 올바른 시각적 피드백(:focus-visible)을 제공하여 키보드 사용자도 툴팁 정보를 읽을 수 있도록 접근성을 개선했습니다. role="region"을 통해 스크린 리더에도 의미 있는 영역임을 알립니다.

📸 변경 전/후

• 변경 전: 사용자가 Tab 키를 눌렀을 때 요약 카드나 상태 배지를 건너뛰어 시각적/오디오 피드백을 받을 수 없었습니다.
• 변경 후: 사용자가 Tab 키로 이동 시 요약 카드와 상태 배지에 파란색 포커스 링이 표시되며 브라우저 기본 툴팁이 활성화됩니다.

♿ 접근성

순수 시각 장애뿐만 아니라, 마우스 사용이 불편한 키보드 전용 사용자(운동 장애, 일시적 부상 등)가 애플리케이션의 핵심 정보(요약 지표, 상태 상세 설명)에 온전히 접근할 수 있게 되었습니다.

---

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

📝 Walkthrough

Walkthrough

요약 카드와 상태 배지를 키보드 포커스 대상으로 변경했습니다. region 역할과 title 설명을 추가했습니다. 관련 요소에 :focus-visible 스타일을 적용했습니다. 접근성 지침도 문서화했습니다.

Changes

접근성 포커스 지원

Layer / File(s)	Summary
접근성 의미와 포커스 대상 정의 \.jules/palette.md, index.html, app.js	비인터랙티브 요소의 키보드 접근성 지침을 추가했습니다. 요약 카드와 상태 배지에 tabindex="0"과 role="region"을 추가했습니다. 카드에는 설명용 title을 추가했습니다.
포커스 표시 스타일 확장 styles.css	.meta-value-card와 .status-badge에 기존 :focus-visible 포커스 표시 규칙을 적용했습니다. .gantt-bar 규칙은 유지했습니다.

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

🚥 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.
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 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-tooltip-focus-8713624957852357154

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.jules/palette.md:
- Around line 119-121: Replace the generic role="region" guidance in
.jules/palette.md lines 119-121 with instructions to choose a
context-appropriate non-landmark role or omit the role. In index.html lines
31-42, remove region from summary cards or use an appropriate role such as
group; in app.js lines 1002-1003, stop assigning region to every status badge
and use the role matching each badge’s meaning.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 431fc7fd-1a74-470c-a320-3f86eb5cc203

📥 Commits

Reviewing files that changed from the base of the PR and between 74a5e99 and 6a20338.

📒 Files selected for processing (4)

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

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

role="region"을 툴팁 요소의 기본 역할로 사용하지 마세요.

region은 랜드마크 역할입니다. 요약 카드와 각 작업 행의 상태 배지를 모두 region으로 만들면 랜드마크 목록이 불필요하게 커집니다. 키보드 포커스에는 role="region"이 필요하지 않습니다. 각 요소의 실제 의미에 맞는 비-랜드마크 역할을 선택하거나 역할을 제거하세요.

• .jules/palette.md#L119-L121: role="region"을 일반 예시로 문서화하지 말고, 의미에 맞는 역할 선택을 요구하세요.
• index.html#L31-L42: 요약 카드에서 region을 제거하거나 group 등 적절한 비-랜드마크 의미를 사용하세요.
• app.js#L1002-L1003: 상태 배지마다 region을 생성하지 말고, 상태 배지의 의미에 맞는 역할을 사용하세요.

📍 Affects 3 files

• .jules/palette.md#L119-L121 (this comment)
• index.html#L31-L42
• app.js#L1002-L1003

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.jules/palette.md around lines 119 - 121, Replace the generic role="region"
guidance in .jules/palette.md lines 119-121 with instructions to choose a
context-appropriate non-landmark role or omit the role. In index.html lines
31-42, remove region from summary cards or use an appropriate role such as
group; in app.js lines 1002-1003, stop assigning region to every status badge
and use the role matching each badge’s meaning.

[seonghobae]

Closing as a duplicate of #445 and to avoid incorrect landmark semantics. The live diff is the same focusability/focus-ring change, but adds role="region" to every summary card and described status badge. WAI-ARIA regions are structural landmarks that need meaningful naming; using them as generic tooltip semantics can create landmark noise. Keep the narrower #445 branch for any follow-up, and if a real custom tooltip is needed use a described tooltip relationship rather than manufacturing regions.

[google-labs-jules]

Closing as a duplicate of #445 and to avoid incorrect landmark semantics. The live diff is the same focusability/focus-ring change, but adds role="region" to every summary card and described status badge. WAI-ARIA regions are structural landmarks that need meaningful naming; using them as generic tooltip semantics can create landmark noise. Keep the narrower #445 branch for any follow-up, and if a real custom tooltip is needed use a described tooltip relationship rather than manufacturing regions.

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