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

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@48460 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2020-07-13 18:01:31 +00:00
parent a932bb3851
commit 81364742b1
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/js/_enqueues/admin/postbox.js
View File

@ -203,16 +203,30 @@
* @return {void} * @return {void}
*/ */
updateOrderButtonsProperties: function() { updateOrderButtonsProperties: function() {
var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ), var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),
lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ), lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),
firstPostbox = $( '.postbox:visible:first' ), firstPostbox = $( '.postbox:visible:first' ),
lastPostbox = $( '.postbox:visible:last' ), lastPostbox = $( '.postbox:visible:last' ),
firstPostboxId = firstPostbox.attr( 'id' ),
lastPostboxId = lastPostbox.attr( 'id' ),
firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).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. // Enable all buttons as a reset first.
$( '.handle-order-higher' ).attr( 'aria-disabled', 'false' ); moveUpButtons
$( '.handle-order-lower' ).attr( 'aria-disabled', 'false' ); .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. // Set an aria-disabled=true attribute on the first visible "move" buttons.
if ( firstSortablesId === firstPostboxSortablesId ) { if ( firstSortablesId === firstPostboxSortablesId ) {

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

@ -2011,6 +2011,7 @@ html.wp-toolbar {
flex-shrink: 0; flex-shrink: 0;
} }
/* Post box order and toggle buttons. */
.postbox .handle-order-higher, .postbox .handle-order-higher,
.postbox .handle-order-lower, .postbox .handle-order-lower,
.postbox .handlediv { .postbox .handlediv {
@ -2028,6 +2029,14 @@ html.wp-toolbar {
color: #72777c; 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-higher[aria-disabled="true"],
.postbox .handle-order-lower[aria-disabled="true"] { .postbox .handle-order-lower[aria-disabled="true"] {
cursor: default; cursor: default;