From e6e3c93f9f303153de844089e2d9e4c47413cb65 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 2 Sep 2026 21:33:36 +0000
Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0]=20=EB=82=B4=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20aria-describedby=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: ExportModal의 내보내기 버튼들에 `aria-describedby` 속성을 추가하여 옆에 있는 설명 텍스트를 참조하도록 개선했습니다.
🎯 Why: 버튼이 비활성화되었을 때(예: "먼저 테이블을 추가하세요"), 스크린 리더 사용자가 왜 버튼을 누를 수 없는지 이유를 명확하게 알 수 있도록 맥락을 제공하기 위함입니다.
📸 Before/After:
  - Before: `<button disabled>내보내기</button>`
  - After: `<span id="export-desc-SQL-DDL">먼저 테이블을 추가하세요</span> <button disabled aria-describedby="export-desc-SQL-DDL">내보내기</button>`
♿ Accessibility: 비활성화된 컨트롤에 대한 명확한 사유를 보조 기기에 전달하여 WCAG의 폼 컨트롤 지침과 스크린 리더 사용성을 향상시켰습니다.
---
 .jules/palette.md                             |  4 +++
 .../src/components/modals/ExportModal.tsx     | 36 ++++++++++---------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index bd0f73248..fcd2da1c1 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -57,3 +57,7 @@
 ## 2026-07-30 - Add window.confirm for destructive actions
 **Learning:** Destructive actions like deleting groups and edge relationships previously occurred immediately without user confirmation.
 **Action:** Always wrap delete operations with window.confirm() dialogs and ensure corresponding tests successfully mock window.confirm.
