From 61fcb7e098a82ccd25758cff3d614ba357870d9a Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:15:59 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EB=8C=80=ED=99=94=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4?=
=?UTF-8?q?=ED=8C=81=20=ED=82=A4=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC?=
=?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- `index.html`의 `.meta-value-card`에 `tabindex="0"` 추가
- `app.js`에서 동적으로 생성되는 `.status-badge`에 `tabIndex = 0` 추가
- `styles.css`에서 해당 요소들에 `:focus-visible` 아웃라인 스타일 적용
- `.jules/palette.md`에 관련된 UX/접근성 교훈 기록
---
.jules/palette.md | 3 +++
app.js | 1 +
index.html | 6 +++---
styles.css | 4 +++-
4 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/.jules/palette.md b/.jules/palette.md
index 0bbf5248..4e3e4c77 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-06 - 비대화형 요소 툴팁 키보드 접근성 개선
+**Learning:** `title`이나 `aria-label`을 가진 비대화형 요소(`div`, `span`)의 툴팁은 마우스 호버 시에만 나타나고 키보드 포커스를 받을 수 없어 접근성이 떨어집니다.
+**Action:** 툴팁 정보를 제공하는 비대화형 요소에는 `tabindex="0"`을 추가하여 키보드 초점을 받을 수 있도록 하고, `:focus-visible` 스타일을 지정하여 포커스 상태를 명확히 해야 합니다.
diff --git a/app.js b/app.js
index a04aae71..d2a4b55e 100644
--- a/app.js
+++ b/app.js
@@ -999,6 +999,7 @@ function createStatusCellContent(progressState) {
if (progressState.description) {
badge.title = progressState.description;
badge.setAttribute('aria-label', `${progressState.label} - ${progressState.description}`);
+ badge.tabIndex = 0;
}
return badge;
}
diff --git a/index.html b/index.html
index a7f4b49c..6efce0eb 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..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 528a250950b2fceed0fe208e318d1ca27f636b1b Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:31:50 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EB=8C=80=ED=99=94=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4?=
=?UTF-8?q?=ED=8C=81=20=ED=82=A4=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC?=
=?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- `index.html`의 `.meta-value-card`에 `tabindex="0"` 및 `role="note"` 추가
- `app.js`에서 동적으로 생성되는 `.status-badge`에 `tabIndex = 0` 및 `role="note"` 추가
- `styles.css`에서 해당 요소들에 `:focus-visible` 아웃라인 스타일 적용
- `.jules/palette.md`에 관련된 UX/접근성 교훈 기록 (역할 누락 안티패턴 방지)
---
.jules/palette.md | 6 +++---
app.js | 1 +
index.html | 6 +++---
3 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/.jules/palette.md b/.jules/palette.md
index 4e3e4c77..7edfe9de 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -115,6 +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-06 - 비대화형 요소 툴팁 키보드 접근성 개선
-**Learning:** `title`이나 `aria-label`을 가진 비대화형 요소(`div`, `span`)의 툴팁은 마우스 호버 시에만 나타나고 키보드 포커스를 받을 수 없어 접근성이 떨어집니다.
-**Action:** 툴팁 정보를 제공하는 비대화형 요소에는 `tabindex="0"`을 추가하여 키보드 초점을 받을 수 있도록 하고, `:focus-visible` 스타일을 지정하여 포커스 상태를 명확히 해야 합니다.
+## 2026-08-06 - Keyboard Accessibility for Non-Interactive Tooltips
+**Learning:** Adding `tabindex="0"` to non-interactive elements (`div`, `span`) to expose `title` tooltips to keyboard users creates an accessibility anti-pattern if a valid ARIA role isn't provided, as screen readers will announce the element without context, confusing users.
+**Action:** When adding `tabindex="0"` to non-interactive elements for tooltip accessibility, always include an appropriate ARIA role (e.g., `role="note"`, `role="region"`) to provide semantic context for screen readers, and ensure `:focus-visible` styles are applied.
diff --git a/app.js b/app.js
index d2a4b55e..6965eb97 100644
--- a/app.js
+++ b/app.js
@@ -1000,6 +1000,7 @@ function createStatusCellContent(progressState) {
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 6efce0eb..c5627a8b 100644
--- a/index.html
+++ b/index.html
@@ -28,18 +28,18 @@
ScopeWeave Planner
기준일
-
+
전체일수0일
-
+
계획진척률(누적)0.00%
-
+
실적진척률(누적)0.00%
From 6a87ef0f5d416fe808a60f8be5704faf7dba10ab Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:43:20 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EB=8C=80=ED=99=94=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4?=
=?UTF-8?q?=ED=8C=81=20=ED=82=A4=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC?=
=?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- `index.html`의 `.meta-value-card`에 `tabindex="0"` 및 `role="note"` 추가
- `app.js`에서 동적으로 생성되는 `.status-badge`에 `tabIndex = 0` 및 `role="note"` 추가
- `styles.css`에서 해당 요소들에 `:focus-visible` 아웃라인 스타일 적용
- `.jules/palette.md`에 관련된 UX/접근성 교훈 기록 (역할 누락 안티패턴 방지)
From c94de53c9e151d17cdd1693471c06f63c575539e Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:51:44 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=EB=8C=80=ED=99=94=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4?=
=?UTF-8?q?=ED=8C=81=20=ED=82=A4=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC?=
=?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- `index.html`의 `.meta-value-card`에 `tabindex="0"` 및 `role="note"` 추가
- `app.js`에서 동적으로 생성되는 `.status-badge`에 `tabIndex = 0` 및 `role="note"` 추가
- `styles.css`에서 해당 요소들에 `:focus-visible` 아웃라인 스타일 적용
- `.jules/palette.md`에 관련된 UX/접근성 교훈 기록 (역할 누락 안티패턴 방지)