vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-04 04:34:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Improve the media views upload Dismiss Errors button.

Browse Source 
- makes the Dismiss Errors button visible in the media views inline uploader
- avoids a focus loss when activating the Dismiss Errors button

See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354

Fixes #47113.


git-svn-id: https://develop.svn.wordpress.org/trunk@45376 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-05-22 19:32:22 +00:00
parent 6491746559
commit 1a1031b466
3 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1235,26 +1235,33 @@
}
.media-uploader-status .upload-dismiss-errors {
position: absolute;
top: -3px;
right: -5px;
padding: 5px;
border-radius: 50%;
transition: none;
text-decoration: none;
}
.media-sidebar .media-uploader-status .upload-dismiss-errors {
position: absolute;
top: -10px;
right: -10px;
padding: 10px;
transition: none;
.uploader-inline .media-uploader-status .upload-dismiss-errors {
top: 2px;
right: 2px;
}
.media-sidebar .media-uploader-status .upload-dismiss-errors:before {
.media-uploader-status .upload-dismiss-errors::before {
content: "\f153";
display: block;
font: normal 16px/1 dashicons;
color: #72777c;
}
.media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before,
.media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before {
.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
color: #606a73;
}
.errors.media-uploader-status .upload-dismiss-errors:hover::before,
.errors.media-uploader-status .upload-dismiss-errors:focus::before {
color: #c00;
}
@@ -1267,6 +1274,7 @@
}
.uploader-inline .upload-errors .upload-error {
padding: 12px 30px;
background-color: #fbeaea;
box-shadow: none;
}