Skip to content

Fix: accessible copy to clipboard button#376

Merged
rami-elementor merged 1 commit intocore-betafrom
a11y-copy-to-clipboard
May 4, 2026
Merged

Fix: accessible copy to clipboard button#376
rami-elementor merged 1 commit intocore-betafrom
a11y-copy-to-clipboard

Conversation

@rami-elementor
Copy link
Copy Markdown
Contributor

@rami-elementor rami-elementor commented May 1, 2026

This pull request improves the user experience and accessibility of the CopyToClipboardButton component by adding status messages and ensuring that screen readers can announce the result of copy actions.

Accessibility and user feedback improvements:

  • Added a STATUS_MESSAGES record to map each copy status to a user-friendly, localized message, such as "Copied to clipboard." or "Failed to copy to clipboard. Please try again." (src/js/components/common/CopyToClipboardButton.tsx)
  • Updated the button to display a visually hidden <span> with appropriate ARIA roles (alert or status) and aria-live attributes, allowing screen readers to announce the copy result. The message updates based on the current status. (src/js/components/common/CopyToClipboardButton.tsx)
  • Ensured that error messages are reset to the initial state after a timeout when a copy error occurs, providing clear feedback for repeated attempts. (src/js/components/common/CopyToClipboardButton.tsx)

@rami-elementor rami-elementor requested a review from a team May 3, 2026 06:24
@rami-elementor rami-elementor merged commit e7a4578 into core-beta May 4, 2026
8 checks passed
@rami-elementor rami-elementor deleted the a11y-copy-to-clipboard branch May 4, 2026 08:50
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.

2 participants