From 3d2d9a65fbd78064dc6d5e057f0391ca05b04ce2 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 13 Jul 2026 13:56:29 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Enhance=20accessibility=20of=20domain-specific=20abbreviations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md              | 4 ++++
 frontend/src/erd/TableNode.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index ff8d88f8..d892e2f9 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -50,3 +50,7 @@
 ## 2024-05-18 - Table row input accessibility
 **Learning:** In table-based forms where inputs or `<select>` elements correspond to a specific row property (e.g., Distinct Count, Group Assignment), the visual context or `<label>` often only provides the row identity. Screen reader users can lose context when focusing directly on these inputs.
 **Action:** Always provide an explicit `aria-label` directly on the input/select to give screen readers full context (e.g., `${column.column_name} distinct count`, `${node.data.title} 그룹 배정`), even if it is linked to a label via `id` or placed next to it visually.
+
+## 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.
diff --git a/frontend/src/erd/TableNode.tsx b/frontend/src/erd/TableNode.tsx
index bf7c4709..3f225f1d 100644
--- a/frontend/src/erd/TableNode.tsx
+++ b/frontend/src/erd/TableNode.tsx
@@ -115,10 +115,10 @@ function TableNode(props: NodeProps<TableNodeNode>) {
             />
           ) : null}
           {data.badges?.pk ? (
-            <abbr className="tableNode__badge" title="Primary Key" aria-label="Primary Key">PK</abbr>
+            <abbr className="tableNode__badge" title="Primary Key" aria-label="Primary Key"><span aria-hidden="true">PK</span></abbr>
           ) : null}
           {data.badges?.fk ? (
-            <abbr className="tableNode__badge" title="Foreign Key" aria-label="Foreign Key">FK</abbr>
+            <abbr className="tableNode__badge" title="Foreign Key" aria-label="Foreign Key"><span aria-hidden="true">FK</span></abbr>
           ) : null}
         </span>
       </div>
@@ -153,7 +153,7 @@ function TableNode(props: NodeProps<TableNodeNode>) {
               <span className="tableNode__colType">{c.data_type}</span>
               {c.is_pk ? (
                 <abbr className="tableNode__badge" title="Primary Key" aria-label="Primary Key">
-                  PK
+                  <span aria-hidden="true">PK</span>
                 </abbr>
               ) : null}
               {c.is_not_null ? (
@@ -162,7 +162,7 @@ function TableNode(props: NodeProps<TableNodeNode>) {
                   title="Not Null"
                   aria-label="필수 입력 (Not Null)"
                 >
-                  NN
+                  <span aria-hidden="true">NN</span>
                 </abbr>
               ) : null}
               <Handle