🎨 Palette: [UX improvement] Link export artifact descriptions to buttons

frontend/src/components/modals/ExportModal.test.tsx

@@ -155,7 +155,10 @@ describe('ExportModal', () => {
     );
 
     expect(screen.getAllByText('먼저 테이블을 추가하세요')).toHaveLength(7);
-    expect(screen.getByRole('button', { name: 'SQL DDL 복사' })).toBeDisabled();
+    const sqlButton = screen.getByRole('button', { name: 'SQL DDL 복사' });
+    expect(sqlButton).toBeDisabled();
+    expect(sqlButton).toHaveAttribute('aria-describedby', 'export-artifact-desc-sql-ddl');
+
     expect(screen.getByRole('button', { name: 'SVG 이미지 내보내기' })).toBeDisabled();
     expect(screen.getByRole('button', { name: 'PlantUML 내보내기' })).toBeDisabled();
     expect(screen.getByRole('button', { name: 'Mermaid 내보내기' })).toBeDisabled();

frontend/src/components/modals/ExportModal.tsx

@@ -212,23 +212,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, '-').toLowerCase()}`;
+                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-live={artifact.label === 'SQL DDL' ? 'polite' : undefined}
+                      aria-describedby={descId}
+                    >
+                      {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>