sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Improve the media views upload Dismiss Errors button.

Browse Source 
- 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@45376 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-05-22 19:32:22 +00:00
parent 6491746559
commit 1a1031b466
3 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/media/views/focus-manager.js
View File

@ -14,8 +14,11 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr
'keydown': 'constrainTabbing' '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 * @param {Object} event

9
src/js/media/views/uploader/status.js
View File

@ -117,18 +117,15 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
}), { at: 0 }); }), { at: 0 });
}, },
/** dismiss: function() {
* @param {Object} event
*/
dismiss: function( event ) {
var errors = this.views.get('.upload-errors'); var errors = this.views.get('.upload-errors');
event.preventDefault();
if ( errors ) { if ( errors ) {
_.invoke( errors, 'remove' ); _.invoke( errors, 'remove' );
} }
wp.Uploader.errors.reset(); wp.Uploader.errors.reset();
// Keep focus within the modal after the dismiss button gets removed from the DOM.
this.controller.modal.focusManager.focus();
} }
}); });

26
src/wp-includes/css/media-views.css
View File

@ -1235,26 +1235,33 @@
} }
.media-uploader-status .upload-dismiss-errors { .media-uploader-status .upload-dismiss-errors {
position: absolute;
top: -3px;
right: -5px;
padding: 5px;
border-radius: 50%;
transition: none;
text-decoration: none; text-decoration: none;
} }
.media-sidebar .media-uploader-status .upload-dismiss-errors { .uploader-inline .media-uploader-status .upload-dismiss-errors {
position: absolute; top: 2px;
top: -10px; right: 2px;
right: -10px;
padding: 10px;
transition: none;
} }
.media-sidebar .media-uploader-status .upload-dismiss-errors:before { .media-uploader-status .upload-dismiss-errors::before {
content: "\f153"; content: "\f153";
display: block; display: block;
font: normal 16px/1 dashicons; font: normal 16px/1 dashicons;
color: #72777c; color: #72777c;
} }
.media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before, .uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
.media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before { color: #606a73;
}
.errors.media-uploader-status .upload-dismiss-errors:hover::before,
.errors.media-uploader-status .upload-dismiss-errors:focus::before {
color: #c00; color: #c00;
} }
@ -1267,6 +1274,7 @@
} }
.uploader-inline .upload-errors .upload-error { .uploader-inline .upload-errors .upload-error {
padding: 12px 30px;
background-color: #fbeaea; background-color: #fbeaea;
box-shadow: none; box-shadow: none;
} }