From e5422975687f1f48a1421703f677141bd0f4b26e Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 2 Jul 2026 14:11:11 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?=
 =?UTF-8?q?]=20add=20abbr=20to=20PK=20and=20NN=20in=20EditTableModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                                 | 3 +++
 frontend/src/components/modals/EditTableModal.tsx | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 32fb11be..c96b8fc5 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -43,3 +43,6 @@
 ## 2024-06-26 - [Abbreviation Comprehension in ERD Nodes]
 **Learning:** Users without deep database administration backgrounds may not immediately recognize domain-specific abbreviations like "PK" or "FK" rendered as minimalist badges inside dense ERD nodes.
 **Action:** Always provide `title` attributes on technical acronym badges (like Primary Key / Foreign Key) to ensure clarity and improve accessibility without cluttering the space-constrained node UI.
+## 2025-03-05 - Wrapping Plain Text Abbreviations for Accessibility
+**Learning:** ERD nodes and forms often use highly abbreviated terms like "PK" or "NN" inside checkboxes or badges without surrounding tags. While users familiar with databases understand them, screen readers read them literally, and new users may be confused. Wrapping these raw text strings in `<abbr>` tags with `title` and `aria-label` provides a native browser tooltip on hover and explicit readouts for assistive technologies.
+**Action:** When working on ERD-specific terminology, wrap unstyled or plain text abbreviations in `<abbr>` elements with descriptive attributes, ensuring they are accessible to both mouse and keyboard/screen-reader users.
diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx
index b1673cdd..a2f14990 100644
--- a/frontend/src/components/modals/EditTableModal.tsx
+++ b/frontend/src/components/modals/EditTableModal.tsx
@@ -132,7 +132,7 @@ export function EditTableModal({
                         name={`col_pk_${idx}`}
                         defaultChecked={col.is_pk}
                       />
-                      PK
+                      <abbr title="Primary Key" aria-label="Primary Key" style={{ textDecoration: "none", cursor: "help" }}>PK</abbr>
                     </label>
                     <label className="row" style={{ gap: 4, whiteSpace: "nowrap" }}>
                       <input
@@ -140,7 +140,7 @@ export function EditTableModal({
                         name={`col_nn_${idx}`}
                         defaultChecked={col.is_not_null}
                       />
-                      NN
+                      <abbr title="Not Null" aria-label="필수 입력 (Not Null)" style={{ textDecoration: "none", cursor: "help" }}>NN</abbr>
                     </label>
                     <button
                       type="button"

From af387848f71aff49003d6336ac4f7f2cde072d18 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 2 Jul 2026 22:04:17 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?=
 =?UTF-8?q?]=20add=20abbr=20to=20PK=20and=20NN=20in=20EditTableModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                                 | 4 ++--
 frontend/src/components/modals/EditTableModal.tsx | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index c96b8fc5..88bb8feb 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -44,5 +44,5 @@
 **Learning:** Users without deep database administration backgrounds may not immediately recognize domain-specific abbreviations like "PK" or "FK" rendered as minimalist badges inside dense ERD nodes.
 **Action:** Always provide `title` attributes on technical acronym badges (like Primary Key / Foreign Key) to ensure clarity and improve accessibility without cluttering the space-constrained node UI.
 ## 2025-03-05 - Wrapping Plain Text Abbreviations for Accessibility
-**Learning:** ERD nodes and forms often use highly abbreviated terms like "PK" or "NN" inside checkboxes or badges without surrounding tags. While users familiar with databases understand them, screen readers read them literally, and new users may be confused. Wrapping these raw text strings in `<abbr>` tags with `title` and `aria-label` provides a native browser tooltip on hover and explicit readouts for assistive technologies.
-**Action:** When working on ERD-specific terminology, wrap unstyled or plain text abbreviations in `<abbr>` elements with descriptive attributes, ensuring they are accessible to both mouse and keyboard/screen-reader users.
+**Learning:** ERD nodes and forms often use highly abbreviated terms like "PK" or "NN" inside checkboxes or badges without surrounding tags. While users familiar with databases understand them, screen readers read them literally, and new users may be confused. Wrapping these raw text strings in `<abbr>` tags with `aria-label` ensures screen readers announce the full term. However, the `title` attribute only reliably provides tooltips on pointer hover, leaving keyboard-only users without visual explanations.
+**Action:** When working on ERD-specific terminology, wrap plain text abbreviations in `<abbr>` elements with `aria-label` for screen reader accessibility. If true keyboard parity for visual tooltips is required, consider using a focusable help element or `aria-describedby` instead of relying solely on `title`.
diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx
index a2f14990..5fa37ae8 100644
--- a/frontend/src/components/modals/EditTableModal.tsx
+++ b/frontend/src/components/modals/EditTableModal.tsx
@@ -13,6 +13,8 @@ interface EditTableModalProps {
   onDeleteTable: () => void;
 }
 
+const abbrStyle = { textDecoration: "none", cursor: "help" };
+
 export function EditTableModal({
   isOpen,
   editingNode,
@@ -132,7 +134,7 @@ export function EditTableModal({
                         name={`col_pk_${idx}`}
                         defaultChecked={col.is_pk}
                       />
-                      <abbr title="Primary Key" aria-label="Primary Key" style={{ textDecoration: "none", cursor: "help" }}>PK</abbr>
+                      <abbr title="Primary Key" aria-label="Primary Key" style={abbrStyle}>PK</abbr>
                     </label>
                     <label className="row" style={{ gap: 4, whiteSpace: "nowrap" }}>
                       <input
@@ -140,7 +142,7 @@ export function EditTableModal({
                         name={`col_nn_${idx}`}
                         defaultChecked={col.is_not_null}
                       />
-                      <abbr title="Not Null" aria-label="필수 입력 (Not Null)" style={{ textDecoration: "none", cursor: "help" }}>NN</abbr>
+                      <abbr title="Not Null" aria-label="Not Null" style={abbrStyle}>NN</abbr>
                     </label>
                     <button
                       type="button"