vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-04 17:20:07 +00:00
Code Issues 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@48232 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2020-06-30 13:14:05 +00:00
parent cc4767cec0
commit 36a39ff333
8 changed files with 153 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/wp-includes/css/buttons.css
View File

@@ -354,6 +354,11 @@ TABLE OF CONTENTS:
margin-bottom: 4px;
}
/* Copy attachment URL button in the legacy edit media page. */
.wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
margin-bottom: 0;
}
#media-upload.wp-core-ui .button {
padding: 0 10px 1px;
min-height: 24px;

40
src/wp-includes/css/media-views.css
View File

@@ -457,6 +457,26 @@
font-size: 12px;
}
.media-sidebar .copy-to-clipboard-container,
.attachment-details .copy-to-clipboard-container {
flex-wrap: wrap;
margin-top: 10px;
margin-left: calc( 35% - 1px );
padding-top: 10px;
}
/* Needs high specificity. */
.attachment-details .attachment-info .copy-to-clipboard-container {
float: none;
}
.media-sidebar .copy-to-clipboard-container .success,
.attachment-details .copy-to-clipboard-container .success {
padding: 0;
min-height: 0;
text-align: left;
}
.compat-item label span {
text-align: right;
}
@@ -2539,6 +2559,18 @@
padding: 8px 2px 2px;
}
/* Needs high specificity. */
.media-sidebar .setting .copy-to-clipboard-container,
.attachment-details .attachment-info .copy-to-clipboard-container {
margin-left: 0;
padding-top: 0;
}
.media-sidebar .setting .copy-attachment-url,
.attachment-details .attachment-info .copy-attachment-url {
margin: 0 1px;
}
.media-sidebar .setting .value,
.attachment-details .setting .value {
float: none;
@@ -2712,12 +2744,16 @@
.media-frame-toolbar .media-toolbar {
bottom: -54px;
}
}
@media screen and (max-width: 782px) {
.mode-grid .attachments-browser .media-toolbar-primary {
display: block;
}
.media-sidebar .copy-to-clipboard-container .success,
.attachment-details .copy-to-clipboard-container .success {
font-size: 14px;
line-height: 2.71428571;
}
}
/* Responsive on portrait and landscape */