Add accessible indication of successful copy to clipboard

[bollwyvl]

Problem

A number of commands and other UI elements allow for copying... something to the user's (or lab's internal) clipboard, but there is no consistent visual (or announceable) indication that it was successful.

Some examples:

• copy cell(s)
• copy mathjax context menu command
• debugger copy variables

ctrl+c of text selected by the caret (either with mouse or keyboard) seems to generally not be an reported activity, so this is really concerned more with non-traditionally selected things.

Proposed Solution

Some alternatives:

• add some temporary styling that indicates that a region has been copied.
  • add a jp-mod-copied utility class that uses some minimally-reflowing CSS transition (e.g. outline) to indicate that a copy has successfully occurred, then disappear, without a lot of flicker
    • potentially distinguish between lab's clipboard and the browser clipboard, perhaps with dashed outline
  • not sure about announcing this for screen readers
• show a "toast"
• probably already fairly accessible (haven't checked)
• but would drive attention away from what was actually copied
• show a tooltip
  • also fine, and has well-established accessibility patterns, but doesn't show the extent as well as one might like

Additional context

Considering this over #14102 where I'm trying to emulate some of the MathJax patterns for discoverability/ownership of rendered diagrams (e.g. in MIME outputs).

[krassowski]

Piggy backing here because a way to show a transient toast would be also useful for:

• JupyterLab 4.0 migration jupyter-lsp/jupyterlab-lsp#949 (in current draft the notifications just spam the notification centre which is not very good UX)
• Add readonly indicator #14600

I did not find any docs on how to achieve this with notifications yet. @fcollonval do you remember if transient toast notifications are already possible in core, or would we need to implement it?

Though for the most part I think we should only show toast when there is no place to show transient clipboard success animation in-place (next to the thing which is being copied).

[bollwyvl]

For the record: I'm _against_ out-of-line toast, status bar, etc. as being the _only_ thing. They annoy me personally (I turn them off whenever possible), and probably aren't very accessible. Tooltip _could_ be reasonable, but does a poor job of showing the extent of what was copied... an accessible status message could include e.g. the number of bytes, I suppose, but "fake" clipboard stuff like cells might just say "3 cells".

[bollwyvl]

Some additional thoughts:

Specifically in the notebook case (which wouldn't help e.g. equations in a rendered markdown document): another area which can't be hidden is the prompt area... while it's not guaranteed to be very big (one line, about 70px) it could house temporary icon-sized indicators, which would be closer to the thing of interest.

All MainAreaWidgets have a toolbar area (even if it's often empty and collapsed). In the notebook case, this is already very busy, and can collapse (unexpectedly) to the ellipsis, but could show a bit more content (if temporarily), but would run the risk of reflowing the toolbar... and potentially triggering the ellipsis condition. A larger-than-icon use of real estate would be poor, for the most part, unless it was a gateway to some kind of "history of my commands" view, which resulted in... something (e.g. a save/export for command macros). Way out of scope here, as teasing out the context of user commands (and filtering out the boring ones) would be... really hard.

[fcollonval]

I did not find any docs on how to achieve this with notifications yet. @fcollonval do you remember if transient toast notifications are already possible in core, or would we need to implement it?

In the notification center, no; it is basically a logger. But yes, the toast pop up has a autoClose attribute to support transient notification.

[GabrielaVives]

I find that particularly when copying and pasting cells, the absence of any visual cue indicating the success or failure of these actions leads to confusion.
I have found myself doubting and not knowing if it had worked, so I will repeat the action or copy/paste something randomly just to see if it works.

The most commun feature for this would be having a tooltip-sized toaster appear on one of the borders of the notebook (to be discussed where). I would imagine something like this:

I would expect it to disappear by itself after a couple of seconds.