Changeset 45376 for trunk/src/wp-includes/css

Timestamp:

05/22/2019 07:32:22 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve the media views upload Dismiss Errors button.

• 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.

File:

• trunk/src/wp-includes/css/media-views.css (modified) (3 diffs)

trunk/src/wp-includes/css/media-views.css

@@ -1236 +1236 @@
 
 .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;
-}
-
-.media-sidebar .media-uploader-status .upload-dismiss-errors:before {
+.uploader-inline .media-uploader-status .upload-dismiss-errors {
+    top: 2px;
+    right: 2px;
+}
+
+.media-uploader-status .upload-dismiss-errors::before {
     content: "\f153";
     display: block;
@@ -1254 +1257 @@
 }
 
-.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;
 }
@@ -1268 +1275 @@
 
 .uploader-inline .upload-errors .upload-error {
+    padding: 12px 30px;
     background-color: #fbeaea;
     box-shadow: none;