+
+## 2026-10-25 - 내보내기 모달 버튼 접근성 개선
+**Learning:** ExportModal의 내보내기 버튼이 비활성화되었을 때, 시각적으로는 "먼저 테이블을 추가하세요"라는 설명이 보이지만 스크린 리더 사용자에게는 이 맥락이 전달되지 않아 왜 비활성화되었는지 알 수 없는 문제가 있었습니다.
+**Action:** 비활성화될 수 있는 버튼 곁에 있는 설명 텍스트 요소에 id를 부여하고, 버튼에 `aria-describedby`를 추가하여 스크린 리더가 비활성화 사유를 읽을 수 있도록 연결해야 합니다.
diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx
index 995393ceb..aff876900 100644
--- a/frontend/src/components/modals/ExportModal.tsx
+++ b/frontend/src/components/modals/ExportModal.tsx
@@ -222,23 +222,27 @@ export function ExportModal({
             </p>
 
             <div className="exportModal__artifactList">
-              {artifacts.map((artifact) => (
-                <div className="exportModal__artifactRow" key={artifact.label}>
-                  <div>
-                    <strong>{artifact.label}</strong>
-                    <span>{artifact.description}</span>
+              {artifacts.map((artifact) => {
+                const descId = `export-artifact-desc-${artifact.label.replace(/\s+/g, '-')}`;
+                return (
+                  <div className="exportModal__artifactRow" key={artifact.label}>
+                    <div>
+                      <strong>{artifact.label}</strong>
+                      <span id={descId}>{artifact.description}</span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={artifact.onExport}
+                      disabled={artifact.disabled}
+                      aria-label={artifact.ariaLabel}
+                      aria-describedby={descId}
+                      aria-live={artifact.label === 'SQL DDL' ? 'polite' : undefined}
+                    >
+                      {artifact.buttonLabel}
+                    </button>
                   </div>
-                  <button
-                    type="button"
-                    onClick={artifact.onExport}
-                    disabled={artifact.disabled}
-                    aria-label={artifact.ariaLabel}
-                    aria-live={artifact.label === 'SQL DDL' ? 'polite' : undefined}
-                  >
-                    {artifact.buttonLabel}
-                  </button>
-                </div>
-              ))}
+                );
+              })}
             </div>
           </section>
         </div>

From 71e01947d11ec9f6bc888e520a0c48e2aa0b6566 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 10:58:54 +0900
Subject: [PATCH 2/9] fix(docs): remove future-dated unverified export doctrine

---
 .jules/palette.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index fcd2da1c1..bd0f73248 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -57,7 +57,3 @@
 ## 2026-07-30 - Add window.confirm for destructive actions
 **Learning:** Destructive actions like deleting groups and edge relationships previously occurred immediately without user confirmation.
 **Action:** Always wrap delete operations with window.confirm() dialogs and ensure corresponding tests successfully mock window.confirm.
-
-## 2026-10-25 - 내보내기 모달 버튼 접근성 개선
-**Learning:** ExportModal의 내보내기 버튼이 비활성화되었을 때, 시각적으로는 "먼저 테이블을 추가하세요"라는 설명이 보이지만 스크린 리더 사용자에게는 이 맥락이 전달되지 않아 왜 비활성화되었는지 알 수 없는 문제가 있었습니다.
-**Action:** 비활성화될 수 있는 버튼 곁에 있는 설명 텍스트 요소에 id를 부여하고, 버튼에 `aria-describedby`를 추가하여 스크린 리더가 비활성화 사유를 읽을 수 있도록 연결해야 합니다.

From 5f7bbac24801147e0b00aad3653a1edf903f338c Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 11:08:07 +0900
Subject: [PATCH 3/9] test(a11y): verify export buttons expose disabled reasons

---
 .../components/modals/ExportModal.test.tsx    | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/modals/ExportModal.test.tsx b/frontend/src/components/modals/ExportModal.test.tsx
index bd89c5384..71ea63f5b 100644
--- a/frontend/src/components/modals/ExportModal.test.tsx
+++ b/frontend/src/components/modals/ExportModal.test.tsx
@@ -161,14 +161,26 @@ describe('ExportModal', () => {
     );
 
     expect(screen.getAllByText('먼저 테이블을 추가하세요')).toHaveLength(8);
-    expect(screen.getByRole('button', { name: 'SQL DDL 복사' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'SVG 이미지 내보내기' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'PlantUML 내보내기' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Mermaid 내보내기' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'DBML 내보내기' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Prisma Schema 내보내기' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: '데이터 사전 CSV 내보내기' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: '데이터 사전 Markdown 내보내기' })).toBeDisabled();
+    const exportButtonNames = [
+      'SQL DDL 복사',
+      'SVG 이미지 내보내기',
+      'PlantUML 내보내기',
+      'Mermaid 내보내기',
+      'DBML 내보내기',
+      'Prisma Schema 내보내기',
+      '데이터 사전 CSV 내보내기',
+      '데이터 사전 Markdown 내보내기',
+    ];
+
+    for (const name of exportButtonNames) {
+      const button = screen.getByRole('button', { name });
+      expect(button).toBeDisabled();
+      const descriptionId = button.getAttribute('aria-describedby');
+      expect(descriptionId).toBeTruthy();
+      expect(document.getElementById(descriptionId!)).toHaveTextContent(
+        '먼저 테이블을 추가하세요',
+      );
+    }
   });
 
   it('exposes access-control guidance for disabled button', () => {
@@ -180,4 +192,4 @@ describe('ExportModal', () => {
     expect(accessManagementButton).toHaveAttribute('aria-describedby', 'share-export-access-hint');
     expect(accessManagementButton).not.toHaveAttribute('title');
   });
-});
+});
\ No newline at end of file

From aa934156fa5bbe66ae04e93fe69396ed6b219ae9 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 11:09:01 +0900
Subject: [PATCH 4/9] test(a11y): cover enabled export descriptions

---
 frontend/src/components/modals/ExportModal.test.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/modals/ExportModal.test.tsx b/frontend/src/components/modals/ExportModal.test.tsx
