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.


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

View File

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

View File

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