Add copy link button for public shareable links

[mietcls]

Story

Add copy link button for public shareable links.

Context

During user testing it was clear people had trouble with copying the shareable link at once. We need to make it more accessible.

Success criteria

• [ ] You can use the button when viewing the folder overview
• [ ] You can use the button when viewing the folder detail page
• [ ] You receive a success message inside the button for 3 seconds

Implementation suggestion

Overview: http://localhost:3000/deliver/spaces/ibl.html

Detail: http://localhost:3000/deliver/spaces/folders/folder-name.html

Button

We would employ one big button that has all the information, which is also readable to screen readers.

Overview page

<button class="btn btn-outline-secondary">
    <i class="if if-copy text-primary"></i>
    <span class="sr-only">Copy public shareable link</span>
    <span class="btn-text border-left pl-3 ml-3">https://deliver.ugent.be/ibl/098R4IUHWAFRS9820904-folder-name.html</span>
</button>

Detail page

<button class="btn btn-outline-secondary">
    <i class="if if-copy text-primary"></I>
    <span class="btn-text text-primary">Copy public shareable link</span>
    <span class="btn-text border-left pl-4 ml-4">https://deliver.ugent.be/ibl/098R4IUHWAFRS9820904-folder-name.html</span>
</button>

Success

Overview page

State changes:

• button layout changes: btn-outline-secondary becomes btn-outline-success
• icon changes: <i class="if if-copy text-primary"></i> becomes <i class="if if-check text-success"></I>
• label changes: <span class="sr-only">Copy public shareable link</span> becomes <span aria-live="polite">Copied link</span>

<button class="btn btn-outline-success">
    <i class="if if-check text-success"></i>
    <span aria-live="polite">Copied link</span>
    <span class="btn-text border-left pl-3 ml-3">https://deliver.ugent.be/ibl/098R4IUHWAFRS9820904-folder-name.html</span>
</button>

Detail page

The alternative state is hidden in the comments.

State changes:

• icon changes: <i class="if if-copy text-primary"></i> becomes <i class="if if-check text-success"></i>
• label changes: <span class="btn-text text-primary">Copy public shareable link</span> becomes <span class="btn-text text-success" aria-live="polite">Copied link</span>

<button class="btn btn-outline-secondary">
  <i class="if if-check text-success"></I>
  <span class="btn-text text-success" aria-live="polite">Copied link</span>
  <span class="btn-text border-left pl-4 ml-4">https://deliver.ugent.be/ibl/098R4IUHWAFRS9820904-folder-name.html</span>
</button>

TODO

Figure out aria live button state changing (Miet)

[nicolasfranck]

Notes:

• Changing the text changes the width of the button, and so pushes content to the side. That feels a bit quirky. Also, I can imagine that the green state must be restored to its original state after some time? That would make it expand and shrink again.
• The button layout limits its usage: clipboard requires browser permissions, and if someone has disabled these, or clipboard does not work at all due to browser support, there is no way to copy the link as the link text is also part of the button. Do it like github does? i.e. put a copy button next to a (selectable!) text input field. That way there is an alternative

[nics]

I also like the github one better

[mietcls]

There are limitations in the current UI components we have that make it impossible to create it the way GitHub did it in a decent way (re: table issues etc). I could spend more time in creating it like that. This was the quickest and most durable solution for now that works in all contexts where the button is used.