WordPress.org

Make WordPress Core


Ignore:
Timestamp:
06/30/2020 01:14:05 PM (10 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media-template.php

    r47808 r48232  
    501501                <# } #>
    502502                <span class="setting" data-setting="url">
    503                     <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
    504                     <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
     503                    <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
     504                    <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
     505                    <span class="copy-to-clipboard-container">
     506                        <button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-two-column-copy-link"><?php _e( 'Copy URL' ); ?></button>
     507                        <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
     508                    </span>
    505509                </span>
    506510                <div class="attachment-compat"></div>
     
    688692        </span>
    689693        <span class="setting" data-setting="url">
    690             <label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
    691             <input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
     694            <label for="attachment-details-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
     695            <input type="text" class="attachment-details-copy-link" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
     696            <div class="copy-to-clipboard-container">
     697                <button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-copy-link"><?php _e( 'Copy URL' ); ?></button>
     698                <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
     699            </div>
    692700        </span>
    693701    </script>
Note: See TracChangeset for help on using the changeset viewer.