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

.jules/palette.md

@@ -115,3 +115,7 @@
 ## $(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.
+
+## 2024-05-23 - Make tooltips accessible to keyboard users
+**Learning:** To make tooltips (e.g., `title` or `aria-label`) on non-interactive elements (like `div` or `span`) accessible to keyboard users, it's an accessibility anti-pattern to just add `tabindex="0"` without a role. Adding a semantic ARIA role (e.g., `role="note"` or `role="region"`) and ensuring a visible focus state (`:focus-visible`) makes the tooltip functionality fully accessible.
+**Action:** When adding tooltips to non-interactive elements, ensure they include `tabindex="0"`, a valid ARIA role (like `role="note"`), and styled focus indicators.

app.js

@@ -999,6 +999,8 @@ function createStatusCellContent(progressState) {
   if (progressState.description) {
     badge.title = progressState.description;
     badge.setAttribute('aria-label', `${progressState.label} - ${progressState.description}`);
+    badge.setAttribute('tabindex', '0');
+    badge.setAttribute('role', 'note');
   }
   return badge;
 }

index.html

@@ -29,18 +29,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" role="note">
             <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" role="note">
             <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" role="note">
             <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;
 }