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 ) {
+
+ +
+ + get_post_mime_type( $post_id ), + 'methods' => array( 'rotate' ), + ) + ) ) { + $note_no_rotate = ''; + ?> + + + ' . __( 'Image rotation is not supported by your web host.' ) . '

'; + ?> + + + + + + + +
+ + + +
+ + + + + + + + +
+ +
+ +
+ + )" disabled="disabled" class="button button-primary imgedit-submit-btn" value="" /> +
+
+
@@ -195,57 +246,6 @@ function wp_image_editor( $post_id, $msg = false ) {
-
- -
- - get_post_mime_type( $post_id ), - 'methods' => array( 'rotate' ), - ) - ) ) { - $note_no_rotate = ''; - ?> - - - ' . __( 'Image rotation is not supported by your web host.' ) . '

'; - ?> - - - - - - - -
- - - -
- - - - - - - - -
- -
- -
- - )" disabled="disabled" class="button button-primary imgedit-submit-btn" value="" /> -
-
-
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 3083692405..8ad7adec8c 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1465,7 +1465,7 @@ function wp_default_scripts( $scripts ) { ) ); - $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'json2', 'imgareaselect' ), false, 1 ); + $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'json2', 'imgareaselect' ), false, 1 ); did_action( 'init' ) && $scripts->localize( 'image-edit', 'imageEditL10n',