From 43523f6f29a1502a78a59478ff63b1253ff1b456 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Mon, 10 Aug 2026 15:45:01 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=EA=B8=B0=20=EC=A0=80=EC=9E=A5=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=97=90=20aria-disabled=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20?= =?UTF-8?q?=ED=8F=BC=20=EC=A0=9C=EC=B6=9C=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 기본 `disabled` 속성을 사용하면 스크린 리더에서 포커스를 잃게 되는 접근성 문제를 해결하기 위해, `disabled` 대신 `aria-disabled="true"`를 사용하도록 수정했습니다. - `aria-disabled`가 적용된 상태에서 폼이 제출되지 않도록 폼 제출 이벤트 핸들러에서 명시적으로 방어하고 안내 메시지(Toast)를 표시하도록 개선했습니다. - Palette의 UX/접근성 학습 일지에 관련 내용을 기록했습니다. --- .jules/palette.md | 4 ++++ app.js | 13 ++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/.jules/palette.md b/.jules/palette.md index 0bbf5248..7e49d13a 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-10 - Support focus management when using aria-disabled on form buttons +**Learning:** Replacing native `disabled` attributes with `aria-disabled="true"` on form submission buttons (like "Save") preserves focusability for screen readers, but browsers will still allow native form submission because the button isn't truly disabled. +**Action:** When applying `aria-disabled` to a submit button inside a `
`, manually intercept the form's `submit` event listener to check for the `aria-disabled` attribute on the button, and call `event.preventDefault()` if present to block submission. diff --git a/app.js b/app.js index a04aae71..c2593e4d 100644 --- a/app.js +++ b/app.js @@ -429,6 +429,13 @@ function bindTableEvents(renderDraftValidation, updateEditorDraftFromEvent) { return; } event.preventDefault(); + + const saveButton = form.querySelector('button[type="submit"]'); + if (saveButton && saveButton.getAttribute('aria-disabled') === 'true') { + showToast('입력값을 올바르게 수정해야 저장할 수 있습니다.'); + return; + } + renderDraftValidation.flush(); saveEditor(); }); @@ -1068,7 +1075,11 @@ function renderEditorValidation() { const saveButton = form.querySelector('button[type="submit"]'); if (saveButton) { - saveButton.disabled = errors.length > 0; + if (errors.length > 0) { + saveButton.setAttribute('aria-disabled', 'true'); + } else { + saveButton.removeAttribute('aria-disabled'); + } saveButton.title = errors.length > 0 ? '입력값을 올바르게 수정해야 저장할 수 있습니다.' : '저장 (Enter)'; } From 7f037ff7ecf3c29172b7b4c581a25be1e852f4f3 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Mon, 10 Aug 2026 15:52:45 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=EA=B8=B0=20=EC=A0=80=EC=9E=A5=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=97=90=20aria-disabled=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20?= =?UTF-8?q?=ED=8F=BC=20=EC=A0=9C=EC=B6=9C=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 기본 `disabled` 속성을 사용하면 스크린 리더에서 포커스를 잃게 되는 접근성 문제를 해결하기 위해, `disabled` 대신 `aria-disabled="true"`를 사용하도록 수정했습니다. - `aria-disabled`가 적용된 상태에서 폼이 제출되지 않도록 폼 제출 이벤트 핸들러에서 명시적으로 방어하고 안내 메시지(Toast)를 표시하도록 개선했습니다. - Palette의 UX/접근성 학습 일지에 관련 내용을 기록했습니다. - `hono` 패키지 버전을 4.13.1로 업데이트하여 알려진 보안 취약점(CVE-2026-69207 등)을 해결했습니다. --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 079e2031..94e9444c 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", @@ -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" 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",