Accessibility: Improve reordering of the post boxes in the block editor meta boxes area.

Follow-up to [48373].
- ignores hidden "sortables" areas 
- hides the reorder buttons when there's only one post box 
- makes the reorder buttons slightly bigger to match the side of the toggle button

Fixes #39074.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48229 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2020-07-13 18:03:05 +00:00
parent f83664c487
commit c7617838b1
7 changed files with 41 additions and 9 deletions

View File

@ -2012,6 +2012,7 @@ html.wp-toolbar {
flex-shrink: 0;
}
/* Post box order and toggle buttons. */
.postbox .handle-order-higher,
.postbox .handle-order-lower,
.postbox .handlediv {
@ -2029,6 +2030,14 @@ html.wp-toolbar {
color: #72777c;
}
/* Post box order buttons in the block editor meta boxes area. */
.edit-post-meta-boxes-area .postbox .handle-order-higher,
.edit-post-meta-boxes-area .postbox .handle-order-lower {
width: 44px;
height: 44px;
color: #191e23
}
.postbox .handle-order-higher[aria-disabled="true"],
.postbox .handle-order-lower[aria-disabled="true"] {
cursor: default;

File diff suppressed because one or more lines are too long

View File

@ -2011,6 +2011,7 @@ html.wp-toolbar {
flex-shrink: 0;
}
/* Post box order and toggle buttons. */
.postbox .handle-order-higher,
.postbox .handle-order-lower,
.postbox .handlediv {
@ -2028,6 +2029,14 @@ html.wp-toolbar {
color: #72777c;
}
/* Post box order buttons in the block editor meta boxes area. */
.edit-post-meta-boxes-area .postbox .handle-order-higher,
.edit-post-meta-boxes-area .postbox .handle-order-lower {
width: 44px;
height: 44px;
color: #191e23
}
.postbox .handle-order-higher[aria-disabled="true"],
.postbox .handle-order-lower[aria-disabled="true"] {
cursor: default;

File diff suppressed because one or more lines are too long

View File

@ -203,16 +203,30 @@
* @return {void}
*/
updateOrderButtonsProperties: function() {
var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ),
lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ),
var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
firstPostbox = $( '.postbox:visible:first' ),
lastPostbox = $( '.postbox:visible:last' ),
firstPostboxId = firstPostbox.attr( 'id' ),
lastPostboxId = lastPostbox.attr( 'id' ),
firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' );
lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
moveUpButtons = $( '.handle-order-higher' ),
moveDownButtons = $( '.handle-order-lower' );
// Enable all buttons as a reset first.
$( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
$( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
moveUpButtons
.attr( 'aria-disabled', 'false' )
.removeClass( 'hidden' );
moveDownButtons
.attr( 'aria-disabled', 'false' )
.removeClass( 'hidden' );
// When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.
if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {
moveUpButtons.addClass( 'hidden' );
moveDownButtons.addClass( 'hidden' );
}
// Set an aria-disabled=true attribute on the first visible "move" buttons.
if ( firstSortablesId === firstPostboxSortablesId ) {

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.5-beta1-48459';
$wp_version = '5.5-beta1-48460';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.