HostForge-Systems/wordpress
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.

Browse Source 
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. 
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.

Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.

Built from https://develop.svn.wordpress.org/trunk@48232


git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2020-06-30 13:16:04 +00:00
parent 91a38c62ea
commit eebf187963
20 changed files with 219 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
wp-includes/media-template.php
View File

@@ -500,8 +500,12 @@ function wp_print_media_templates() {
</span>
<# } #>
<span class="setting" data-setting="url">
<label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
<input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
<label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
<input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
<span class="copy-to-clipboard-container">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-two-column-copy-link"><?php _e( 'Copy URL' ); ?></button>
<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
</span>
</span>
<div class="attachment-compat"></div>
</div>
@@ -687,8 +691,12 @@ function wp_print_media_templates() {
<textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
</span>
<span class="setting" data-setting="url">
<label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
<input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
<label for="attachment-details-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
<input type="text" class="attachment-details-copy-link" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
<div class="copy-to-clipboard-container">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-copy-link"><?php _e( 'Copy URL' ); ?></button>
<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
</div>
</span>
</script>