From 51dbeddc1ca677e97fbe4ad87de59172a54a3ee1 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 25 Aug 2026 14:04:08 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?= =?UTF-8?q?=ED=96=A5=EC=83=81=EB=90=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=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=B4=88=EC=A0=90=20=EC=9C=A0?= =?UTF-8?q?=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 접근 권한 관리 버튼에서 native `disabled` 속성을 제거하고 `aria-disabled="true"`를 적용하여 스크린 리더 사용자가 포커스를 이동시켜 `aria-describedby` 도움말을 읽을 수 있도록 개선했습니다. 클릭 이벤트는 `e.preventDefault()`로 차단하고 시각적 비활성 상태는 CSS로 유지했습니다. --- .jules/palette.md | 3 +++ frontend/src/components/modals/ExportModal.test.tsx | 5 ++++- frontend/src/components/modals/ExportModal.tsx | 3 ++- frontend/src/styles.css | 4 +++- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index bd0f73248..fe725c963 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -57,3 +57,6 @@ ## 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-08-25 - Making Disabled Button Hints Discoverable +**Learning:** Native `disabled` attributes remove buttons from the tab order, making it impossible for screen reader users to discover helpful context provided by `aria-describedby` (e.g., explaining why a button is disabled). +**Action:** When a disabled button requires explanatory text (like an access management hint), use `aria-disabled="true"`, prevent default click behavior, and apply visually disabled styles instead of the native `disabled` attribute to maintain keyboard focusability. diff --git a/frontend/src/components/modals/ExportModal.test.tsx b/frontend/src/components/modals/ExportModal.test.tsx index bd89c5384..92f7b873c 100644 --- a/frontend/src/components/modals/ExportModal.test.tsx +++ b/frontend/src/components/modals/ExportModal.test.tsx @@ -176,8 +176,11 @@ 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'); + + accessManagementButton.focus(); + expect(accessManagementButton).toHaveFocus(); }); }); diff --git a/frontend/src/components/modals/ExportModal.tsx b/frontend/src/components/modals/ExportModal.tsx index 995393ceb..9ccda8ad9 100644 --- a/frontend/src/components/modals/ExportModal.tsx +++ b/frontend/src/components/modals/ExportModal.tsx @@ -202,7 +202,8 @@ export function ExportModal({ )}