Replace Toast notifications with inline feedback for "Code Copied" action

[ShubhamOulkar]

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:

1. Timing: They often disappear too quickly for some users to read.
2. Focus/Screen Readers: Assistive technology often misses them if focus isn't managed perfectly, leaving the user unsure if the action succeeded.
3. 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.

Ref Slack message

[avivkeller]

Example: The copy icon could briefly change to a "Checkmark" icon, or the text "Copy" could change to "Copied!".

To be honest, this would make the bundle a bit smaller, I imagine, since we no longer need to pass a Toast provider.

[ShubhamOulkar]

We need one state, activity component and useEffectEvent timer to toggle states. 🤔 WDYT?

[bmuenzenmeyer]

Example: The copy icon could briefly change to a "Checkmark" icon, or the text "Copy" could change to "Copied!".

i could have this wrong but i thought changing the text like this was less accessible. The radix toast uses aria-live features

[ovflowd]

Has there been any progress here?

[ovflowd]

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]

I'm working on this!