Ticket #39074: 39074.3.diff

src/js/_enqueues/admin/postbox.js

@@ -41 +41 @@
                         var $el = $( this ),
                                 p = $el.parent( '.postbox' ),
                                 id = p.attr( 'id' ),
-                                ariaExpandedValue;
+                                ariaExpandedValue,
+                                closestPostbox = $( this ).closest( '.postbox' );
 
                         if ( 'dashboard_browser_nag' === id ) {
                                 return;
                         }
 
+                        if ( $el.hasClass( 'handle-order-prev' ) ) {
+                                // The handle order prev button was clicked.
+                                closestPostbox.prev().before( closestPostbox );
+                                postboxes.save_order( postboxes.page );
+                                $el.focus();
+                                return;
+                        }
+
+                        if ( $el.hasClass( 'handle-order-next' ) ) {
+                                // The handle order next button was clicked.
+                                closestPostbox.next().after( closestPostbox );
+                                postboxes.save_order( postboxes.page );
+                                $el.focus();
+                                return;
+                        }
+
                         p.toggleClass( 'closed' );
 
                         ariaExpandedValue = ! p.hasClass( 'closed' );
@@ -99 +116 @@
                  * @return {void}
                  */
                 add_postbox_toggles : function (page, args) {
-                        var $handles = $( '.postbox .hndle, .postbox .handlediv' );
+                        var $handles = $( '.postbox .hndle, .postbox .handlediv, .postbox .handle-order-next, .postbox .handle-order-prev' );
 
                         this.page = page;
                         this.init( page, args );
@@ -263 +280 @@
                                 var $el = $( this );
                                 $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
                         });
+
+                        // Handle the click & keyup events for focusing properly the postboxes.
+                        $( 'body' ).on( 'click', function( e ) {
+                                var target = $( e.target );
+
+                                $( '.postbox' ).each( function() {
+                                        $( this ).removeClass( 'focused' );
+                                });
+
+                                if ( 1 === $( target ).closest( '.postbox' ).length ) {
+                                        target.closest( '.postbox' ).addClass( 'focused' );
+                                }
+                        });
+
+                        $( 'body' ).on( 'keyup', function( e ) {
+                                var keyCode = e.keyCode || e.which;
+
+                                // We only need to check on a Tab keyup.
+                                if (keyCode == 9) {
+                                        var target = $( e.target );
+
+                                        $( '.postbox' ).each( function() {
+                                                $( this ).removeClass( 'focused' );
+                                        });
+
+                                        if ( 1 === $( target ).closest( '.postbox' ).length ) {
+                                                target.closest( '.postbox' ).addClass( 'focused' );
+                                        }
+                                }
+                        });
                 },
 
                 /**

src/wp-admin/css/common.css

@@ -2057 +2057 @@
         font-weight: 400;
 }
 
+.postbox .handle-order-prev,
+.postbox .handle-order-next,
 .postbox .handlediv {
         display: none;
         float: right;
@@ -2069 +2071 @@
         cursor: pointer;
 }
 
+.postbox .handle-order-prev,
+.postbox .handle-order-next,
 .js .postbox .handlediv {
-        display: block;
+        display: inline-block;
 }
 
 .sortable-placeholder {
@@ -2085 +2089 @@
         line-height: 1;
 }
 
+.postbox.focused {
+        box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
+}
+
 /* user-select is not a part of the CSS standard - may change behavior in the future */
 .postbox .hndle,
 .stuffbox .hndle {
@@ -3048 +3058 @@
         content: "\f140";
 }
 
+.js .postbox .handle-order-next .toggle-indicator:before {
+        content: "\f347";
+}
+
+.js .postbox .handle-order-prev .toggle-indicator:before {
+        content: "\f343";
+}
+
+.js .postbox .handle-order-next .toggle-indicator:before,
+.js .postbox .handle-order-prev .toggle-indicator:before,
 .js .postbox .handlediv .toggle-indicator:before {
         margin-top: 4px;
         width: 20px;
@@ -3055 +3075 @@
         text-indent: -1px; /* account for the dashicon alignment */
 }
 
+.rtl.js .postbox .handle-order-next .toggle-indicator:before,
+.rtl.js .postbox .handle-order-prev .toggle-indicator:before,
 .rtl.js .postbox .handlediv .toggle-indicator:before {
         text-indent: 1px; /* account for the dashicon alignment */
 }
@@ -3065 +3087 @@
         color: #72777c;
 }
 
+.js .postbox .handle-order-next:focus,
+.js .postbox .handle-order-prev:focus,
 .js .postbox .handlediv:focus {
         box-shadow: none;
         outline: none;
 }
 
+.js .postbox .handle-order-next:focus .toggle-indicator:before,
+.js .postbox .handle-order-prev:focus .toggle-indicator:before,
 .js .postbox .handlediv:focus .toggle-indicator:before {
         box-shadow:
                 0 0 0 1px #5b9dd9,

src/wp-admin/includes/template.php

@@ -1315 +1315 @@
                                                 ) . '</span>';
                                                 echo '<span class="toggle-indicator" aria-hidden="true"></span>';
                                                 echo '</button>';
+
+                                                echo '<button type="button" class="handle-order-next">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Move %s panel to next position' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
+
+                                                echo '<button type="button" class="handle-order-prev">';
+                                                echo '<span class="screen-reader-text">' . sprintf(
+                                                        /* translators: Meta box title. */
+                                                        __( 'Move %s panel to previous position' ),
+                                                        $widget_title
+                                                ) . '</span>';
+                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
+                                                echo '</button>';
                                         }
                                         echo '<h2 class="hndle">';
                                         if ( 'dashboard_php_nag' === $box['id'] ) {