From ab3ce946c90a60f4c64737418c4e4e6026ddb843 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 7 Jul 2020 13:43:43 +0000 Subject: [PATCH] Accessibility: Media: Improve accessibility of the status and error messages in the Image Editor. - improves focus management by moving focus to the notices, if any, or to the first "tabbable" element - this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages - adds an ARIA role `alert` to all the notices - uses `wp.a11y.speak()` to announce messages to assistive technology - this way, all visual users will see the messages while assistive technology users will get an audible message - uses `wp.i18n` for translatable strings in `wp-admin/js/image-edit.js` Props anevins, ryanshoover, antpb, SergeyBiryukov, afercia. See #20491. Fixes #47147. git-svn-id: https://develop.svn.wordpress.org/trunk@48375 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/lib/image-edit.js | 130 +++++++++++++++++-------- src/wp-admin/includes/ajax-actions.php | 26 ++++- src/wp-admin/includes/image-edit.php | 12 +-- src/wp-includes/css/media-views.css | 3 +- src/wp-includes/script-loader.php | 10 +- 5 files changed, 122 insertions(+), 59 deletions(-) diff --git a/src/js/_enqueues/lib/image-edit.js b/src/js/_enqueues/lib/image-edit.js index 16a634aa6c..cc9c8a67a6 100644 --- a/src/js/_enqueues/lib/image-edit.js +++ b/src/js/_enqueues/lib/image-edit.js @@ -5,9 +5,10 @@ * @output wp-admin/js/image-edit.js */ - /* global imageEditL10n, ajaxurl, confirm */ + /* global ajaxurl, confirm */ (function($) { + var __ = wp.i18n.__; /** * Contains all the methods to initialise and control the image editor. @@ -137,28 +138,34 @@ } }); - $( document ).on( 'image-editor-image-loaded', this.focusManager ); + $( document ).on( 'image-editor-ui-ready', this.focusManager ); }, /** * Toggles the wait/load icon in the editor. * * @since 2.9.0 + * @since 5.5.0 Added the triggerUIReady parameter. * * @memberof imageEdit * - * @param {number} postid The post ID. - * @param {number} toggle Is 0 or 1, fades the icon in then 1 and out when 0. + * @param {number} postid The post ID. + * @param {number} toggle Is 0 or 1, fades the icon in when 1 and out when 0. + * @param {boolean} triggerUIReady Whether to trigger a custom event when the UI is ready. Default false. * * @return {void} */ - toggleEditor : function(postid, toggle) { + toggleEditor: function( postid, toggle, triggerUIReady ) { var wait = $('#imgedit-wait-' + postid); if ( toggle ) { wait.fadeIn( 'fast' ); } else { - wait.fadeOut('fast'); + wait.fadeOut( 'fast', function() { + if ( triggerUIReady ) { + $( document ).trigger( 'image-editor-ui-ready' ); + } + } ); } }, @@ -402,10 +409,16 @@ t.toggleEditor(postid, 0); }) - .on('error', function() { - $('#imgedit-crop-' + postid).empty().append('

' + imageEditL10n.error + '

'); - t.toggleEditor(postid, 0); - }) + .on( 'error', function() { + var errorMessage = __( 'Could not load the preview image. Please reload the page and try again.' ); + + $( '#imgedit-crop-' + postid ) + .empty() + .append( '' ); + + t.toggleEditor( postid, 0, true ); + wp.a11y.speak( errorMessage, 'assertive' ); + } ) .attr('src', ajaxurl + '?' + $.param(data)); }, /** @@ -466,14 +479,24 @@ } t.toggleEditor(postid, 1); - $.post(ajaxurl, data, function(r) { - $('#image-editor-' + postid).empty().append(r); - t.toggleEditor(postid, 0); + $.post( ajaxurl, data, function( response ) { + $( '#image-editor-' + postid ).empty().append( response.data.html ); + t.toggleEditor( postid, 0, true ); // Refresh the attachment model so that changes propagate. if ( t._view ) { t._view.refresh(); } - }); + } ).done( function( response ) { + // Whether the executed action was `scale` or `restore`, the response does have a message. + if ( response && response.data.message.msg ) { + wp.a11y.speak( response.data.message.msg ); + return; + } + + if ( response && response.data.message.error ) { + wp.a11y.speak( response.data.message.error ); + } + } ); }, /** @@ -511,27 +534,30 @@ 'do': 'save' }; // Post the image edit data to the backend. - $.post(ajaxurl, data, function(r) { - // Read the response. - var ret = JSON.parse(r); - + $.post( ajaxurl, data, function( response ) { // If a response is returned, close the editor and show an error. - if ( ret.error ) { - $('#imgedit-response-' + postid).html('

' + ret.error + '

'); + if ( response.data.error ) { + $( '#imgedit-response-' + postid ) + .html( '' ); + imageEdit.close(postid); + wp.a11y.speak( response.data.error ); return; } - if ( ret.fw && ret.fh ) { - $('#media-dims-' + postid).html( ret.fw + ' × ' + ret.fh ); + if ( response.data.fw && response.data.fh ) { + $( '#media-dims-' + postid ).html( response.data.fw + ' × ' + response.data.fh ); } - if ( ret.thumbnail ) { - $('.thumbnail', '#thumbnail-head-' + postid).attr('src', ''+ret.thumbnail); + if ( response.data.thumbnail ) { + $( '.thumbnail', '#thumbnail-head-' + postid ).attr( 'src', '' + response.data.thumbnail ); } - if ( ret.msg ) { - $('#imgedit-response-' + postid).html('

