Repository navigation
Replace Toast notifications with inline feedback for "Code Copied" action #8357
Description
Description
Problem
Currently, when a user clicks the "Copy" button on a code block, the website triggers a global toast notification at the bottom of the screen to indicate success.
While visually common, this pattern introduces significant accessibility and usability issues. Recent discussions (referenced below) highlight that toast notifications are often problematic because:
- Timing: They often disappear too quickly for some users to read.
- Focus/Screen Readers: Assistive technology often misses them if focus isn't managed perfectly, leaving the user unsure if the action succeeded.
- Cognitive Load: They appear far away from the user's current locus of attention (the code block), making them easy to overlook.
Reference: Primer Design System: Toast Accessibility
Proposed Solution
We should remove the Toast dependency for the "Copy" action and instead implement inline feedback.
When the user clicks the copy button:
- The feedback should appear inside the code block header, directly adjacent to or replacing the button itself.
- Example: The copy icon could briefly change to a "Checkmark" icon, or the text "Copy" could change to "Copied!".
- Benefit: This keeps the feedback within the user's current field of vision and is more logically associated with the trigger action.
Activity
avivkeller commentedon Nov 21, 2025
To be honest, this would make the bundle a bit smaller, I imagine, since we no longer need to pass a Toast provider.
ShubhamOulkar commentedon Nov 21, 2025
We need one state, activity component and useEffectEvent timer to toggle states. 🤔 WDYT?
bmuenzenmeyer commentedon Nov 21, 2025
i could have this wrong but i thought changing the text like this was less accessible. The radix toast uses aria-live features
ovflowd commentedon Dec 25, 2025
Has there been any progress here?
ovflowd commentedon Dec 25, 2025
I feel that for the code boxes we can simply replace the text of "Copy to clipboard" to "Copied to clipboard!" and then change it back after a timeout.
cnaples79 commentedon Dec 25, 2025
I'm working on this!