Skip to content
Permalink
Browse files

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 WordPress/gutenberg#15354

Props afercia.
Merges [45376] to the 5.2 branch.
Fixes #47113.

git-svn-id: https://develop.svn.wordpress.org/branches/5.2@45840 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
SergeyBiryukov committed Aug 19, 2019
1 parent b44a106 commit f743dc6c4ee028fbb6517a0c7f6a91d8e1cbc14d
Showing with 25 additions and 17 deletions.
  1. +5 −2 src/js/media/views/focus-manager.js
  2. +3 −6 src/js/media/views/uploader/status.js
  3. +17 −9 src/wp-includes/css/media-views.css
@@ -14,8 +14,11 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr
'keydown': 'constrainTabbing'
},

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();
},
/**
* @param {Object} event
@@ -117,18 +117,15 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
}), { at: 0 });
},

/**
* @param {Object} event
*/
dismiss: function( event ) {
dismiss: function() {
var errors = this.views.get('.upload-errors');

event.preventDefault();

if ( errors ) {
_.invoke( errors, 'remove' );
}
wp.Uploader.errors.reset();
// Keep focus within the modal after the dismiss button gets removed from the DOM.
this.controller.modal.focusManager.focus();
}
});

@@ -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;
}

0 comments on commit f743dc6

Please sign in to comment.
You can’t perform that action at this time.