From 7f98723c3a5e68e455598f80f7372510f112fc19 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 22 Aug 2026 14:01:05 +0000
Subject: [PATCH] feat: add tabindex and role to tooltip cards for
accessibility
---
.jules/palette.md | 3 +++
app.js | 2 ++
index.html | 6 +++---
styles.css | 4 +++-
4 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/.jules/palette.md b/.jules/palette.md
index 0bbf5248..d8b35a97 100644
--- a/.jules/palette.md
+++ b/.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-08-22 - 비상호작용 요소 툴팁 접근성
+**Learning:** div나 span 같은 비상호작용 요소에 title 속성만 제공하면 키보드나 스크린 리더 사용자가 툴팁 정보에 접근할 수 없습니다. 이 때 단순히 tabindex="0"만 추가하는 것은 접근성 안티패턴입니다.
+**Action:** 툴팁을 제공하는 비상호작용 요소에는 반드시 tabindex="0"과 적절한 ARIA role(예: role="note")을 함께 부여하고, 키보드 탐색을 위한 :focus-visible 스타일을 추가해야 합니다.
diff --git a/app.js b/app.js
index a04aae71..6965eb97 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.tabIndex = 0;
+ badge.setAttribute('role', 'note');
}
return badge;
}
diff --git a/index.html b/index.html
index d24b2a88..cd622bfd 100644
--- a/index.html
+++ b/index.html
@@ -29,18 +29,18 @@