<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[48375] trunk/src: Accessibility: Media: Improve accessibility of the status and error messages in the Image Editor.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/48375">48375</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/48375","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>afercia</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2020-07-07 13:43:43 +0000 (Tue, 07 Jul 2020)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/20491">#20491</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/47147">#47147</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueueslibimageeditjs">trunk/src/js/_enqueues/lib/image-edit.js</a></li>
<li><a href="#trunksrcwpadminincludesajaxactionsphp">trunk/src/wp-admin/includes/ajax-actions.php</a></li>
<li><a href="#trunksrcwpadminincludesimageeditphp">trunk/src/wp-admin/includes/image-edit.php</a></li>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueueslibimageeditjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/lib/image-edit.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/lib/image-edit.js 2020-07-07 13:41:30 UTC (rev 48374)
+++ trunk/src/js/_enqueues/lib/image-edit.js 2020-07-07 13:43:43 UTC (rev 48375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5,9 +5,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @output wp-admin/js/image-edit.js
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* global imageEditL10n, ajaxurl, confirm */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* global ajaxurl, confirm */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> (function($) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var __ = wp.i18n.__;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Contains all the methods to initialise and control the image editor.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -137,7 +138,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( document ).on( 'image-editor-image-loaded', this.focusManager );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( document ).on( 'image-editor-ui-ready', this.focusManager );
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -144,21 +145,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Toggles the wait/load icon in the editor.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 2.9.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 5.5.0 Added the triggerUIReady parameter.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @memberof imageEdit
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {number} postid The post ID.
- * @param {number} toggle Is 0 or 1, fades the icon in then 1 and out when 0.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @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.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- toggleEditor : function(postid, toggle) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ toggleEditor: function( postid, toggle, triggerUIReady ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var wait = $('#imgedit-wait-' + postid);
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( toggle ) {
</span><span class="cx" style="display: block; padding: 0 10px"> wait.fadeIn( 'fast' );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wait.fadeOut('fast');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wait.fadeOut( 'fast', function() {
+ if ( triggerUIReady ) {
+ $( document ).trigger( 'image-editor-ui-ready' );
+ }
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -402,10 +409,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> t.toggleEditor(postid, 0);
</span><span class="cx" style="display: block; padding: 0 10px"> })
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .on('error', function() {
- $('#imgedit-crop-' + postid).empty().append('<div class="error"><p>' + imageEditL10n.error + '</p></div>');
- t.toggleEditor(postid, 0);
- })
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .on( 'error', function() {
+ var errorMessage = __( 'Could not load the preview image. Please reload the page and try again.' );
+
+ $( '#imgedit-crop-' + postid )
+ .empty()
+ .append( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
+
+ t.toggleEditor( postid, 0, true );
+ wp.a11y.speak( errorMessage, 'assertive' );
+ } )
</ins><span class="cx" style="display: block; padding: 0 10px"> .attr('src', ajaxurl + '?' + $.param(data));
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -466,14 +479,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> t.toggleEditor(postid, 1);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $.post(ajaxurl, data, function(r) {
- $('#image-editor-' + postid).empty().append(r);
- t.toggleEditor(postid, 0);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $.post( ajaxurl, data, function( response ) {
+ $( '#image-editor-' + postid ).empty().append( response.data.html );
+ t.toggleEditor( postid, 0, true );
</ins><span class="cx" style="display: block; padding: 0 10px"> // Refresh the attachment model so that changes propagate.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( t._view ) {
</span><span class="cx" style="display: block; padding: 0 10px"> t._view.refresh();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } ).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 );
+ }
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -511,27 +534,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'do': 'save'
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> // Post the image edit data to the backend.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $.post(ajaxurl, data, function(r) {
- // Read the response.
- var ret = JSON.parse(r);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $.post( ajaxurl, data, function( response ) {
+ // If a response is returned, close the editor and show an error.
+ if ( response.data.error ) {
+ $( '#imgedit-response-' + postid )
+ .html( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + response.data.error + '</p></div>' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // If a response is returned, close the editor and show an error.
- if ( ret.error ) {
- $('#imgedit-response-' + postid).html('<div class="error"><p>' + ret.error + '</p></div>');
</del><span class="cx" style="display: block; padding: 0 10px"> imageEdit.close(postid);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp.a11y.speak( response.data.error );
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ret.fw && ret.fh ) {
- $('#media-dims-' + postid).html( ret.fw + ' × ' + ret.fh );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( response.data.fw && response.data.fh ) {
+ $( '#media-dims-' + postid ).html( response.data.fw + ' × ' + response.data.fh );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ret.thumbnail ) {
- $('.thumbnail', '#thumbnail-head-' + postid).attr('src', ''+ret.thumbnail);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( response.data.thumbnail ) {
+ $( '.thumbnail', '#thumbnail-head-' + postid ).attr( 'src', '' + response.data.thumbnail );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ret.msg ) {
- $('#imgedit-response-' + postid).html('<div class="updated"><p>' + ret.msg + '</p></div>');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( response.data.msg ) {
+ $( '#imgedit-response-' + postid )
+ .html( '<div class="notice notice-success" tabindex="-1" role="alert"><p>' + response.data.msg + '</p></div>' );
+
+ wp.a11y.speak( response.data.msg );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( self._view ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -559,8 +585,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> open : function( postid, nonce, view ) {
</span><span class="cx" style="display: block; padding: 0 10px"> this._view = view;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
- btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var dfd, data,
+ elem = $( '#image-editor-' + postid ),
+ head = $( '#media-head-' + postid ),
+ btn = $( '#imgedit-open-btn-' + postid ),
+ spin = btn.siblings( '.spinner' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Instead of disabling the button, which causes a focus loss and makes screen
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -579,7 +608,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'do': 'open'
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- dfd = $.ajax({
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ dfd = $.ajax( {
</ins><span class="cx" style="display: block; padding: 0 10px"> url: ajaxurl,
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'post',
</span><span class="cx" style="display: block; padding: 0 10px"> data: data,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -586,16 +615,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> beforeSend: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> btn.addClass( 'button-activated' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }).done(function( html ) {
- elem.html( html );
- head.fadeOut('fast', function(){
- elem.fadeIn('fast');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } ).done( function( response ) {
+ var errorMessage;
+
+ if ( '-1' === response ) {
+ errorMessage = __( 'Could not load the preview image.' );
+ elem.html( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
+ }
+
+ 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' );
+ }
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> btn.removeClass( 'button-activated' );
</span><span class="cx" style="display: block; padding: 0 10px"> spin.removeClass( 'is-active' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> // Initialise the Image Editor now that everything is ready.
</span><span class="cx" style="display: block; padding: 0 10px"> imageEdit.init( postid );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return dfd;
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -622,9 +665,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> this.initCrop(postid, img, parent);
</span><span class="cx" style="display: block; padding: 0 10px"> this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': 0, 'y2': 0, 'width': img.innerWidth(), 'height': img.innerHeight() } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this.toggleEditor(postid, 0);
-
- $( document ).trigger( 'image-editor-image-loaded' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this.toggleEditor( postid, 0, true );
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -636,12 +677,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> focusManager: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Editor is ready, move focus to the first focusable element. Since the
- * DOM update is pretty large, the timeout helps browsers update their
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * 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
</ins><span class="cx" style="display: block; padding: 0 10px"> * accessibility tree to better support assistive technologies.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> setTimeout( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '.imgedit-wrap' ).find( ':tabbable:first' ).focus();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var elementToSetFocusTo = $( '.notice[role="alert"]' );
+
+ if ( ! elementToSetFocusTo.length ) {
+ elementToSetFocusTo = $( '.imgedit-wrap' ).find( ':tabbable:first' );
+ }
+
+ elementToSetFocusTo.focus();
</ins><span class="cx" style="display: block; padding: 0 10px"> }, 100 );
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadminincludesajaxactionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/ajax-actions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/ajax-actions.php 2020-07-07 13:41:30 UTC (rev 48374)
+++ trunk/src/wp-admin/includes/ajax-actions.php 2020-07-07 13:43:43 UTC (rev 48375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2607,8 +2607,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> switch ( $_POST['do'] ) {
</span><span class="cx" style="display: block; padding: 0 10px"> case 'save':
</span><span class="cx" style="display: block; padding: 0 10px"> $msg = wp_save_image( $attachment_id );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $msg = wp_json_encode( $msg );
- wp_die( $msg );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $msg->error ) {
+ wp_send_json_error( $msg );
+ }
+
+ wp_send_json_success( $msg );
</ins><span class="cx" style="display: block; padding: 0 10px"> break;
</span><span class="cx" style="display: block; padding: 0 10px"> case 'scale':
</span><span class="cx" style="display: block; padding: 0 10px"> $msg = wp_save_image( $attachment_id );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2618,8 +2621,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> break;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ob_start();
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_image_editor( $attachment_id, $msg );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp_die();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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,
+ )
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span></span></pre></div>
<a id="trunksrcwpadminincludesimageeditphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/image-edit.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/image-edit.php 2020-07-07 13:41:30 UTC (rev 48374)
+++ trunk/src/wp-admin/includes/image-edit.php 2020-07-07 13:43:43 UTC (rev 48375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -38,9 +38,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $msg ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $msg->error ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $note = "<div class='error'><p>$msg->error</p></div>";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $note = "<div class='notice notice-error' tabindex='-1' role='alert'><p>$msg->error</p></div>";
</ins><span class="cx" style="display: block; padding: 0 10px"> } elseif ( isset( $msg->msg ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $note = "<div class='updated'><p>$msg->msg</p></div>";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $note = "<div class='notice notice-success' tabindex='-1' role='alert'><p>$msg->msg</p></div>";
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -103,7 +103,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Scale Image' ); ?></h2>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help">
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -141,7 +141,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help imgedit-restore">
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -164,7 +164,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Image Crop' ); ?></h2>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help">
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -209,7 +209,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group imgedit-applyto">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-group-top">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="imgedit-help">
</span><span class="cx" style="display: block; padding: 0 10px"> <p><?php _e( 'You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/media-views.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/media-views.css 2020-07-07 13:41:30 UTC (rev 48374)
+++ trunk/src/wp-includes/css/media-views.css 2020-07-07 13:43:43 UTC (rev 48375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1998,7 +1998,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-modal .imgedit-wrap div.updated {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
+.media-modal .imgedit-wrap .notice {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2020-07-07 13:41:30 UTC (rev 48374)
+++ trunk/src/wp-includes/script-loader.php 2020-07-07 13:43:43 UTC (rev 48375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1376,14 +1376,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $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.' ),
- )
- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $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' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'set-post-thumbnail', "/wp-admin/js/set-post-thumbnail$suffix.js", array( 'jquery' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->localize(
</span></span></pre>
</div>
</div>
</body>
</html>