diff --git a/.jules/palette.md b/.jules/palette.md index 32fb11be..262b0f18 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -43,3 +43,7 @@ ## 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-04 - Pair disabled buttons with visible helper text +**Learning:** When buttons are conditionally disabled and an explanation is conditionally rendered as helper text, using `aria-describedby` to link them ensures screen readers announce the reason for the disabled state, greatly improving accessibility. +**Action:** Always link conditionally rendered disabled-state helper text to the corresponding button using `aria-describedby` and an `id`. diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx index 5392d502..df7d03ce 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={!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을 만들려면 먼저 스냅샷을 생성하거나 테이블을 추가하세요. )}