Changeset 45376

Timestamp:

05/22/2019 07:32:22 PM (6 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.

Location:

trunk/src

Files:

• js/media/views/focus-manager.js (modified) (1 diff)
• js/media/views/uploader/status.js (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (3 diffs)

trunk/src/js/media/views/focus-manager.js

@@ -15 +15 @@
     },
 
-    focus: function() { // Reset focus on first left menu item
-        this.$('.media-menu-item').first().focus();
+    /**
+     * Moves focus to the first visible menu item in the modal.
+     */
+    focus: function() {
+        this.$( '.media-menu-item' ).filter( ':visible' ).first().focus();
     },
     /**

trunk/src/js/media/views/uploader/status.js

@@ -118 +118 @@
     },
 
-    /**
-     * @param {Object} event
-     */
-    dismiss: function( event ) {
+    dismiss: function() {
         var errors = this.views.get('.upload-errors');
-
-        event.preventDefault();
 
         if ( errors ) {
@@ -130 +125 @@
         }
         wp.Uploader.errors.reset();
+        // Keep focus within the modal after the dismiss button gets removed from the DOM.
+        this.controller.modal.focusManager.focus();
     }
 });

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;