🎨 Palette: [UX improvement] 모달 내 일반적인 삭제 버튼에 컨텍스트를 제공하는 aria-label 추가#618
🎨 Palette: [UX improvement] 모달 내 일반적인 삭제 버튼에 컨텍스트를 제공하는 aria-label 추가#618seonghobae wants to merge 1 commit into
Conversation
- EditTableModal 및 EditEdgeModal 내의 포괄적인 '삭제' 버튼에 명시적인 aria-label 부여 - 관련된 테스트 수정
|
👋 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
Note
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
Adds contextual aria-label strings to “Delete” buttons inside modals so screen readers announce what entity (table/relationship) will be deleted, and updates tests accordingly.
Changes:
- Add dynamic
aria-labelto the delete button inEditTableModal. - Add dynamic
aria-labelto the delete button inEditEdgeModal. - Update RTL tests to assert the new accessible button names; document the learning in
.Jules/palette.md.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/components/modals/ModalCoverage.test.tsx | Updates queries to match the new contextual accessible names. |
| frontend/src/components/modals/EditTableModal.tsx | Adds a contextual aria-label for the table delete action. |
| frontend/src/components/modals/EditEdgeModal.tsx | Adds a contextual aria-label for the relationship delete action. |
| .Jules/palette.md | Documents the accessibility/testing practice introduced by the PR. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| **Action:** When designing modals or popups containing inputs, always use a `<form>` element to wrap the content, handle the `onSubmit` event (calling `e.preventDefault()`), and set the primary confirmation button to `type="submit"` to enable seamless Enter-key submission for keyboard users. | ||
|
|
||
| ## 2024-07-22 - Contextual aria-labels for generic actions | ||
| **Learning:** Generic action buttons like "Delete" or "Cancel" in complex models lack context for screen reader users, especially when they refer to specific dynamic entities (e.g., specific tables or relationships). Adding dynamic text like `${title} 삭제` significantly improves clarity without breaking visual brevity. Furthermore, explicitly targeting the dynamic `aria-label` text inside tests with `getByRole('button', { name: '...' })` provides robust assertions that confirm both accessibility and functionality. |
💡 What: The UX enhancement added: Added dynamic and contextual
aria-labels to generic delete buttons inEditTableModal.tsxandEditEdgeModal.tsx.🎯 Why: The user problem it solves: "Delete" buttons inside modals were too generic for screen reader users and provided poor context for which specific entity was being deleted. Now the screen readers properly read what specific table or relationship is being deleted.
📸 Before/After: N/A (Non-visual DOM a11y change, functionality tested via Playwright).
♿ Accessibility: Enhanced screen reader UX by providing contextual accessible names (e.g., "public.users 테이블 삭제").
PR created automatically by Jules for task 16905352483017494128 started by @seonghobae