X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/7f1521bf193b382565eb753043c161f4cb3fcda7..refs/tags/wordpress-4.5:/wp-admin/js/image-edit.js

diff --git a/wp-admin/js/image-edit.js b/wp-admin/js/image-edit.js
index 0abf6efc..ae759923 100644
--- a/wp-admin/js/image-edit.js
+++ b/wp-admin/js/image-edit.js
@@ -11,13 +11,17 @@ var imageEdit = window.imageEdit = {
 		return f | 0;
 	},
 
-	setDisabled : function(el, s) {
+	setDisabled : function( el, s ) {
+		/*
+		 * `el` can be a single form element or a fieldset. Before #28864, the disabled state on
+		 * some text fields  was handled targeting $('input', el). Now we need to handle the
+		 * disabled state on buttons too so we can just target `el` regardless if it's a single
+		 * element or a fieldset because when a fieldset is disabled, its descendants are disabled too.
+		 */
 		if ( s ) {
-			el.removeClass('disabled');
-			$('input', el).removeAttr('disabled');
+			el.removeClass( 'disabled' ).prop( 'disabled', false );
 		} else {
-			el.addClass('disabled');
-			$('input', el).prop('disabled', true);
+			el.addClass( 'disabled' ).prop( 'disabled', true );
 		}
 	},
 
@@ -56,14 +60,18 @@ var imageEdit = window.imageEdit = {
 		var wait = $('#imgedit-wait-' + postid);
 
 		if ( toggle ) {
-			wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
+			wait.fadeIn( 'fast' );
 		} else {
 			wait.fadeOut('fast');
 		}
 	},
 
 	toggleHelp : function(el) {
-		$( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
+		var $el = $( el );
+		$el
+			.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
+			.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
+
 		return false;
 	},
 
@@ -165,9 +173,26 @@ var imageEdit = window.imageEdit = {
 			'rand': t.intval(Math.random() * 1000000)
 		};
 
-		img = $('<img id="image-preview-' + postid + '" />')
-			.on('load', function() {
-				var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
+		img = $( '<img id="image-preview-' + postid + '" alt="" />' )
+			.on( 'load', { history: data.history }, function( event ) {
+				var max1, max2,
+					parent = $( '#imgedit-crop-' + postid ),
+					t = imageEdit,
+					historyObj;
+
+				if ( '' !== event.data.history ) {
+					historyObj = JSON.parse( event.data.history );
+					// If last executed action in history is a crop action.
+					if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
+						/*
+						 * A crop action has completed and the crop button gets disabled
+						 * ensure the undo button is enabled.
+						 */
+						t.setDisabled( $( '#image-undo-' + postid) , true );
+						// Move focus to the undo button to avoid a focus loss.
+						$( '#image-undo-' + postid ).focus();
+					}
+				}
 
 				parent.empty().append(img);
 
@@ -305,7 +330,14 @@ var imageEdit = window.imageEdit = {
 		var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
 			btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
 
-		btn.prop('disabled', true);
+		/*
+		 * Instead of disabling the button, which causes a focus loss and makes screen
+		 * readers announce "unavailable", return if the button was already clicked.
+		 */
+		if ( btn.hasClass( 'button-activated' ) ) {
+			return;
+		}
+
 		spin.addClass( 'is-active' );
 
 		data = {
@@ -318,12 +350,15 @@ var imageEdit = window.imageEdit = {
 		dfd = $.ajax({
 			url:  ajaxurl,
 			type: 'post',
-			data: data
+			data: data,
+			beforeSend: function() {
+				btn.addClass( 'button-activated' );
+			}
 		}).done(function( html ) {
 			elem.html( html );
 			head.fadeOut('fast', function(){
 				elem.fadeIn('fast');
-				btn.removeAttr('disabled');
+				btn.removeClass( 'button-activated' );
 				spin.removeClass( 'is-active' );
 			});
 		});
@@ -337,6 +372,8 @@ var imageEdit = window.imageEdit = {
 		this.initCrop(postid, img, parent);
 		this.setCropSelection(postid, 0);
 		this.toggleEditor(postid, 0);
+		// Editor is ready, move focus to the first focusable element.
+		$( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
 	},
 
 	initCrop : function(postid, image, parent) {
@@ -429,7 +466,10 @@ var imageEdit = window.imageEdit = {
 		// In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
 		else {
 			$('#image-editor-' + postid).fadeOut('fast', function() {
-				$('#media-head-' + postid).fadeIn('fast');
+				$( '#media-head-' + postid ).fadeIn( 'fast', function() {
+					// Move focus back to the Edit Image button. Runs also when saving.
+					$( '#imgedit-open-btn-' + postid ).focus();
+				});
 				$(this).empty();
 			});
 		}
@@ -453,9 +493,9 @@ var imageEdit = window.imageEdit = {
 
 	addStep : function(op, postid, nonce) {
 		var t = this, elem = $('#imgedit-history-' + postid),
-		history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
-		undone = $('#imgedit-undone-' + postid),
-		pop = t.intval(undone.val());
+			history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
+			undone = $( '#imgedit-undone-' + postid ),
+			pop = t.intval( undone.val() );
 
 		while ( pop > 0 ) {
 			history.pop();
@@ -516,10 +556,14 @@ var imageEdit = window.imageEdit = {
 		elem.val(pop);
 		t.refreshEditor(postid, nonce, function() {
 			var elem = $('#imgedit-history-' + postid),
-			history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
+				history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
 
 			t.setDisabled($('#image-redo-' + postid), true);
 			t.setDisabled(button, pop < history.length);
+			// When undo gets disabled, move focus to the redo button to avoid a focus loss.
+			if ( history.length === pop ) {
+				$( '#image-redo-' + postid ).focus();
+			}
 		});
 	},
 
@@ -535,6 +579,10 @@ var imageEdit = window.imageEdit = {
 		t.refreshEditor(postid, nonce, function() {
 			t.setDisabled($('#image-undo-' + postid), true);
 			t.setDisabled(button, pop > 0);
+			// When redo gets disabled, move focus to the undo button to avoid a focus loss.
+			if ( 0 === pop ) {
+				$( '#image-undo-' + postid ).focus();
+			}
 		});
 	},