diff --git a/src/js/_enqueues/lib/image-edit.js b/src/js/_enqueues/lib/image-edit.js index 016981255a..16a634aa6c 100644 --- a/src/js/_enqueues/lib/image-edit.js +++ b/src/js/_enqueues/lib/image-edit.js @@ -136,6 +136,8 @@ return false; } }); + + $( document ).on( 'image-editor-image-loaded', this.focusManager ); }, /** @@ -621,8 +623,26 @@ this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } ); this.toggleEditor(postid, 0); - // Editor is ready, move focus to the first focusable element. - $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus(); + + $( document ).trigger( 'image-editor-image-loaded' ); + }, + + /** + * Manages keyboard focus in the Image Editor user interface. + * + * @since 5.5.0 + * + * @return {void} + */ + focusManager: function() { + /* + * Editor is ready, move focus to the first focusable element. Since the + * DOM update is pretty large, the timeout helps browsers update their + * accessibility tree to better support assistive technologies. + */ + setTimeout( function() { + $( '.imgedit-wrap' ).find( ':tabbable:first' ).focus(); + }, 100 ); }, /** diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 59fd90477a..1cb1112abb 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -1224,6 +1224,7 @@ audio, video { float: none; width: auto; max-width: none; + padding-bottom: 16px; } .copy-to-clipboard-container .success { diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php index 1ae07c348e..87adb2e992 100644 --- a/src/wp-admin/includes/image-edit.php +++ b/src/wp-admin/includes/image-edit.php @@ -48,6 +48,57 @@ function wp_image_editor( $post_id, $msg = false ) {