Skip to content

🎨 Palette: [UX improvement] Enhance accessibility of TextSharePopover buttons#295

Open
hadsern wants to merge 1 commit into
v2-foundationfrom
palette-textsharepopover-a11y-12889663548340390446
Open

🎨 Palette: [UX improvement] Enhance accessibility of TextSharePopover buttons#295
hadsern wants to merge 1 commit into
v2-foundationfrom
palette-textsharepopover-a11y-12889663548340390446

Conversation

@hadsern

@hadsern hadsern commented Apr 20, 2026

Copy link
Copy Markdown
Collaborator

💡 What:

Enhanced the accessibility and keyboard navigation of the TextSharePopover component.

🎯 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:

  • Screen readers either didn't announce the buttons or tried to read raw SVG content.
  • Tabbing to the buttons provided no visual indication of focus.

After:

  • Screen readers correctly announce "Copy text" (or "Copied!"), "Share on X", and "Copy page link".
  • Tabbing to the buttons clearly shows a golden focus ring (ring-frc-gold).
  • SVGs are hidden from screen readers.

♿ Accessibility:

  • Added dynamic aria-label to the Copy button (matches its title).
  • Added static aria-labels to the X and Link buttons.
  • Added aria-hidden="true" to all inner <svg> elements.
  • Added Tailwind focus-visible classes 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

… 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>
@google-labs-jules

Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant