Changeset 48460

Timestamp:

07/13/2020 06:01:31 PM (4 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/admin/postbox.js (modified) (1 diff)
• wp-admin/css/common.css (modified) (2 diffs)

trunk/src/js/_enqueues/admin/postbox.js

@@ -204 +204 @@
          */
         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.

trunk/src/wp-admin/css/common.css

@@ -2012 +2012 @@
 }
 
+/* Post box order and toggle buttons. */
 .postbox .handle-order-higher,
 .postbox .handle-order-lower,
@@ -2027 +2028 @@
 .postbox .handle-order-lower {
     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
 }