' + ret.msg + '

'); + if ( response.data.msg ) { + $( '#imgedit-response-' + postid ) + .html( '' ); + + wp.a11y.speak( response.data.msg ); } if ( self._view ) { @@ -559,8 +585,11 @@ open : function( postid, nonce, view ) { this._view = view; - var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid), - btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner'); + var dfd, data, + elem = $( '#image-editor-' + postid ), + head = $( '#media-head-' + postid ), + btn = $( '#imgedit-open-btn-' + postid ), + spin = btn.siblings( '.spinner' ); /* * Instead of disabling the button, which causes a focus loss and makes screen @@ -579,23 +608,37 @@ 'do': 'open' }; - dfd = $.ajax({ + dfd = $.ajax( { url: ajaxurl, type: 'post', data: data, beforeSend: function() { btn.addClass( 'button-activated' ); } - }).done(function( html ) { - elem.html( html ); - head.fadeOut('fast', function(){ - elem.fadeIn('fast'); + } ).done( function( response ) { + var errorMessage; + + if ( '-1' === response ) { + errorMessage = __( 'Could not load the preview image.' ); + elem.html( '' ); + } + + if ( response.data && response.data.html ) { + elem.html( response.data.html ); + } + + head.fadeOut( 'fast', function() { + elem.fadeIn( 'fast', function() { + if ( errorMessage ) { + $( document ).trigger( 'image-editor-ui-ready' ); + } + } ); btn.removeClass( 'button-activated' ); spin.removeClass( 'is-active' ); - }); + } ); // Initialise the Image Editor now that everything is ready. imageEdit.init( postid ); - }); + } ); return dfd; }, @@ -622,9 +665,7 @@ this.initCrop(postid, img, parent); this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } ); - this.toggleEditor(postid, 0); - - $( document ).trigger( 'image-editor-image-loaded' ); + this.toggleEditor( postid, 0, true ); }, /** @@ -636,12 +677,19 @@ */ 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 + * Editor is ready. Move focus to one of the admin alert notices displayed + * after a user action or 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(); + var elementToSetFocusTo = $( '.notice[role="alert"]' ); + + if ( ! elementToSetFocusTo.length ) { + elementToSetFocusTo = $( '.imgedit-wrap' ).find( ':tabbable:first' ); + } + + elementToSetFocusTo.focus(); }, 100 ); }, diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php index 2f426133f2..b821c0e04c 100644 --- a/src/wp-admin/includes/ajax-actions.php +++ b/src/wp-admin/includes/ajax-actions.php @@ -2607,8 +2607,11 @@ function wp_ajax_image_editor() { switch ( $_POST['do'] ) { case 'save': $msg = wp_save_image( $attachment_id ); - $msg = wp_json_encode( $msg ); - wp_die( $msg ); + if ( $msg->error ) { + wp_send_json_error( $msg ); + } + + wp_send_json_success( $msg ); break; case 'scale': $msg = wp_save_image( $attachment_id ); @@ -2618,8 +2621,25 @@ function wp_ajax_image_editor() { break; } + ob_start(); wp_image_editor( $attachment_id, $msg ); - wp_die(); + $html = ob_get_clean(); + + if ( $msg->error ) { + wp_send_json_error( + array( + 'message' => $msg, + 'html' => $html, + ) + ); + } + + wp_send_json_success( + array( + 'message' => $msg, + 'html' => $html, + ) + ); } /** diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php index 87adb2e992..1363f00ae7 100644 --- a/src/wp-admin/includes/image-edit.php +++ b/src/wp-admin/includes/image-edit.php @@ -38,9 +38,9 @@ function wp_image_editor( $post_id, $msg = false ) { if ( $msg ) { if ( isset( $msg->error ) ) { - $note = "

$msg->error

"; + $note = ""; } elseif ( isset( $msg->msg ) ) { - $note = "

$msg->msg

"; + $note = ""; } } @@ -103,7 +103,7 @@ function wp_image_editor( $post_id, $msg = false ) {

- +

@@ -141,7 +141,7 @@ function wp_image_editor( $post_id, $msg = false ) {
-

+

- +

@@ -209,7 +209,7 @@ function wp_image_editor( $post_id, $msg = false ) {

- +

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index be42cb7e18..40ab95a7bb 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1998,7 +1998,8 @@ display: block; } -.media-modal .imgedit-wrap div.updated { +.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */ +.media-modal .imgedit-wrap .notice { margin: 0; margin-bottom: 16px; } diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 825f48f754..a7a19aa8e7 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1376,14 +1376,8 @@ function wp_default_scripts( $scripts ) { ) ); - $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', - array( - 'error' => __( 'Could not load the preview image. Please reload the page and try again.' ), - ) - ); + $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'json2', 'imgareaselect', 'wp-a11y' ), false, 1 ); + $scripts->set_translations( 'image-edit' ); $scripts->add( 'set-post-thumbnail', "/wp-admin/js/set-post-thumbnail$suffix.js", array( 'jquery' ), false, 1 ); did_action( 'init' ) && $scripts->localize(