🎨 Palette: 키보드 접근성을 위한 툴팁 포커스 기능 추가

.jules/palette.md

@@ -115,3 +115,6 @@
 ## $(date +%Y-%m-%d) - Prevent accidental data loss in inline editors
 **Learning:** Forms that take a long time to fill out (like a WBS editor) are prone to accidental closure by users pressing `Escape` or clicking cancel. This causes immediate data loss without any warning, resulting in frustration.
 **Action:** When working on editors that can be dismissed, track whether the user has modified any fields compared to their initial state. If there are changes, intercept the close action and present a confirmation dialog (`window.confirm`) to ensure they really want to discard their edits. Bypass this for intentional saves or explicit data overrides.
+## 2026-07-29 - 키보드 접근성을 위한 툴팁 포커스 기능 추가
+**Learning:** 툴팁(title 또는 aria-label) 정보를 제공하는 비대화형 요소(div, span 등)는 키보드 사용자가 접근할 수 없으므로 스크린 리더 및 키보드 탐색 사용자에게 정보가 누락됩니다.
+**Action:** 비대화형 요소에 툴팁을 추가할 때는 반드시 `tabindex="0"` 속성을 부여하고, `:focus-visible` 상태에서 시각적 포커스 인디케이터가 표시되도록 구현하여 키보드 접근성을 보장해야 합니다.

app.js

@@ -978,6 +978,7 @@ function createStatusCellContent(progressState) {
   if (progressState.description) {
     badge.title = progressState.description;
     badge.setAttribute('aria-label', `${progressState.label} - ${progressState.description}`);
+    badge.tabIndex = 0;
   }
   return badge;
 }

index.html

@@ -28,18 +28,18 @@ <h1>ScopeWeave Planner</h1>
             <span>기준일</span>
             <input data-testid="base-date-input" id="base-date" type="date" />
           </label>
-          <div class="meta-value-card" title="프로젝트의 작업 기간(일수) 합계입니다.">
+          <div class="meta-value-card" title="프로젝트의 작업 기간(일수) 합계입니다." tabindex="0">
             <span class="meta-label">전체일수</span>
             <strong data-testid="summary-total-days" id="summary-total-days">0일</strong>
           </div>
         </div>
 
         <div class="meta-grid meta-grid-secondary">
-          <div class="meta-value-card accent-card plan-card" title="기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다.">
+          <div class="meta-value-card accent-card plan-card" title="기간(일수) 가중치가 반영된 프로젝트 전체 계획 진척률입니다." tabindex="0">
             <span class="meta-label">계획진척률(누적)</span>
             <strong data-testid="summary-planned-progress" id="summary-planned-progress">0.00%</strong>
           </div>
-          <div class="meta-value-card accent-card actual-card" title="기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다.">
+          <div class="meta-value-card accent-card actual-card" title="기간(일수) 가중치가 반영된 프로젝트 전체 실적 진척률입니다." tabindex="0">
             <span class="meta-label">실적진척률(누적)</span>
             <strong data-testid="summary-actual-progress" id="summary-actual-progress">0.00%</strong>
           </div>

styles.css

@@ -360,7 +360,9 @@ button {
 .secondary-button:focus-visible,
 input:focus-visible,
 select:focus-visible,
-.gantt-bar:focus-visible {
+.gantt-bar:focus-visible,
+.meta-value-card:focus-visible,
+.status-badge:focus-visible {
   outline: 3px solid rgba(37, 99, 235, 0.5);
   outline-offset: 2px;
 }

verify.cjs

@@ -0,0 +1,14 @@
+const { chromium } = require('@playwright/test');
+(async () => {
+  const browser = await chromium.launch();
+  const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });
+  const page = await context.newPage();
+  await page.goto('http://localhost:8787');
+  await page.keyboard.press('Tab'); // skip link
+  await page.keyboard.press('Tab'); // project name
+  await page.keyboard.press('Tab'); // base date
+  await page.keyboard.press('Tab'); // overall days card
+  await page.screenshot({ path: 'verification.png' });
+  await context.close();
+  await browser.close();
+})();