🎨 Palette: Improve accessibility of ClassificationPreview action buttons#189
🎨 Palette: Improve accessibility of ClassificationPreview action buttons#189thebearwithabite wants to merge 1 commit intomasterfrom
Conversation
…icationPreview - Added `aria-label` and `title` to the icon-only 'Skip' button. - Added `aria-hidden="true"` to Lucide icons (`Loader2`, `Check`, `RefreshCw`, `X`) within buttons to prevent redundant screen reader announcements. - Added `focus-visible` Tailwind classes to action buttons to ensure clear visible focus rings during keyboard navigation. - Recorded a new learning entry in `.jules/palette.md` regarding icon-only button accessibility. Co-authored-by: thebearwithabite <216692431+thebearwithabite@users.noreply.github.com>
|
👋 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. |
🎨 Palette UX/A11y Enhancement
This PR focuses on a micro-UX improvement for the
ClassificationPreviewcomponent, specifically targeting screen reader and keyboard navigation accessibility.💡 What:
aria-label="Skip organization"to the icon-only close (X) button.aria-hidden="true"to the decorative Lucide React icons within the action buttons (Loader2,Check,RefreshCw,X).focus-visible:ring-2(and related outline/offset utilities) to all action buttons..jules/palette.mdto document the learning.🎯 Why:
Xicon, meaning a screen reader would announce it unhelpfully as "button". Adding thearia-labelprovides necessary context. Addingaria-hiddento the SVG icons prevents the screen reader from trying to read out the SVG paths or duplicate the button's text label.ClassificationPreviewmodal. Thefocus-visibleclasses ensure a clear ring appears.📸 Before/After:
♿ Accessibility:
PR created automatically by Jules for task 7480254534820878181 started by @thebearwithabite