From 4dc2db7085f830572833f135ff83148986ecdc9c Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 5 Jul 2026 14:08:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B3=B5=EC=9C=A0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=82=B4=EB=B3=B4=EB=82=B4=EA=B8=B0=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=9D=98=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 비활성화된 버튼과 안내 텍스트를 aria-describedby로 연결
- 스크린 리더 사용자의 사용성 향상
---
 .jules/palette.md                              | 3 +++
 frontend/src/components/modals/ExportModal.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

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 ? "생성 중..." : "링크 만들기"}
             </button>
@@ -88,7 +89,7 @@ export function ExportModal({
               </button>
             </div>
           ) : (
-            <span className="field-hint">
+            <span id="share-link-hint" className="field-hint">
               프로젝트가 선택되면 서버에서 새 공유 링크를 발급할 수 있습니다.
             </span>
           )}
@@ -109,6 +110,7 @@ export function ExportModal({
               onClick={onCopyExportDdl}
               disabled={!hasDdlExport}
               aria-live="polite"
+              aria-describedby={!hasDdlExport ? "ddl-export-hint" : undefined}
             >
               {isCopied ? "복사 완료" : "DDL 복사"}
             </button>
@@ -122,7 +124,7 @@ export function ExportModal({
               className="exportModal__ddl"
             />
           ) : (
-            <span className="field-hint">
+            <span id="ddl-export-hint" className="field-hint">
               DDL을 만들려면 먼저 스냅샷을 생성하거나 테이블을 추가하세요.
             </span>
           )}