[docs] Improve the demo copy experience

[theswerd]

Summary 💡

When I click to copy code or links to code I want a snackbar to pop up to let me know the text has been copied.

Examples 🌈

When I press copy I want a to see a snackbar to let me know text has been copied.

Motivation 🔦

It annoys me when I can't tell if I have successfully copied or not.

This would solve that problem.

[mbrookes]

Thanks for raising the issue. It's been a while, but I seem to recall that this was left out as a shortcut when the copy capability was first added, with the intention to add it later. That clearly never happened! 🙂

Would you like to work on it?

[theswerd]

Definitely, I'll get right on it!

[oliviertassinari]

I think that it's the type of cases where we could benefit from #18098.

@mbrookes I think that it would be interesting to look at the usage stats of the action on GA. Maybe we should move it to the main action bar, in which case the copied feedback might be better implemented with a tooltip.

[mbrookes]

"copy" accounts for 1.1% of demo events, compared to "expand" at 82.5%. (Being buried in the menu may partly account for that.) "GitHub" has a similar number of events despite being more visible, so there is some justification for swapping these.

Do you have an example of a tooltip being used for a notification? It feels to me like it breaks expectations. (Funnily enough, GA uses a snackbar for this.)

[oliviertassinari]

• 💯 for swapping the Copy (to the toolbar) and GitHub (to the menu) actions. The copy has the potential to be used way more frequently.
• By tooltip, I have the following experience in mind (taken from Algolia):
  
  However, a snackbar could work too. I remember @eps1lon saying that changing a tooltip title might not be the best for a11y.

[mbrookes]

I believe it might be possible to make the title change accessible using an ARIA live region, but I'm not sure what screen readers read again if the live-region is on an element used for "aria-describedby" (i.e. does it also repeat the button information?).

Arguably when the tooltip title changes to "copied" it no longer describes the button, but as the user has already heard the original description at that point, so that shouldn't be a problem.

[oliviertassinari]

Right, I think that we can ignore the a11y part of this from the equation. The copied feedback is a nice attention to the detail. So Tooltip or Snackbar, sounds both great.

[mbrookes]

@theswerd I'll let you cast the deciding vote with your PR 😄

[theswerd]

@mbrookes Sorry for the wait, for some reason I thought I had already responded to this. I believe we should use a Snackbar because it will be more visible on mobile.

I just submitted a pr that will do it!

[oliviertassinari]

Thanks for resuming this effort :).

8% of the traffic is mobile on the documentation. We hide the demo actions, people can't copy on mobile, so we can completely ignore mobile for this concern.

Does it change the tradeoff?

[theswerd]

Personally I prefer Snackbars over Tooltips, but @oliviertassinari's idea also seems good so I'll defer to you

[mbrookes]

Given no clear winner, I think there's an argument for using the Snackbar, as it the more "Material" way of doing it. Also, since you've already created the PR based on Snackbar...

[oliviertassinari]

It sounds great 👍

[theswerd]

Checkout my pr #19291

…

On Sun, Jan 19, 2020 at 12:11 PM Olivier Tassinari ***@***.***> wrote: It sounds great 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19112>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJEI4PTHJXZG6NYEKEPFNG3Q6SXWTANCNFSM4KDNZH2Q> .

[mbrookes]

@oliviertassinari The other benefit is that it supports a notification when copying links to the source (in the menu) that have no tooltip. @theswerd has already implemented this.