From a29cc19c0f201e6050d9ecf9cb844d35b5e138e8 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Wed, 5 Aug 2026 13:49:05 +0000 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록 --- .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..27d8b051 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-05 - 비대화형 요소의 툴팁 접근성 +**Learning:** 비대화형 요소(`div`, `span` 등)에 `title`이나 `aria-label`로 툴팁을 제공할 때, 키보드 사용자는 탭으로 포커스를 이동할 수 없어 해당 정보를 인지할 수 없는 문제가 발생함. +**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 8110dc670a02fe9b7153ea5fce4047dabf7e2bfe Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Wed, 5 Aug 2026 13:52:52 +0000 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록 From 558cc17779b9b6a871044e54464043260415e3c0 Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Tue, 11 Aug 2026 14:50:56 +0900 Subject: [PATCH 03/10] fix(security): upgrade Hono past 2026 CVEs --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7790e678..65735b6f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@hono/node-server": "^2.0.12", - "hono": "^4.12.32" + "hono": "^4.13.1" }, "devDependencies": { "@playwright/test": "1.61.1", From f62e5749fa9cc1779d5a55072dd7462a1e349c2f Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Tue, 11 Aug 2026 14:51:16 +0900 Subject: [PATCH 04/10] fix(security): regenerate dependency lock --- package-lock.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 079e2031..893b1f0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "dependencies": { "@hono/node-server": "^2.0.12", - "hono": "^4.12.32" + "hono": "^4.13.1" }, "devDependencies": { "@playwright/test": "1.61.1", @@ -31,9 +31,9 @@ } }, "node_modules/@hono/node-server": { - "version": "2.0.12", - "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.0.12.tgz", - "integrity": "sha512-eWpQYr67tqJLeaSUl0Q+TquuYfUdTibpOJlUMV2FfUP7+KqCC5TufnwnlXL6mobZBJbGAYRd7ZvEBDCbLInjhg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.1.0.tgz", + "integrity": "sha512-XovyyCCnBzW+zKu+z/zq8hwNs4KOR5rEMAOxo2f40Q5xoOI37IMm6MIg2COOUtUApo0i6850MTBKH2u4QLGIqg==", "license": "MIT", "engines": { "node": ">=20" @@ -382,9 +382,9 @@ } }, "node_modules/hono": { - "version": "4.12.32", - "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.32.tgz", - "integrity": "sha512-XcuyW9qE2kJn07PkecMOBd5Vq/hMy7mmGw+idz1yblbg9N17ijJODrvPkn7/dwL3Kulj8LcRJ69DLOWf91dRUg==", + "version": "4.13.1", + "resolved": "https://registry.npmjs.org/hono/-/hono-4.13.1.tgz", + "integrity": "sha512-kdJoFVv2xmayw6cY09H7AbMJMt8Jn5jdlEdXsP7AGBdF2DIptVlKlOLKXP41yPip4/a3yQPv9gVcJYI8YY04dw==", "license": "MIT", "engines": { "node": ">=16.9.0" @@ -613,9 +613,9 @@ } }, "node_modules/pure-rand": { - "version": "8.4.1", - "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-8.4.1.tgz", - "integrity": "sha512-c58R2+SPFcSIPXoU834QN/KPDDOSd8sXcSrqf6e83Me6Rrp1EYkxukkjXMVrKvKaADs1SOyNkWdfvLf6zY8qLQ==", + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-8.4.2.tgz", + "integrity": "sha512-vvuOGgcuPJAirlHvuQw1TrOiw7ptaIXXmIbNuiNOY6lNGJJH49PQ1Kj4nd783nPdQhQdicgOjVI2yI/9BD6/Ng==", "dev": true, "funding": [ { From 9186df5b1f42a5c9aa5dd77f421a3b84207e8c84 Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Tue, 11 Aug 2026 20:54:27 +0900 Subject: [PATCH 05/10] ci(security): align CodeQL with Hono remediation --- .github/workflows/codeql.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 1a9461d5..bf21857f 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -35,11 +35,11 @@ jobs: persist-credentials: false - name: Initialize CodeQL - uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2 + uses: github/codeql-action/init@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6 with: languages: ${{ matrix.language }} - name: Perform CodeQL analysis - uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2 + uses: github/codeql-action/analyze@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6 with: category: "/language:${{ matrix.language }}" From 24c86489800ef4405e737a8e3d5bc3d54d7628dd Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Tue, 11 Aug 2026 22:18:24 +0900 Subject: [PATCH 06/10] chore(security): keep Hono remediation dependency-only --- .github/workflows/codeql.yml | 4 ++-- package-lock.json | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index bf21857f..1a9461d5 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -35,11 +35,11 @@ jobs: persist-credentials: false - name: Initialize CodeQL - uses: github/codeql-action/init@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6 + uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2 with: languages: ${{ matrix.language }} - name: Perform CodeQL analysis - uses: github/codeql-action/analyze@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6 + uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2 with: category: "/language:${{ matrix.language }}" diff --git a/package-lock.json b/package-lock.json index 893b1f0f..a1c5e22b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -613,9 +613,9 @@ } }, "node_modules/pure-rand": { - "version": "8.4.2", - "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-8.4.2.tgz", - "integrity": "sha512-vvuOGgcuPJAirlHvuQw1TrOiw7ptaIXXmIbNuiNOY6lNGJJH49PQ1Kj4nd783nPdQhQdicgOjVI2yI/9BD6/Ng==", + "version": "8.4.1", + "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-8.4.1.tgz", + "integrity": "sha512-c58R2+SPFcSIPXoU834QN/KPDDOSd8sXcSrqf6e83Me6Rrp1EYkxukkjXMVrKvKaADs1SOyNkWdfvLf6zY8qLQ==", "dev": true, "funding": [ { From 6afa0d4c6d61095fb4f5efda2cf0eb17ff16c4a4 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 11 Aug 2026 17:14:01 +0000 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록 --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index a1c5e22b..079e2031 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "dependencies": { "@hono/node-server": "^2.0.12", - "hono": "^4.13.1" + "hono": "^4.12.32" }, "devDependencies": { "@playwright/test": "1.61.1", @@ -31,9 +31,9 @@ } }, "node_modules/@hono/node-server": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.1.0.tgz", - "integrity": "sha512-XovyyCCnBzW+zKu+z/zq8hwNs4KOR5rEMAOxo2f40Q5xoOI37IMm6MIg2COOUtUApo0i6850MTBKH2u4QLGIqg==", + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.0.12.tgz", + "integrity": "sha512-eWpQYr67tqJLeaSUl0Q+TquuYfUdTibpOJlUMV2FfUP7+KqCC5TufnwnlXL6mobZBJbGAYRd7ZvEBDCbLInjhg==", "license": "MIT", "engines": { "node": ">=20" @@ -382,9 +382,9 @@ } }, "node_modules/hono": { - "version": "4.13.1", - "resolved": "https://registry.npmjs.org/hono/-/hono-4.13.1.tgz", - "integrity": "sha512-kdJoFVv2xmayw6cY09H7AbMJMt8Jn5jdlEdXsP7AGBdF2DIptVlKlOLKXP41yPip4/a3yQPv9gVcJYI8YY04dw==", + "version": "4.12.32", + "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.32.tgz", + "integrity": "sha512-XcuyW9qE2kJn07PkecMOBd5Vq/hMy7mmGw+idz1yblbg9N17ijJODrvPkn7/dwL3Kulj8LcRJ69DLOWf91dRUg==", "license": "MIT", "engines": { "node": ">=16.9.0" diff --git a/package.json b/package.json index 65735b6f..7790e678 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@hono/node-server": "^2.0.12", - "hono": "^4.13.1" + "hono": "^4.12.32" }, "devDependencies": { "@playwright/test": "1.61.1", From cb3390dae7b7f363856c37aabee61dea0fa0a007 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 11 Aug 2026 17:23:51 +0000 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록 From 1648076f18dabe080e8e77320d7761b8f08530b2 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 11 Aug 2026 17:45:47 +0000 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록 From c3f6a8194d0f03822fde87c5c149bbb70d5501c8 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 11 Aug 2026 18:28:09 +0000 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록