🎨 Palette: Add accessibility tooltips to PK and NN abbreviations in EditTableModal

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

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,15 +134,15 @@ export function EditTableModal({
                         name={`col_pk_${idx}`}
                         defaultChecked={col.is_pk}
                       />
-                      PK
+                      <abbr title="Primary Key" aria-label="Primary Key" style={abbrStyle}>PK</abbr>
                     </label>
                     <label className="row" style={{ gap: 4, whiteSpace: "nowrap" }}>
                       <input
                         type="checkbox"
                         name={`col_nn_${idx}`}
                         defaultChecked={col.is_not_null}
                       />
-                      NN
+                      <abbr title="Not Null" aria-label="Not Null" style={abbrStyle}>NN</abbr>
                     </label>
                     <button
                       type="button"