Changeset 46250

Timestamp:

09/23/2019 05:29:46 PM (7 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/admin/common.js (modified) (6 diffs)
• wp-admin/css/common.css (modified) (1 diff)

trunk/src/js/_enqueues/admin/common.js

@@ -1275 +1275 @@
                         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() {
@@ -1314 +1316 @@
 
                         // 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;
-
-                                if ( width <= 782 ) {
-                                        self.disableSortables();
-                                }
-                        });
+                        $window.on( 'load.wp-responsive', this.maybeDisableSortables );
+                        $document.on( 'postbox-toggled', this.maybeDisableSortables );
+
+                        // 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();
+                        }
                 },
 
@@ -1357 +1377 @@
                         setPinMenu();
                         $adminmenu.removeData('wp-responsive');
-                        this.enableSortables();
+
+                        this.maybeDisableSortables();
                 },
 
@@ -1392 +1413 @@
                                 this.disableOverlay();
                         }
+
+                        this.maybeDisableSortables();
                 },
 
@@ -1440 +1463 @@
                                 try {
                                         $sortables.sortable( 'disable' );
+                                        $sortables.find( '.ui-sortable-handle' ).addClass( 'is-non-sortable' );
                                 } catch ( e ) {}
                         }
@@ -1455 +1479 @@
                                 try {
                                         $sortables.sortable( 'enable' );
+                                        $sortables.find( '.ui-sortable-handle' ).removeClass( 'is-non-sortable' );
                                 } catch ( e ) {}
                         }

trunk/src/wp-admin/css/common.css

@@ -2042 +2042 @@
 }
 
+.js .widget .widget-top.is-non-sortable,
+.js .postbox .hndle.is-non-sortable {
+        cursor: auto;
+}
+
 .hndle a {
         font-size: 11px;