🎨 Palette: [UX improvement] Improve disabled export button accessibility#627
🎨 Palette: [UX improvement] Improve disabled export button accessibility#627seonghobae wants to merge 1 commit into
Conversation
- Replaced native `disabled` attribute with `aria-disabled="true"` on export buttons. - Added visual styling for `aria-disabled="true"` buttons in `styles.css`. - Manually prevented submission via `onClick` handler when logically disabled. - Used `aria-describedby` to semantically link the button to the reason it is disabled. - Updated `ExportModal.test.tsx` to assert on `aria-disabled` instead of `toBeDisabled()`. - Added learning to `.jules/palette.md`.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
Improves accessibility of the Export modal by keeping “disabled” export actions focusable/discoverable for keyboard and assistive-technology users via aria-disabled + aria-describedby, while preserving disabled styling.
Changes:
- Replace native
disabledon export artifact buttons witharia-disabled, and guard export execution inonClick. - Add
aria-describedbywiring from each export button to its per-row description text. - Update CSS disabled styling to also apply when
aria-disabled="true", and update tests/docs accordingly.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/styles.css | Applies disabled visual styling to button[aria-disabled="true"] in addition to button:disabled. |
| frontend/src/components/modals/ExportModal.tsx | Makes export buttons focusable while logically disabled via aria-disabled, aria-describedby, and an onClick guard. |
| frontend/src/components/modals/ExportModal.test.tsx | Updates assertions from toBeDisabled() to aria-disabled expectations for export buttons. |
| .jules/palette.md | Records the accessibility learning/action for conditionally disabled export buttons. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| onClick={(e) => { | ||
| if (artifact.disabled) { | ||
| e.preventDefault(); | ||
| } else { | ||
| artifact.onExport(); | ||
| } | ||
| }} |
| expect(screen.getByRole('button', { name: 'SQL DDL 복사' })).toHaveAttribute('aria-disabled', 'true'); | ||
| expect(screen.getByRole('button', { name: 'SVG 이미지 내보내기' })).toHaveAttribute('aria-disabled', 'true'); | ||
| expect(screen.getByRole('button', { name: 'PlantUML 내보내기' })).toHaveAttribute('aria-disabled', 'true'); | ||
| expect(screen.getByRole('button', { name: 'Mermaid 내보내기' })).toHaveAttribute('aria-disabled', 'true'); | ||
| expect(screen.getByRole('button', { name: 'DBML 내보내기' })).toHaveAttribute('aria-disabled', 'true'); |
💡 What:
Replaced the native HTML
disabledattribute on conditionally disabled export buttons (e.g. when no tables exist) witharia-disabled="true". Applied visual disabled styles, handled the logical disabling via theonClickhandler, and linked the disabled reason to the button usingaria-describedby.🎯 Why:
Using the native
disabledattribute removes the button from the tab order. This makes the button, and thereby the fact that the export option exists at all, invisible to keyboard-only users. By usingaria-disabled, the buttons remain discoverable, and thearia-describedbyprovides assistive technology users with the crucial context of why the export is currently unavailable (e.g., "먼저 테이블을 추가하세요").📸 Before/After:
♿ Accessibility:
aria-disabled.aria-describedby.PR created automatically by Jules for task 7479944236578884628 started by @seonghobae