From c854ddd5bc61ca4f5b82fe73dec775ab18dac90f Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:47:46 +0000
Subject: [PATCH 1/4] feat: add focus accessibility to tooltips on
 non-interactive elements

Added `tabindex="0"` and `role="region"` to the summary cards and status badges that have `title` tooltips, and enabled their `:focus-visible` styles in CSS so they can be discovered by keyboard-only users.
---
 .jules/palette.md | 4 ++++
 app.js            | 2 ++
 index.html        | 6 +++---
 styles.css        | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 0bbf5248..df8abfe7 100644
--- a/.jules/palette.md
+++ b/.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.
+
+## 2026-08-07 - Non-interactive element tooltips
+**Learning:** Adding a `title` to a non-interactive element like a `div` or `span` is not enough for keyboard accessibility.
+**Action:** Always add `tabindex="0"` and a valid ARIA role (e.g., `role="region"`) to non-interactive elements with tooltips, and ensure they have a visible `:focus-visible` style.
diff --git a/app.js b/app.js
index a04aae71..84a5869c 100644
--- a/app.js
+++ b/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', 'region');
   }
   return badge;
 }
diff --git a/index.html b/index.html
index a7f4b49c..b76e3dde 100644
--- a/index.html
+++ b/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" role="region">
             <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="region">
             <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="region">
             <span class="meta-label">실적진척률(누적)</span>
             <strong data-testid="summary-actual-progress" id="summary-actual-progress">0.00%</strong>
           </div>
diff --git a/styles.css b/styles.css
index 9d715f00..ff662db3 100644
--- a/styles.css
+++ b/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;
 }

From 9ccbc45f5f61d044e70d0d6fc0b604d1b7a3a176 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:53:38 +0000
Subject: [PATCH 2/4] feat: add focus accessibility to tooltips on
 non-interactive elements

Added `tabindex="0"` and `role="region"` to the summary cards and status badges that have `title` tooltips, and enabled their `:focus-visible` styles in CSS so they can be discovered by keyboard-only users.

From 6a203387c912429ecaeaf837a4cd20cb4a550800 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 7 Aug 2026 14:00:13 +0000
Subject: [PATCH 3/4] feat: add focus accessibility to tooltips on
 non-interactive elements

Added `tabindex="0"` and `role="region"` to the summary cards and status badges that have `title` tooltips, and enabled their `:focus-visible` styles in CSS so they can be discovered by keyboard-only users.

From 3b40a66ae498c184ab5f82933c279c1e1e41e0a1 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 7 Aug 2026 14:06:50 +0000
Subject: [PATCH 4/4] feat: add focus accessibility to tooltips on
 non-interactive elements

Added `tabindex="0"` and `role="region"` to the summary cards and status badges that have `title` tooltips, and enabled their `:focus-visible` styles in CSS so they can be discovered by keyboard-only users.