Skip to content

🎨 Palette: [UX improvement] ν–₯μƒλœ 접근성을 μœ„ν•œ λΉ„ν™œμ„±ν™” λ²„νŠΌ 초점 μœ μ§€ #985

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
seonghobae wants to merge 1 commit into from
+12 βˆ’3
Closed

🎨 Palette: [UX improvement] ν–₯μƒλœ 접근성을 μœ„ν•œ λΉ„ν™œμ„±ν™” λ²„νŠΌ 초점 μœ μ§€ #985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
5 changes: 4 additions & 1 deletion frontend/src/components/modals/ExportModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
3 changes: 2 additions & 1 deletion frontend/src/components/modals/ExportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,8 @@ export function ExportModal({
)}
<button
type="button"
disabled
aria-disabled={true}
onClick={(e) => e.preventDefault()}
Comment on lines +205 to +206

@devin-ai-integration devin-ai-integration Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ“ Info: aria-disabled button remains activatable

Switching from native disabled to aria-disabled leaves the button focusable and clickable; onClick={(e) => e.preventDefault()} is a no-op since the button has no real action. Harmless now, but any future handler must itself early-return, as aria-disabled does not block activation.

Open in Devin Review

Was this helpful? React with πŸ‘ or πŸ‘Ž to provide feedback.

aria-describedby="share-export-access-hint"
className="exportModal__disabledHintButton"
>
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -729,7 +729,9 @@ button:disabled {
}

.exportModal__disabledHintButton {
opacity: 0.9;
opacity: 0.6;
cursor: not-allowed;
color: var(--color-disabled);
Comment on lines +732 to +734

@devin-ai-integration devin-ai-integration Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟑 Changelog not updated for user-visible change

CLAUDE.md and CONTRIBUTING.md require user-visible frontend changes to be recorded in CHANGELOG.md and frontend/CHANGELOG.md. This PR alters the 'μ ‘κ·Ό 관리' button behavior and its visual style (opacity 0.9β†’0.6, cursor, color) but adds no entry to either file.

Prompt for agents 
This PR makes a user-visible frontend change (the 'μ ‘κ·Ό 관리' disabled button now uses aria-disabled and its visual style changed) but does not update the changelogs. Per CLAUDE.md and CONTRIBUTING.md, add a corresponding entry under the [Unreleased] section of both CHANGELOG.md and frontend/CHANGELOG.md (in Korean) describing the accessibility improvement to the disabled button focus/hint behavior.
Open in Devin Review

Was this helpful? React with πŸ‘ or πŸ‘Ž to provide feedback.

Comment on lines +732 to +734

@devin-ai-integration devin-ai-integration Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ“ Info: Visual change despite 'no visual change' claim

The PR description states no visual change, but .exportModal__disabledHintButton opacity drops from 0.9 to 0.6 (plus new cursor/color), so the button appears more faded than before.

Open in Devin Review

Was this helpful? React with πŸ‘ or πŸ‘Ž to provide feedback.

}

.exportModal__hint {
Expand Down
Loading