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:
parent
9785381a8c
commit
74c0d658b4
|
@ -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
|
@ -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
|
@ -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
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue