Accessibility: Make sortable meta boxes non sortable when there are no locations they can be dragged to.

Depending on the amount of meta boxes and the layout settings under Screen Options, sortable meta boxes may not be actually sortable.
In these cases, jQuery UI sortable needs to be disabled and the user interface shouldn't use a CSS `cursor: move`.

The use of consistent and relevant cursors may be important for users who have a cognitive disability, since cursors give a visual clue as to an element's functionality. Using the move cursor for elements which cannot be moved may be confusing or counter-intuitive for users.

Props adamsilverstein, antpb, anevins.
Fixes #47131.


git-svn-id: https://develop.svn.wordpress.org/trunk@46250 602fd350-edb4-49c9-b593-d223f7449a82

2 files changed, 37 insertions, 7 deletions

diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js
index 2fc0c38828..049b7de2e0 100644
--- a/src/js/_enqueues/admin/common.js
+++ b/src/js/_enqueues/admin/common.js
@@ -1274,6 +1274,8 @@ $document.ready( function() {
 		init: function() {
 			var self = this;
 
+			this.maybeDisableSortables = this.maybeDisableSortables.bind( this );
+
 			// Modify functionality based on custom activate/deactivate event
 			$document.on( 'wp-responsive-activate.wp-responsive', function() {
 				self.activate();
@@ -1313,13 +1315,31 @@ $document.ready( function() {
 			$document.on( 'wp-window-resized.wp-responsive', $.proxy( this.trigger, this ) );
 
 			// This needs to run later as UI Sortable may be initialized later on $(document).ready().
-			$window.on( 'load.wp-responsive', function() {
-				var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
+			$window.on( 'load.wp-responsive', this.maybeDisableSortables );
+			$document.on( 'postbox-toggled', this.maybeDisableSortables );
 
-				if ( width <= 782 ) {
-					self.disableSortables();
-				}
-			});
+			// When the screen columns are changed, potentially disable sortables.
+			$( '#screen-options-wrap input' ).on( 'click', this.maybeDisableSortables );
+		},
+
+		/**
+		 * Disable sortables if there is only one metabox, or the screen is in one column mode. Otherwise, enable sortables.
+		 *
+		 * @since 5.3.0
+		 *
+		 * @returns {void}
+		 */
+		maybeDisableSortables: function() {
+			var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
+
+			if (
+				( width <= 782 ) ||
+				( 1 >= $sortables.find( '.ui-sortable-handle:visible' ).length && jQuery( '.columns-prefs-1 input' ).prop( 'checked' ) )
+			) {
+				this.disableSortables();
+			} else {
+				this.enableSortables();
+			}
 		},
 
 		/**
@@ -1356,7 +1376,8 @@ $document.ready( function() {
 		deactivate: function() {
 			setPinMenu();
 			$adminmenu.removeData('wp-responsive');
-			this.enableSortables();
+
+			this.maybeDisableSortables();
 		},
 
 		/**
@@ -1391,6 +1412,8 @@ $document.ready( function() {
 			} else {
 				this.disableOverlay();
 			}
+
+			this.maybeDisableSortables();
 		},
 
 		/**
@@ -1439,6 +1462,7 @@ $document.ready( function() {
 			if ( $sortables.length ) {
 				try {
 					$sortables.sortable( 'disable' );
+					$sortables.find( '.ui-sortable-handle' ).addClass( 'is-non-sortable' );
 				} catch ( e ) {}
 			}
 		},
@@ -1454,6 +1478,7 @@ $document.ready( function() {
 			if ( $sortables.length ) {
 				try {
 					$sortables.sortable( 'enable' );
+					$sortables.find( '.ui-sortable-handle' ).removeClass( 'is-non-sortable' );
 				} catch ( e ) {}
 			}
 		}
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index fbf9f8d58e..66e3646cca 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -2041,6 +2041,11 @@ html.wp-toolbar {
 	cursor: move;
 }
 
+.js .widget .widget-top.is-non-sortable,
+.js .postbox .hndle.is-non-sortable {
+	cursor: auto;
+}
+
 .hndle a {
 	font-size: 11px;
 	font-weight: 400;