Skip to content
Permalink
Browse files

Accessibility: Make sortable meta boxes non sortable when there are n…

…o 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
  • Loading branch information...
afercia committed Sep 23, 2019
1 parent 27a5302 commit aba005be39847f996eb4c2f1efcbc8e7a00e189d
Showing with 37 additions and 7 deletions.
  1. +32 −7 src/js/_enqueues/admin/common.js
  2. +5 −0 src/wp-admin/css/common.css
@@ -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 ) {}
}
}
@@ -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;

0 comments on commit aba005b

Please sign in to comment.
You can’t perform that action at this time.