🎨 Palette: [UX improvement] Enhance accessibility of TextSharePopover buttons#295
🎨 Palette: [UX improvement] Enhance accessibility of TextSharePopover buttons#295hadsern wants to merge 1 commit into
Conversation
… buttons - Added `aria-label` attributes to the three icon-only share buttons so screen readers can interpret them appropriately. - Added `aria-hidden="true"` to the inner `<svg>` elements to prevent redundant announcements. - Introduced `focus-visible` utility classes (`focus-visible:ring-2 focus-visible:ring-frc-gold focus-visible:outline-none rounded`) to provide clear visual feedback during keyboard navigation. Co-authored-by: hadsern <5723837+hadsern@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. |
💡 What:
Enhanced the accessibility and keyboard navigation of the
TextSharePopovercomponent.🎯 Why:
The three icon-only buttons (Copy text, Share on X, Copy page link) lacked descriptive ARIA labels, making them invisible or confusing to screen reader users. They also lacked clear visual focus states, making them difficult to use for keyboard-only users. Redundant SVG announcements were also an issue.
📸 Before/After:
Before:
After:
ring-frc-gold).♿ Accessibility:
aria-labelto the Copy button (matches itstitle).aria-labels to the X and Link buttons.aria-hidden="true"to all inner<svg>elements.focus-visibleclasses to all three buttons to ensure a visible focus ring on keyboard focus, without interfering with mouse click states.PR created automatically by Jules for task 12889663548340390446 started by @hadsern