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.

Built from https://develop.svn.wordpress.org/trunk@46250


git-svn-id: http://core.svn.wordpress.org/trunk@46062 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.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;

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;

wp-admin/js/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 ) {}
 			}
 		}

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-alpha-46249';
+$wp_version = '5.3-alpha-46250';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.