WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 6 weeks ago

#37600 new defect (bug)

iOS: Readonly attachment URL is not selectable

Reported by: zodiac1978 Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.5
Component: Media Keywords: needs-patch
Focuses: ui, administration Cc:

Description

I tried to copy the URL for a image in the media section. The URL field is a "readonly" text input field.

On iOS (maybe other mobile OS too?) I just can select the viewable text and nothing more, so I can't copy the whole URL.

Attachments (2)

copy-url.png (150.0 KB) - added by melchoyce 2 years ago.
copy-media-url.png (81.4 KB) - added by melchoyce 6 weeks ago.

Download all attachments as: .zip

Change History (19)

#1 follow-up: @ocean90
3 years ago

  • Version trunk deleted

Confirmed, but the attribute is not new in trunk.

#2 in reply to: ↑ 1 ; follow-up: @zodiac1978
3 years ago

Replying to ocean90:

Confirmed, but the attribute is not new in trunk.

It was the version on that I've seen the bug. Someone with better knowledge of the code surely can add this info. Should I better omit the version in such cases in the future?

#3 in reply to: ↑ 2 @afercia
3 years ago

Replying to zodiac1978:

Should I better omit the version in such cases in the future?

HI @zodiac1978 ideally the version should be set to the version the bug/feature was first introduced. It's not always possible to track that information though so in this case should be set to the version you're using. By the way "trunk" is used only to indicate a new issue on trunk, i.e. a regression. In doubt, leave empty :)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#5 @rianrietveld
3 years ago

  • Focuses accessibility removed

Discussed this in the wpa11y bug scrub: it seems to be an iOS problem and not a WordPress problem. Therefore we removed the focus accessibility.

Related post on Stackoverflow: http://stackoverflow.com/questions/13360314/html-how-to-make-a-readonly-textarea-copyable-in-ios-devices

#6 @zodiac1978
3 years ago

I've read the slack log and still have no clue, why this shouldn't be a accessibility ticket. Can you please elaborate?

Even if it is an exclusive iOS problem we could provide a workaround, like a "copy to clipboard" button for example.

If we should wait for iOS to fix it, the ticket can be changed to WONTFIX, I think.

#7 @afercia
3 years ago

  • Summary changed from iOS: Readonly element URL is not selectable to iOS: Readonly attachment URL is not selectable

Removing the accessibility focus just means this issue is more related to the media component and as such should be triaged and addressed by the media component maintainers. In fact, WordPress contributions are organised in several components. It also serves the purpose to keep the accessibility tickets report we use to organise and prioritise our work as clean as possible.
That said, one member of the accessibility team volunteered to test this issue on a couple of iOS devices and will report on this ticket as soon as he has a chance.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#9 @iamjolly
3 years ago

Hello, I've reviewed this using Safari on iOS devices (iPhone and iPad) as well as other browsers on iOS (Chrome) and the desktop.

The inability to select the entire text, if it overflows the field, in a disabled text input area is an iOS "feature." Since the URL value isn't editable, yet needs to be copiable, I'd recommend either:

  1. Adding a copy button next to or under the field like @zodiac1978 suggested, or
  2. Using plain text without a text field for output to the page.

For the second recommendation, the text will be selectable, as it will not overflow the container if it is allowed to wrap.

Since so many people are using mobile and iOS devices to manage their sites, this would be a nice fix/enhancement to add.

#10 @joemcgill
3 years ago

  • Focuses ui added
  • Keywords needs-patch ui-feedback added
  • Milestone changed from Awaiting Review to Future Release
  • Version set to 3.5

#11 @zodiac1978
3 years ago

I don't know if 3kb for https://clipboardjs.com/ are too much for this little feature. Maybe we could just add it on iOS devices. This handy little script could be used to add a "copy to clipboard" button. The MIT license is GPL compatible.

Unfortunately the execCommand which is used by the tool is not supported by iOS, so the text is just selected and has to be copied manually. :(

So maybe we should stick with plain text and maybe some button for pre-selecting the text.
ClipboardJS is using this tool from the same author: https://github.com/zenorocha/select

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


2 years ago

@melchoyce
2 years ago

#13 @melchoyce
2 years ago

I think adding a copy button, per @zodiac1978's suggestion, makes sense — we have that on WordPress.com and it's quite helpful. (See copy-url.png).

#14 @melchoyce
2 years ago

  • Keywords needs-design added

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


13 months ago

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


6 weeks ago

#17 @melchoyce
6 weeks ago

  • Keywords ui-feedback needs-design removed

copy-media-url.png is a quick mockup using a "small" version of our core secondary button; it's inset 2px from the edges of the field, and the text size is decreased from 13px to 12px.

Note: See TracTickets for help on using tickets.