sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Andrea Fercia 2019-09-23 17:29:46 +00:00
parent 27a5302e7d
commit aba005be39
2 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/js/_enqueues/admin/common.js
View File

@ -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 ) {}
}
}

5
src/wp-admin/css/common.css
View File

@ -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;