diff --git a/.jules/palette.md b/.jules/palette.md index 32fb11be..4fa55f04 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. +## 2026-07-05 - Accessible Disabled Buttons +**Learning:** Adding `aria-describedby` to disabled buttons and explicitly linking them to visible helper text elements allows screen readers to announce the reason for being disabled, significantly improving accessibility for interactive elements that depend on prior state (like selecting a project). +**Action:** Always pair disabled interactive elements with visible helper text and use `aria-describedby` to semantically link them, ensuring the context is available to assistive technologies. diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx index 5392d502..72d07dbc 100644 --- a/frontend/src/components/modals/ExportModal.tsx +++ b/frontend/src/components/modals/ExportModal.tsx @@ -67,6 +67,7 @@ export function ExportModal({ onClick={onCreateShareLink} disabled={!canCreateShareLink || isCreatingShareLink} aria-busy={isCreatingShareLink} + aria-describedby={(!canCreateShareLink || isCreatingShareLink) && !shareLinkUrl ? "share-link-hint" : undefined} > {isCreatingShareLink ? "생성 중..." : "링크 만들기"} @@ -88,7 +89,7 @@ export function ExportModal({ ) : ( - + 프로젝트가 선택되면 서버에서 새 공유 링크를 발급할 수 있습니다. )} @@ -109,6 +110,7 @@ export function ExportModal({ onClick={onCopyExportDdl} disabled={!hasDdlExport} aria-live="polite" + aria-describedby={!hasDdlExport ? "ddl-export-hint" : undefined} > {isCopied ? "복사 완료" : "DDL 복사"} @@ -122,7 +124,7 @@ export function ExportModal({ className="exportModal__ddl" /> ) : ( - + DDL을 만들려면 먼저 스냅샷을 생성하거나 테이블을 추가하세요. )}