From cdef75f00f03716c787c100a951f9ee702c052d2 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 16 Sep 2026 14:10:49 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessi?=
 =?UTF-8?q?bility=20of=20disabled=20access=20management=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                                   | 4 ++++
 frontend/src/components/modals/ExportModal.test.tsx | 2 +-
 frontend/src/components/modals/ExportModal.tsx      | 3 ++-
 frontend/src/styles.css                             | 4 ++--
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index bd0f73248..40ab2001b 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-09-16 - Accessible Explanatory Hints on Disabled Buttons
+**Learning:** Native `disabled` attributes remove elements from the tab order, breaking screen reader discoverability of explanatory hints (`aria-describedby`) attached to disabled buttons.
+**Action:** Use `aria-disabled={true}` with visual disabled styles and a preventative `onClick` handler instead of native `disabled` when a disabled button needs to be focusable to expose explanatory hints.
diff --git a/frontend/src/components/modals/ExportModal.test.tsx b/frontend/src/components/modals/ExportModal.test.tsx
index bd89c5384..cab22fa96 100644
--- a/frontend/src/components/modals/ExportModal.test.tsx
+++ b/frontend/src/components/modals/ExportModal.test.tsx
@@ -176,7 +176,7 @@ describe('ExportModal', () => {
 
     expect(screen.getByText('접근 권한 관리는 프로젝트 권한 설정에서 처리합니다.')).toBeInTheDocument();
     const accessManagementButton = screen.getByRole('button', { name: '접근 관리' });
-    expect(accessManagementButton).toBeDisabled();
+    expect(accessManagementButton).toHaveAttribute('aria-disabled', 'true');
     expect(accessManagementButton).toHaveAttribute('aria-describedby', 'share-export-access-hint');
     expect(accessManagementButton).not.toHaveAttribute('title');
   });
diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx
index 995393ceb..2e081c1d7 100644
--- a/frontend/src/components/modals/ExportModal.tsx
+++ b/frontend/src/components/modals/ExportModal.tsx
@@ -202,7 +202,8 @@ export function ExportModal({
               )}
               <button
                 type="button"
-                disabled
+                aria-disabled={true}
+                onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
                 aria-describedby="share-export-access-hint"
                 className="exportModal__disabledHintButton"
               >
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3605ce9fb..d90ee0641 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -432,7 +432,7 @@ button {
   cursor: pointer;
 }
 
-button:disabled {
+button:disabled, button[aria-disabled="true"] {
   opacity: 0.6;
   cursor: not-allowed;
   background-color: var(--color-surface-muted);
@@ -673,7 +673,7 @@ button:disabled {
   color: #fff;
 }
 
-.exportModal__primaryAction:not(:disabled):hover {
+.exportModal__primaryAction:not(:disabled):not([aria-disabled="true"]):hover {
   background: #023b7a;
 }
 

From 5b0ad6019d8aef401cc4f941b39d5a97edb6e079 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 17 Sep 2026 04:23:32 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=20=EA=B4=80=EB=A6=AC=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94=20=EB=B2=84=ED=8A=BC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit


From 8128822b6a82685aaa0e35ccbc5e1efb6071f8e5 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 17 Sep 2026 17:59:49 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=20=EA=B4=80=EB=A6=AC=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94=20=EB=B2=84=ED=8A=BC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                                   | 4 ----
 frontend/src/components/modals/ExportModal.test.tsx | 2 +-
 frontend/src/components/modals/ExportModal.tsx      | 3 +--
 frontend/src/styles.css                             | 4 ++--
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 40ab2001b..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-09-16 - Accessible Explanatory Hints on Disabled Buttons
-**Learning:** Native `disabled` attributes remove elements from the tab order, breaking screen reader discoverability of explanatory hints (`aria-describedby`) attached to disabled buttons.
-**Action:** Use `aria-disabled={true}` with visual disabled styles and a preventative `onClick` handler instead of native `disabled` when a disabled button needs to be focusable to expose explanatory hints.
diff --git a/frontend/src/components/modals/ExportModal.test.tsx b/frontend/src/components/modals/ExportModal.test.tsx
index cab22fa96..bd89c5384 100644
--- a/frontend/src/components/modals/ExportModal.test.tsx
+++ b/frontend/src/components/modals/ExportModal.test.tsx
@@ -176,7 +176,7 @@ describe('ExportModal', () => {
 
     expect(screen.getByText('접근 권한 관리는 프로젝트 권한 설정에서 처리합니다.')).toBeInTheDocument();
     const accessManagementButton = screen.getByRole('button', { name: '접근 관리' });
-    expect(accessManagementButton).toHaveAttribute('aria-disabled', 'true');
+    expect(accessManagementButton).toBeDisabled();
     expect(accessManagementButton).toHaveAttribute('aria-describedby', 'share-export-access-hint');
     expect(accessManagementButton).not.toHaveAttribute('title');
   });
diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx
index 2e081c1d7..995393ceb 100644
--- a/frontend/src/components/modals/ExportModal.tsx
+++ b/frontend/src/components/modals/ExportModal.tsx
@@ -202,8 +202,7 @@ export function ExportModal({
               )}
               <button
                 type="button"
-                aria-disabled={true}
-                onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                disabled
                 aria-describedby="share-export-access-hint"
                 className="exportModal__disabledHintButton"
               >
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index d90ee0641..3605ce9fb 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -432,7 +432,7 @@ button {
   cursor: pointer;
 }
 
-button:disabled, button[aria-disabled="true"] {
+button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   background-color: var(--color-surface-muted);
@@ -673,7 +673,7 @@ button:disabled, button[aria-disabled="true"] {
   color: #fff;
 }
 
-.exportModal__primaryAction:not(:disabled):not([aria-disabled="true"]):hover {
+.exportModal__primaryAction:not(:disabled):hover {
   background: #023b7a;
 }