index 71ea63f5b..52754d3c7 100644
--- a/frontend/src/components/modals/ExportModal.test.tsx
+++ b/frontend/src/components/modals/ExportModal.test.tsx
@@ -183,6 +183,16 @@ describe('ExportModal', () => {
     }
   });
 
+  it('describes enabled exports with their artifact context', () => {
+    render(<ExportModal {...baseProps} />);
+
+    const ddlButton = screen.getByRole('button', { name: 'SQL DDL 복사' });
+    expect(ddlButton).toBeEnabled();
+    const descriptionId = ddlButton.getAttribute('aria-describedby');
+    expect(descriptionId).toBeTruthy();
+    expect(document.getElementById(descriptionId!)).toHaveTextContent('스키마 텍스트');
+  });
+
   it('exposes access-control guidance for disabled button', () => {
     render(<ExportModal {...baseProps} canCreateShareLink={false} />);
 

From 0118deeba43d61b66f226e90e436bd1ff8e6c4c9 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 11:09:13 +0900
Subject: [PATCH 5/9] docs(frontend): record export accessibility descriptions

---
 frontend/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md
index c78944c31..41ba2e26e 100644
--- a/frontend/CHANGELOG.md
+++ b/frontend/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [Unreleased]
 ### Added
+- **내보내기 접근성 설명 연결**: ExportModal의 각 산출물 버튼을 대응 설명과 `aria-describedby`로 연결하여 활성 상태의 산출물 맥락과 비활성 상태의 생성 불가 사유를 보조 기술에 함께 제공합니다.
 - **테이블 및 컬럼 편집 기능**: UI 패널을 통해 노드를 선택하고, 테이블의 이름/코멘트를 수정하며, 컬럼을 추가/수정/삭제하거나 테이블을 삭제할 수 있는 기능 추가.
 - **테스트 추가**: 프론트엔드 테스트 커버리지 100% 목표 달성을 위해 `cardinality.ts`, `types.ts`, `export.ts` 의 미달성 분기 및 함수 테스트 추가 (`cardinality_extra.test.ts` 등).
 - `.gitignore` 파일에 `coverage/` 폴더를 추가하여 불필요한 테스트 아티팩트가 커밋되지 않도록 보완.

From c2fdfd8b06cab86f684d8ae4542b4eb6a9779103 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 11:09:28 +0900
Subject: [PATCH 6/9] docs(changelog): record export a11y descriptions

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35613431a..512bb689c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- [FE] ♿ **내보내기 버튼 설명 연결**: ExportModal의 각 산출물 버튼을 대응 설명과 `aria-describedby`로 연결해 활성 상태에서는 산출물 맥락을, 비활성 상태에서는 생성 불가 사유를 스크린 리더가 함께 읽을 수 있도록 했습니다. 집중 테스트가 실제 설명 `id` 연결을 활성/비활성 상태에서 검증합니다.
 - [BE] 🔒 **Cryptography 50+ 보안 경계 갱신**: `pyproject.toml`과 두 hash-locked 요구사항 파일을 동일한 Cryptography 50+ 해석으로 정합화하여 PKCS#7 오류·타이밍 구분으로 인한 CVE-2026-69247 완화를 실제 설치·검증 경로에 반영했습니다.
 - [FE] ⚡ **검색 노드 참조 안정화 및 순차 스냅샷 폴링**: 같은 정규화 검색어와 원본 테이블 데이터에는 장식된 `node.data` 참조를 재사용하여 드래그 중 불필요한 하위 렌더링과 할당을 줄입니다. 스냅샷 폴링은 이전 요청이 끝난 뒤에만 다음 요청을 예약하며, 선택 변경·언마운트 후 도착한 오래된 성공 또는 실패 응답을 무시합니다.
 - [BE] 🔒 **공유 export 전 경로 redaction**: 공개 share의 SQL / index-design / reversing-spec export에서 코멘트·`example_value`를 제거합니다. 단위 테스트로 누출을 차단합니다.

From 39a7e5dd9822aa5359a2954a396850fb5c982f9e Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 7 Sep 2026 06:49:33 +0000
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0]=20=EB=82=B4=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20aria-describedby=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: ExportModal의 내보내기 버튼들에 `aria-describedby` 속성을 추가하여 옆에 있는 설명 텍스트를 참조하도록 개선했습니다.
🎯 Why: 버튼이 비활성화되었을 때(예: "먼저 테이블을 추가하세요"), 스크린 리더 사용자가 왜 버튼을 누를 수 없는지 이유를 명확하게 알 수 있도록 맥락을 제공하기 위함입니다.
📸 Before/After:
  - Before: `<button disabled>내보내기</button>`
  - After: `<span id="export-desc-SQL-DDL">먼저 테이블을 추가하세요</span> <button disabled aria-describedby="export-desc-SQL-DDL">내보내기</button>`
♿ Accessibility: 비활성화된 컨트롤에 대한 명확한 사유를 보조 기기에 전달하여 WCAG의 폼 컨트롤 지침과 스크린 리더 사용성을 향상시켰습니다.

From 26ff208c3da3f44f898a020ad432165414bd8c6a Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 16:20:59 +0900
Subject: [PATCH 8/9] test(a11y): require stable export artifact description
 ids

---
 .../modals/ExportModal.ids.test.tsx           | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/components/modals/ExportModal.ids.test.tsx

diff --git a/frontend/src/components/modals/ExportModal.ids.test.tsx b/frontend/src/components/modals/ExportModal.ids.test.tsx
new file mode 100644
index 000000000..b769ecb7c
--- /dev/null
+++ b/frontend/src/components/modals/ExportModal.ids.test.tsx
@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { ExportModal } from './ExportModal';
+
+const baseProps = {
+  isOpen: true,
+  isCopied: false,
+  hasDdlExport: true,
+  hasDictionaryExport: true,
+  hasDiagramExport: true,
+  shareLinkUrl: '',
+  isCreatingShareLink: false,
+  isShareLinkCopied: false,
+  shareLinkError: null,
+  canCreateShareLink: true,
+  onCloseExport: vi.fn(),
+  onCopyExportDdl: vi.fn(),
+  onDownloadSvg: vi.fn(),
+  onDownloadUml: vi.fn(),
+  onDownloadMermaid: vi.fn(),
+  onExportDictionaryCsv: vi.fn(),
+  onExportDictionaryMarkdown: vi.fn(),
+  onDownloadDbml: vi.fn(),
+  onDownloadPrisma: vi.fn(),
+  onCreateShareLink: vi.fn(),
+  onCopyShareLink: vi.fn(),
+};
+
+afterEach(cleanup);
+
+describe('ExportModal artifact description ids', () => {
+  it('uses stable artifact identities rather than user-visible labels for aria relationships', () => {
+    render(<ExportModal {...baseProps} />);
+
+    const expectedIds = new Map<string, string>([
+      ['SQL DDL 복사', 'export-artifact-desc-sql-ddl'],
+      ['SVG 이미지 내보내기', 'export-artifact-desc-svg'],
+      ['PlantUML 내보내기', 'export-artifact-desc-plantuml'],
+      ['Mermaid 내보내기', 'export-artifact-desc-mermaid'],
+      ['DBML 내보내기', 'export-artifact-desc-dbml'],
+      ['Prisma Schema 내보내기', 'export-artifact-desc-prisma'],
+      ['데이터 사전 CSV 내보내기', 'export-artifact-desc-dictionary-csv'],
+      ['데이터 사전 Markdown 내보내기', 'export-artifact-desc-dictionary-markdown'],
+    ]);
+
+    for (const [buttonName, descriptionId] of expectedIds) {
+      expect(screen.getByRole('button', { name: buttonName })).toHaveAttribute(
+        'aria-describedby',
+        descriptionId,
+      );
+      expect(document.getElementById(descriptionId)).toBeInTheDocument();
+    }
+  });
+});

From 87516b519717ee7ab4307a06a31f978f74b6b7cf Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 7 Sep 2026 16:21:57 +0900
Subject: [PATCH 9/9] fix(a11y): decouple description ids from visible labels

---
 frontend/src/components/modals/ExportModal.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx
index aff876900..5d2d1fb36 100644
--- a/frontend/src/components/modals/ExportModal.tsx
+++ b/frontend/src/components/modals/ExportModal.tsx
@@ -26,6 +26,7 @@ interface ExportModalProps {
 }
 
 type ExportArtifact = {
+  id: string;
   label: string;
   description: string;
   buttonLabel: string;
@@ -72,6 +73,7 @@ export function ExportModal({
 
   const artifacts: ExportArtifact[] = [
     {
+      id: 'sql-ddl',
       label: 'SQL DDL',
       description: hasDdlExport ? '스키마 텍스트' : '먼저 테이블을 추가하세요',
       buttonLabel: isCopied ? '복사 완료' : '내보내기',
@@ -80,6 +82,7 @@ export function ExportModal({
       ariaLabel: 'SQL DDL 복사',
     },
     {
+      id: 'svg',
       label: 'SVG 이미지',
       description: hasDiagramExport ? '다이어그램 파일' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -88,6 +91,7 @@ export function ExportModal({
       ariaLabel: 'SVG 이미지 내보내기',
     },
     {
+      id: 'plantuml',
       label: 'PlantUML',
       description: hasDiagramExport ? '텍스트 포맷' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -96,6 +100,7 @@ export function ExportModal({
       ariaLabel: 'PlantUML 내보내기',
     },
     {
+      id: 'mermaid',
       label: 'Mermaid',
       description: hasDiagramExport ? '텍스트 포맷' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -104,6 +109,7 @@ export function ExportModal({
       ariaLabel: 'Mermaid 내보내기',
     },
     {
+      id: 'dbml',
       label: 'DBML',
       description: hasDiagramExport ? '텍스트 포맷' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -112,6 +118,7 @@ export function ExportModal({
       ariaLabel: 'DBML 내보내기',
     },
     {
+      id: 'prisma',
       label: 'Prisma Schema',
       description: hasDiagramExport ? '텍스트 포맷' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -120,6 +127,7 @@ export function ExportModal({
       ariaLabel: 'Prisma Schema 내보내기',
     },
     {
+      id: 'dictionary-csv',
       label: 'Data Dictionary CSV',
       description: hasDictionaryExport ? '테이블/컬럼 목록' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -128,6 +136,7 @@ export function ExportModal({
       ariaLabel: '데이터 사전 CSV 내보내기',
     },
     {
+      id: 'dictionary-markdown',
       label: 'Data Dictionary MD',
       description: hasDictionaryExport ? '마크다운 문서' : '먼저 테이블을 추가하세요',
       buttonLabel: '내보내기',
@@ -223,9 +232,9 @@ export function ExportModal({
 
             <div className="exportModal__artifactList">
               {artifacts.map((artifact) => {
-                const descId = `export-artifact-desc-${artifact.label.replace(/\s+/g, '-')}`;
+                const descId = `export-artifact-desc-${artifact.id}`;
                 return (
-                  <div className="exportModal__artifactRow" key={artifact.label}>
+                  <div className="exportModal__artifactRow" key={artifact.id}>
                     <div>
                       <strong>{artifact.label}</strong>
                       <span id={descId}>{artifact.description}</span>
@@ -236,7 +245,7 @@ export function ExportModal({
                       disabled={artifact.disabled}
                       aria-label={artifact.ariaLabel}
                       aria-describedby={descId}
-                      aria-live={artifact.label === 'SQL DDL' ? 'polite' : undefined}
+                      aria-live={artifact.id === 'sql-ddl' ? 'polite' : undefined}
                     >
                       {artifact.buttonLabel}
                     </button>