WordPress.org

Make WordPress Core

Changeset 46250


Ignore:
Timestamp:
09/23/2019 05:29:46 PM (4 weeks 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/common.js

    r44722 r46250  
    12751275            var self = this;
    12761276
     1277            this.maybeDisableSortables = this.maybeDisableSortables.bind( this );
     1278
    12771279            // Modify functionality based on custom activate/deactivate event
    12781280            $document.on( 'wp-responsive-activate.wp-responsive', function() {
     
    13141316
    13151317            // This needs to run later as UI Sortable may be initialized later on $(document).ready().
    1316             $window.on( 'load.wp-responsive', function() {
    1317                 var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
    1318 
    1319                 if ( width <= 782 ) {
    1320                     self.disableSortables();
    1321                 }
    1322             });
     1318            $window.on( 'load.wp-responsive', this.maybeDisableSortables );
     1319            $document.on( 'postbox-toggled', this.maybeDisableSortables );
     1320
     1321            // When the screen columns are changed, potentially disable sortables.
     1322            $( '#screen-options-wrap input' ).on( 'click', this.maybeDisableSortables );
     1323        },
     1324
     1325        /**
     1326         * Disable sortables if there is only one metabox, or the screen is in one column mode. Otherwise, enable sortables.
     1327         *
     1328         * @since 5.3.0
     1329         *
     1330         * @returns {void}
     1331         */
     1332        maybeDisableSortables: function() {
     1333            var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
     1334
     1335            if (
     1336                ( width <= 782 ) ||
     1337                ( 1 >= $sortables.find( '.ui-sortable-handle:visible' ).length && jQuery( '.columns-prefs-1 input' ).prop( 'checked' ) )
     1338            ) {
     1339                this.disableSortables();
     1340            } else {
     1341                this.enableSortables();
     1342            }
    13231343        },
    13241344
     
    13571377            setPinMenu();
    13581378            $adminmenu.removeData('wp-responsive');
    1359             this.enableSortables();
     1379
     1380            this.maybeDisableSortables();
    13601381        },
    13611382
     
    13921413                this.disableOverlay();
    13931414            }
     1415
     1416            this.maybeDisableSortables();
    13941417        },
    13951418
     
    14401463                try {
    14411464                    $sortables.sortable( 'disable' );
     1465                    $sortables.find( '.ui-sortable-handle' ).addClass( 'is-non-sortable' );
    14421466                } catch ( e ) {}
    14431467            }
     
    14551479                try {
    14561480                    $sortables.sortable( 'enable' );
     1481                    $sortables.find( '.ui-sortable-handle' ).removeClass( 'is-non-sortable' );
    14571482                } catch ( e ) {}
    14581483            }
  • trunk/src/wp-admin/css/common.css

    r46247 r46250  
    20422042}
    20432043
     2044.js .widget .widget-top.is-non-sortable,
     2045.js .postbox .hndle.is-non-sortable {
     2046    cursor: auto;
     2047}
     2048
    20442049.hndle a {
    20452050    font-size: 11px;
Note: See TracChangeset for help on using the changeset viewer.