From 313449c9816a5144a7a53bedfc0aa7ee61211b68 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 18 Jul 2026 14:15:20 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Improve=20disabled=20state=20accessibility=20in=20AddTableModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- replaced `disabled` with `aria-disabled` on the primary button in AddTableModal
- added `title` explanation for disabled state
- implemented visual disabled styles with opacity and cursor
- added manual `onClick` prevention when input is empty
- logged critical UX learning in .jules/palette.md
---
 .jules/palette.md                                |  4 ++++
 frontend/src/components/modals/AddTableModal.tsx | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index d892e2f9..c8eedcd6 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -54,3 +54,7 @@
 ## 2024-07-13 - [Table Node Accessibility]
 **Learning:** Adding `aria-hidden="true"` inside `abbr` elements with `aria-label` prevents screen readers from redundantly announcing short abbreviations like "PK" or "NN" along with their full label.
 **Action:** When creating short, domain-specific abbreviations with tooltips, use `aria-label` on the wrapper and hide the visual text from screen readers using `aria-hidden="true"` to create a cleaner auditory experience.
+
+## 2024-07-18 - Tooltip interaction on functionally disabled buttons
+**Learning:** Native `disabled` attributes on `<button>` elements prevent all interaction events, including mouse enter events that trigger native browser tooltips (`title`). When a user needs to know *why* a button is disabled, standard `disabled` prevents them from finding out.
+**Action:** When providing a `title` explaining a disabled state, replace the native `disabled` attribute with `aria-disabled={true}`. Intercept the `onClick` handler (e.g. `e.preventDefault()`) and apply visual disabled styling manually to preserve accessibility and discoverability.
diff --git a/frontend/src/components/modals/AddTableModal.tsx b/frontend/src/components/modals/AddTableModal.tsx
index 024bde03..4dc41734 100644
--- a/frontend/src/components/modals/AddTableModal.tsx
+++ b/frontend/src/components/modals/AddTableModal.tsx
@@ -78,11 +78,17 @@ export function AddTableModal({
           <button type="button" onClick={onAddTableCancel}>취소</button>
           <button
             type="submit"
-            disabled={!newTableName.trim()}
+            aria-disabled={!newTableName.trim()}
+            onClick={(e) => {
+              if (!newTableName.trim()) {
+                e.preventDefault();
+              }
+            }}
+            title={!newTableName.trim() ? "테이블 이름을 입력해야 저장할 수 있습니다." : undefined}
             style={
               newTableName.trim()
                 ? { background: "#034ea2", color: "#fff" }
-                : undefined
+                : { opacity: 0.5, cursor: "not-allowed" }
             }
           >
             저장