diff --git a/.jules/palette.md b/.jules/palette.md index 32fb11be..88bb8feb 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 `` 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 `` 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 b1673cdd..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} /> - PK + PK