a11y(export): evaluate focusable disabled-state discovery

.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.
+## 2023-10-27 - Disabled Button Accessibility with Tooltips
+**Learning:** Native `disabled` attributes on buttons prevent them from receiving keyboard focus. If a disabled button relies on a tooltip or `aria-describedby` hint (e.g., explaining *why* it is disabled, like missing permissions), screen reader users navigating by keyboard will never discover the hint because the button is skipped in the tab order.
+**Action:** When a disabled button has an explanatory hint, do not use the native `disabled` attribute. Instead, use `aria-disabled="true"`, apply disabled visual styles using CSS attribute selectors (e.g., `button[aria-disabled="true"]`), and manually prevent the action in the `onClick` handler (`e.preventDefault()`). This keeps the button in the focus order so assistive technologies can read the hint, while still semantically and functionally disabling it.

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

@@ -176,7 +176,9 @@ describe('ExportModal', () => {
 
     expect(screen.getByText('접근 권한 관리는 프로젝트 권한 설정에서 처리합니다.')).toBeInTheDocument();
     const accessManagementButton = screen.getByRole('button', { name: '접근 관리' });
-    expect(accessManagementButton).toBeDisabled();
+    expect(accessManagementButton).toHaveAttribute('aria-disabled', 'true');
+    accessManagementButton.focus();
+    expect(accessManagementButton).toHaveFocus();
     expect(accessManagementButton).toHaveAttribute('aria-describedby', 'share-export-access-hint');
     expect(accessManagementButton).not.toHaveAttribute('title');
   });

frontend/src/components/modals/ExportModal.tsx

@@ -202,7 +202,8 @@ export function ExportModal({
               )}
               <button
                 type="button"
-                disabled
+                aria-disabled={true}
+                onClick={(e) => e.preventDefault()}
                 aria-describedby="share-export-access-hint"
                 className="exportModal__disabledHintButton"
               >

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);