From 85d418de376de8cc3ce726a6f19439d32501a5fe Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 12 Aug 2026 14:25:03 +0000
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EC=9A=94=EC=86=8C?=
=?UTF-8?q?=EC=9D=98=20=ED=88=B4=ED=8C=81=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
=?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
비상호작용 요소인 `div`(`.meta-value-card`)에 마우스 호버 시에만 보이는 툴팁(`title` 속성)이 제공되고 있어 스크린 리더와 키보드 사용자는 해당 정보를 인지할 수 없었습니다.
이에 `tabindex="0"`과 `role="note"`를 추가하여 포커스를 받을 수 있게 하고 스크린 리더가 올바르게 맥락을 읽을 수 있도록 하였으며, `.meta-value-card:focus-visible`를 추가하여 키보드 탐색 시 시각적인 포커스 인디케이터를 제공하도록 개선했습니다.
---
.jules/palette.md | 3 +++
index.html | 6 +++---
styles.css | 3 ++-
3 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/.jules/palette.md b/.jules/palette.md
index 0bbf5248..b7d77ffd 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-12 - 비상호작용 요소의 툴팁 접근성 개선
+**Learning:** div나 span 같은 비상호작용 요소에 title 속성을 추가하여 툴팁을 제공할 때, 키보드 사용자는 접근할 수 없는 문제가 발생할 수 있음을 확인했습니다.
+**Action:** 비상호작용 요소에 툴팁을 제공할 때는 항상 tabindex="0"을 추가하고, 적절한 ARIA role(예: role="note")을 부여하며, :focus-visible 스타일을 정의하여 스크린 리더와 키보드 사용자 모두 접근할 수 있도록 해야 합니다.
diff --git a/index.html b/index.html
index a7f4b49c..c5627a8b 100644
--- a/index.html
+++ b/index.html
@@ -28,18 +28,18 @@
ScopeWeave Planner
기준일
-
+
전체일수0일
-
+
계획진척률(누적)0.00%
-
+
실적진척률(누적)0.00%
diff --git a/styles.css b/styles.css
index 9d715f00..6d5300ca 100644
--- a/styles.css
+++ b/styles.css
@@ -360,7 +360,8 @@ button {
.secondary-button:focus-visible,
input:focus-visible,
select:focus-visible,
-.gantt-bar:focus-visible {
+.gantt-bar:focus-visible,
+.meta-value-card:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.5);
outline-offset: 2px;
}
From d56a12d41fda68bef7cf5f82d3cc039d4fbeba06 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 12 Aug 2026 14:51:18 +0000
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EC=9A=94=EC=86=8C?=
=?UTF-8?q?=EC=9D=98=20=ED=88=B4=ED=8C=81=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
=?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
비상호작용 요소인 `div`(`.meta-value-card`)에 마우스 호버 시에만 보이는 툴팁(`title` 속성)이 제공되고 있어 스크린 리더와 키보드 사용자는 해당 정보를 인지할 수 없었습니다.
이에 `tabindex="0"`과 `role="note"`를 추가하여 포커스를 받을 수 있게 하고 스크린 리더가 올바르게 맥락을 읽을 수 있도록 하였으며, `.meta-value-card:focus-visible`를 추가하여 키보드 탐색 시 시각적인 포커스 인디케이터를 제공하도록 개선했습니다.
From 8d4cb207c491d00ee4111ce4612d4e3927d909ce Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 12 Aug 2026 15:14:37 +0000
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EC=9A=94=EC=86=8C?=
=?UTF-8?q?=EC=9D=98=20=ED=88=B4=ED=8C=81=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
=?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
비상호작용 요소인 `div`(`.meta-value-card`)에 마우스 호버 시에만 보이는 툴팁(`title` 속성)이 제공되고 있어 스크린 리더와 키보드 사용자는 해당 정보를 인지할 수 없었습니다.
이에 `tabindex="0"`과 `role="note"`를 추가하여 포커스를 받을 수 있게 하고 스크린 리더가 올바르게 맥락을 읽을 수 있도록 하였으며, `.meta-value-card:focus-visible`를 추가하여 키보드 탐색 시 시각적인 포커스 인디케이터를 제공하도록 개선했습니다.
From 75b53794bc82db587f953d1918dde282c9d385ee Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 12 Aug 2026 15:42:19 +0000
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EC=9A=94=EC=86=8C?=
=?UTF-8?q?=EC=9D=98=20=ED=88=B4=ED=8C=81=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
=?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
비상호작용 요소인 `div`(`.meta-value-card`)에 마우스 호버 시에만 보이는 툴팁(`title` 속성)이 제공되고 있어 스크린 리더와 키보드 사용자는 해당 정보를 인지할 수 없었습니다.
이에 `tabindex="0"`과 `role="note"`를 추가하여 포커스를 받을 수 있게 하고 스크린 리더가 올바르게 맥락을 읽을 수 있도록 하였으며, `.meta-value-card:focus-visible`를 추가하여 키보드 탐색 시 시각적인 포커스 인디케이터를 제공하도록 개선했습니다.
From d67194d62212bda715f5b69eccc671057f3761da Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 12 Aug 2026 16:05:18 +0000
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EC=9A=94=EC=86=8C?=
=?UTF-8?q?=EC=9D=98=20=ED=88=B4=ED=8C=81=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
=?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
비상호작용 요소인 `div`(`.meta-value-card`)에 마우스 호버 시에만 보이는 툴팁(`title` 속성)이 제공되고 있어 스크린 리더와 키보드 사용자는 해당 정보를 인지할 수 없었습니다.
이에 `tabindex="0"`과 `role="note"`를 추가하여 포커스를 받을 수 있게 하고 스크린 리더가 올바르게 맥락을 읽을 수 있도록 하였으며, `.meta-value-card:focus-visible`를 추가하여 키보드 탐색 시 시각적인 포커스 인디케이터를 제공하도록 개선했습니다.