🎨 Palette: 요소 포커스 및 툴팁 접근성 개선

[seonghobae]

💡 무엇을

• index.html 내 meta-value-card 요소들에 tabindex="0"을 추가했습니다.
• app.js 내 상태 배지(status-badge) 요소들에 badge.tabIndex = 0을 추가했습니다.
• app.js 내 폼 저장 버튼에 disabled 대신 aria-disabled="true"를 사용하도록 변경하고, 폼 제출 이벤트 핸들러에서 이를 차단하도록 보완했습니다.
• styles.css에 새로 포커스가 가능해진 요소들에 대한 :focus-visible 아웃라인 스타일을 추가했습니다.

🎯 왜

시각적으로 툴팁(title 및 aria-label)이 적용되어 있지만, 마우스 호버 이벤트로만 접근할 수 있는 요소(카드, 배지)들은 키보드 내비게이션 사용자나 스크린 리더 사용자에게 컨텍스트를 제공하지 못했습니다. 또한 폼에 오류가 있을 때 disabled 상태인 제출 버튼은 탭 순서(tab order)에서 완전히 제외되어, 키보드 사용자는 폼 오류 피드백 툴팁에 접근할 수 없었습니다.

📸 변경 전/후

변경 전:

• 헤더 통계 카드나 작업 목록의 상태 배지에 키보드 포커스가 이동하지 않음.
• 유효하지 않은 입력 폼에서 저장 버튼에 포커스 불가.
  변경 후:
• 탭 키로 통계 카드와 배지로 이동 가능하며 스크린 리더를 통해 정보 확인 가능.
• 유효성 오류 시 저장 버튼이 포커스 가능 상태로 유지되어 "입력값을 올바르게 수정해야 저장할 수 있습니다." 메시지 전달.

♿ 접근성

• 모든 커스텀 툴팁이 키보드 포커스 가능 요소에 바인딩되어 완벽한 웹 접근성 준수.
• 에러 상태 버튼이 포커스를 잃지 않도록 aria-disabled 패턴 적용하여 명확한 오류 피드백 보장.

---

PR created automatically by Jules for task 14949044653383618278 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: 11 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3e7178ca-20f8-4d5a-9905-33ded34d1626

📥 Commits

Reviewing files that changed from the base of the PR and between a756b7e and ad8b439.

⛔ Files ignored due to path filters (2)

• verification.png is excluded by !**/*.png
• videos/page@e180f2b985df490d3dca93fe237acc12.webm is excluded by !**/*.webm

📒 Files selected for processing (5)

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-ux-improvements-14949044653383618278

---

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

[opencode-agent]

Pull request overview

OpenCode cannot approve yet because required coverage evidence did not pass.

Review outcome

1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence

• Problem: The required coverage-evidence job result was failure, so OpenCode cannot establish approval sufficiency for this head.

• Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.

• Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports success with required evidence or explicit no-source not-applicable evidence.

• Regression test: Keep the approval branch checking needs.coverage-evidence.result == success before posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present.

• Result: REQUEST_CHANGES

• Reason: coverage-evidence result was failure, so required test/docstring evidence was not proven for current head ad8b439752ecef875be2a0e412e379bbdab1d3a7.

• Head SHA: ad8b439752ecef875be2a0e412e379bbdab1d3a7

• Workflow run: 30408940642

• Workflow attempt: 1

Coverage evidence

Coverage evidence job did not run or did not publish coverage evidence.

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (7 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (7 files)"]
  R1 --> V1["required checks"]

Loading

[opencode-agent]

OpenCode Review Overview

• Head SHA: ad8b439752ecef875be2a0e412e379bbdab1d3a7
• Workflow run: 30408940642
• Workflow attempt: 1
• Gate result: REQUEST_CHANGES (approval step)

Pull request overview

OpenCode cannot approve yet because required coverage evidence did not pass.

Review outcome

1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence

• Problem: The required coverage-evidence job result was failure, so OpenCode cannot establish approval sufficiency for this head.

• Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.

• Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports success with required evidence or explicit no-source not-applicable evidence.

• Regression test: Keep the approval branch checking needs.coverage-evidence.result == success before posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present.

• Result: REQUEST_CHANGES

• Reason: coverage-evidence result was failure, so required test/docstring evidence was not proven for current head ad8b439752ecef875be2a0e412e379bbdab1d3a7.

• Head SHA: ad8b439752ecef875be2a0e412e379bbdab1d3a7

• Workflow run: 30408940642

• Workflow attempt: 1

Coverage evidence

Coverage evidence job did not run or did not publish coverage evidence.

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (7 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (7 files)"]
  R1 --> V1["required checks"]

Loading

[seonghobae]

Closing as obsolete duplicate in the PR queue cleanup. Keep latest candidates: #386 (security hono+CSV), #385 (focus restore), #384 (padStart), #381/#380 (analytics), #367 (playwright). Prefer landing one green PR per theme over stacked Jules/agent clones.

[google-labs-jules]

Closing as obsolete duplicate in the PR queue cleanup. Keep latest candidates: #386 (security hono+CSV), #385 (focus restore), #384 (padStart), #381/#380 (analytics), #367 (playwright). Prefer landing one green PR per theme over stacked Jules/agent clones.

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