From 5805d51caca5023c317d41cbf7ce5f1a179c9b6d Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 4 Jul 2026 13:52:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Pair=20disabled=20exp?=
 =?UTF-8?q?ort=20buttons=20with=20helper=20text=20via=20aria-describedby?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add `id` to conditionally rendered field hints for share link and DDL export
- Add `aria-describedby` to '링크 만들기' and 'DDL 복사' buttons conditionally when disabled
- Resolves accessibility gap where screen reader users were unaware why buttons were disabled without visual context
---
 .jules/palette.md                              | 4 ++++
 frontend/src/components/modals/ExportModal.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

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 ? "생성 중..." : "링크 만들기"}
             </button>
@@ -88,7 +89,7 @@ export function ExportModal({
               </button>
             </div>
           ) : (
-            <span className="field-hint">
+            <span className="field-hint" id="share-link-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 className="field-hint" id="ddl-export-hint">
               DDL을 만들려면 먼저 스냅샷을 생성하거나 테이블을 추가하세요.
             </span>
           )}