🎨 Palette: [UX improvement] Improve accessibility of domain-specific abbreviations

.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.

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