Skip to content

🎨 Palette: inline clipboard feedback interaction - #40

Open
anaxifty wants to merge 1 commit into
mainfrom
palette/clipboard-feedback-12358096729021261142
Open

🎨 Palette: inline clipboard feedback interaction#40
anaxifty wants to merge 1 commit into
mainfrom
palette/clipboard-feedback-12358096729021261142

Conversation

@anaxifty

Copy link
Copy Markdown
Owner

💡 What:

Implemented a consistent inline feedback mechanism for all clipboard copy actions across the application.

🎯 Why:

Providing immediate inline feedback (changing button text to 'Copied!') significantly improves user confidence that a copy operation was successful, especially in addition to standard toast notifications.

📸 Before/After:

Previously, clicking a copy button only triggered a toast notification. Now, the button itself provides immediate visual confirmation:

  • Assistant message 'Copy' button changes to 'Copied!'.
  • Markdown code block 'Copy' button changes to 'Copied!'.
  • Share Modal 'Copy to Clipboard' button changes to 'Copied!' (with a 700ms delay before the modal closes).
  • Canvas 'Copy' button changes to 'Copied!'.

♿ Accessibility:

  • The aria-label of the buttons is synchronized with the 'Copied!' state to ensure screen reader users receive the updated status.
  • The original aria-label is restored after the feedback duration (2 seconds).
  • Success feedback includes role="status" and aria-live="polite" via the existing toast mechanism, while the inline update provides immediate focal confirmation.

PR created automatically by Jules for task 12358096729021261142 started by @anaxifty

Implement a consistent inline feedback mechanism for all clipboard copy actions.
- Add `copyFeedback` utility in `js/utils.js` to temporarily show 'Copied!' and update ARIA labels.
- Apply feedback to assistant message actions, markdown code blocks, Share Modal, and Canvas.
- Add closure delay to Share Modal to ensure feedback visibility.
- Record pattern in Palette journal.

Co-authored-by: anaxifty <[email protected]>
@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.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying neuraldock with  Cloudflare Pages  Cloudflare Pages

Latest commit: d4996b6
Status: ✅  Deploy successful!
Preview URL: https://1e99295b.neural-dock.pages.dev
Branch Preview URL: https://palette-clipboard-feedback-1.neural-dock.pages.dev

View logs

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