Ticket #47136: 47136.4.diff

src/js/_enqueues/lib/image-edit.js

@@ -136 +136 @@
                                 return false;
                         }
                 });
+
+                $( document ).on( 'image-editor-image-loaded', this.focusManager );
         },
 
         /**
@@ -621 +623 @@
                 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 );
+        },
+
+        /**
          * Initializes the cropping tool.
          *
          * @since 2.9.0

src/wp-admin/css/media.css

@@ -1224 +1224 @@
                 float: none;
                 width: auto;
                 max-width: none;
+                padding-bottom: 16px;
         }
 
         .copy-to-clipboard-container .success {

src/wp-admin/includes/image-edit.php

@@ -48 +48 @@
         <div class="imgedit-wrap wp-clearfix">
         <div id="imgedit-panel-<?php echo $post_id; ?>">
 
+        <div class="imgedit-panel-content wp-clearfix">
+                <?php echo $note; ?>
+                <div class="imgedit-menu wp-clearfix">
+                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
+                        <?php
+
+                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
+                        if ( wp_image_editor_supports(
+                                array(
+                                        'mime_type' => get_post_mime_type( $post_id ),
+                                        'methods'   => array( 'rotate' ),
+                                )
+                        ) ) {
+                                $note_no_rotate = '';
+                                ?>
+                                <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
+                                <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
+                                <?php
+                        } else {
+                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
+                                ?>
+                                <button type="button" class="imgedit-rleft button disabled" disabled></button>
+                                <button type="button" class="imgedit-rright button disabled" disabled></button>
+                        <?php } ?>
+
+                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
+                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
+
+                        <br class="imgedit-undo-redo-separator" />
+                        <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
+                        <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
+                        <?php echo $note_no_rotate; ?>
+                </div>
+
+                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
+                <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
+                <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
+                <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
+                <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
+                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
+
+                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
+                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand( 1, 99999 ); ?>" alt="" />
+                </div>
+
+                <div class="imgedit-submit">
+                        <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
+                        <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
+                </div>
+        </div>
+
         <div class="imgedit-settings">
         <div class="imgedit-group">
         <div class="imgedit-group-top">
@@ -195 +246 @@
 
         </div>
 
-        <div class="imgedit-panel-content wp-clearfix">
-                <?php echo $note; ?>
-                <div class="imgedit-menu wp-clearfix">
-                        <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
-                        <?php
-
-                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
-                        if ( wp_image_editor_supports(
-                                array(
-                                        'mime_type' => get_post_mime_type( $post_id ),
-                                        'methods'   => array( 'rotate' ),
-                                )
-                        ) ) {
-                                $note_no_rotate = '';
-                                ?>
-                                <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
-                                <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
-                                <?php
-                        } else {
-                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
-                                ?>
-                                <button type="button" class="imgedit-rleft button disabled" disabled></button>
-                                <button type="button" class="imgedit-rright button disabled" disabled></button>
-                        <?php } ?>
-
-                        <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
-                        <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
-
-                        <br class="imgedit-undo-redo-separator" />
-                        <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
-                        <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
-                        <?php echo $note_no_rotate; ?>
-                </div>
-
-                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
-                <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
-                <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
-                <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
-                <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
-                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
-
-                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
-                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand( 1, 99999 ); ?>" alt="" />
-                </div>
-
-                <div class="imgedit-submit">
-                        <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
-                        <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
-                </div>
         </div>
-
-        </div>
         <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
         <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e( "There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor." ); ?></div>
         </div>

src/wp-includes/script-loader.php

@@ -1465 +1465 @@
                         )
                 );
 
-                $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',