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.

Built from https://develop.svn.wordpress.org/trunk@45376


git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2019-05-22 19:33:53 +00:00
parent 9785381a8c
commit 74c0d658b4
7 changed files with 48 additions and 32 deletions

View File

@ -1235,26 +1235,33 @@
}
.media-uploader-status .upload-dismiss-errors {
position: absolute;
top: -3px;
left: -5px;
padding: 5px;
border-radius: 50%;
transition: none;
text-decoration: none;
}
.media-sidebar .media-uploader-status .upload-dismiss-errors {
position: absolute;
top: -10px;
left: -10px;
padding: 10px;
transition: none;
.uploader-inline .media-uploader-status .upload-dismiss-errors {
top: 2px;
left: 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;
}

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

View File

@ -4516,8 +4516,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
@ -5165,18 +5168,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();
}
});

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.3-alpha-45375';
$wp_version = '5.3-alpha-45376';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.