From f3f7b77522833454ff3de0a6bc29ab42262c4def Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 1 Jul 2020 14:27:18 +0000 Subject: [PATCH] Accessibility: Media: Fix the Image Editor mismatching keyboard focus order and visual reading order. Swaps the DOM order of the two main columns within the admin Image Editor. When the sequence in which content is presented affects its meaning and the navigation sequences affect meaning or operation, visual order and DOM order must match. See WCAG 2.1 Success Criterion 1.3.2 Meaningful Sequence and Success Criterion 2.4.3 Focus Order. Props sabernhardt, anevins, audrasjb, afercia. Fixes #47136. git-svn-id: https://develop.svn.wordpress.org/trunk@48265 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/lib/image-edit.js | 24 ++++++- src/wp-admin/css/media.css | 1 + src/wp-admin/includes/image-edit.php | 102 +++++++++++++-------------- src/wp-includes/script-loader.php | 2 +- 4 files changed, 75 insertions(+), 54 deletions(-) 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',