Changeset 48232 for trunk/src/wp-includes/media-template.php

Timestamp:

06/30/2020 01:14:05 PM (3 years ago)

Author:

afercia

Message:

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

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.

File:

• trunk/src/wp-includes/media-template.php (modified) (2 diffs)

trunk/src/wp-includes/media-template.php

@@ -501 +501 @@
                 <# } #>
                 <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>
@@ -688 +692 @@
         </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>