WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 2 days ago

#48463 new defect (bug)

Copy link button in media

Reported by: theolg Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.2
Component: Media Keywords: needs-design has-patch
Focuses: ui, accessibility, javascript Cc:
PR Number:

Description

Hello,

I can't select all media link for a media with the button "Copy link".

https://i.ibb.co/1JsVLQN/media.jpg

It's only appears on Chrome but not Firefox.

I can reproduce on a new install with Chrome 77 on windows 10.

I have no javascript errors on console.

Thanks,

Attachments (3)

48463.diff (2.2 KB) - added by vabrashev 9 days ago.
48463.patch (3.8 KB) - added by sajjad67 9 days ago.
Feature to auto copy Media Link to clipboard when clicked 'Copy Link' label
48463-2.patch (8.7 KB) - added by sajjad67 3 days ago.
Patch with lot's of improvement of click event and event message plus button design

Download all attachments as: .zip

Change History (21)

#1 @audrasjb
3 weeks ago

  • Focuses ui accessibility added
  • Keywords needs-patch good-first-bug added
  • Version 5.2.4 deleted

#2 @audrasjb
3 weeks ago

Hi @theolg, welcome to WordPress Trac and thank you for opening this ticket!

Adding good-first-bug as I guess it could be a nice first contribution for new contributors.
I'll try to reproduce the issue on my side.

#3 @afercia
3 weeks ago

the button "Copy link"

Worth noting it's not a button. It's just a <label> element.

Related: #41612. Previously, the label text was just "URL", which was pretty confusing. Then changed to "Copy Link". Then it was agreed the text change doesn't actually solve the usability issue and it is worth exploring a different pattern with an actual button to copy the URL value. See ticket:41612#comment:48

If I'm not mistaken, no follow up ticket has been created yet so this ticket is more than welcome :) Not sure it's a good first bug, as anything related to the media views isn't that simple.

#4 @theolg
3 weeks ago

I try to find in /wp-includes/js/media-views.js how this focus and select is generated but I think it's over my capacitites

#5 @markdubois
2 weeks ago

I confirm this is a problem for me as well. I have sites with many images. In the past (several versions ago), one could copy the link to the specific image. Now, when one cursors over the words (Copy Link), the cursor changes and you "think" you can click and copy the link. However, when you do so, nothing happens (no information is actually copied to the clipboard). My solution is to click into the actual URL, then use CMD+a (Ctrl+a on Windows) to select the entire URL and CMD+c (Ctrl+c on Windows) to copy the URL to the clipboard. On sites with many images, this adds time to my workflow (which could easily be resolved by making this a button). For example, the text could indicate the field is a link and there could be a button on the right of the link which would allow one to copy the content/ URL.

I have just confirmed this on a MacBook AIR running MacOC 10.15, Brave browser Version 0.69.132 Chromium: 77.0.3865.90 (Official Build) (64-bit).

#6 @afercia
2 weeks ago

Besides the wording, which should be improved, worth also considering that core uses this CSS:

cursor: pointer;

for all <label> elements. Much like for buttons, see #47171, this may be confusing as it alters the default browsers style for labels and buttons.

@vabrashev
9 days ago

#7 @sajjad67
9 days ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Version set to 5.2

48463.patch is a tested patch with feature of Select Entire Input Text & Copy it to the clipboard. Browser support for Chrome 43+, Firefox 42+, Safari 10+, Edge and Internet Explorer 10+

@sajjad67
9 days ago

Feature to auto copy Media Link to clipboard when clicked 'Copy Link' label

This ticket was mentioned in Slack in #core by sajjad67. View the logs.


9 days ago

#9 @SergeyBiryukov
8 days ago

  • Milestone changed from Awaiting Review to 5.4

This ticket was mentioned in Slack in #core by sajjad67. View the logs.


7 days ago

#11 @afercia
5 days ago

  • Focuses javascript added
  • Keywords needs-patch added; good-first-bug has-patch needs-testing removed

@vabrashev @sajjad67 thanks for the patches! A few important considerations:

  • the copy link needs to work in all the media views, for example also in the "Add Media" modal and everywhere the URL input field is displayed
  • I'd suggest to explore building a new "copy button" view: it would also allow to avoid too many elements targeted with JS, which is sort of an anti-pattern in backbone.js
  • most importantly: the new view would be reusable in other places
  • I'd recommend to not make the <label> element clickable, as that's not the expected behavior
  • in #41612 it was mentioned a better approach would be: entirely remove the input field and just use a "Copy link" button
  • at that point the attachment URL could be displayed in plain text as there's no need for a readonly input field
  • the strings need to be translatable: see Sorry, unable to copy, same for the CSS generated content: Link Copied! (so I'm afraid we can't use the CSS approach)

This ticket was mentioned in Slack in #core by sajjad67. View the logs.


5 days ago

#13 @afercia
5 days ago

  • Keywords needs-design added

This ticket was mentioned in Slack in #design by sajjad67. View the logs.


5 days ago

This ticket was mentioned in Slack in #design by sajjad67. View the logs.


4 days ago

@sajjad67
3 days ago

Patch with lot's of improvement of click event and event message plus button design

This ticket was mentioned in Slack in #core by sajjad67. View the logs.


3 days ago

This ticket was mentioned in Slack in #design by sajjad67. View the logs.


3 days ago

#18 @sajjad67
2 days ago

  • Keywords has-patch added; needs-patch removed
Note: See TracTickets for help on using tickets.