WordPress.org

Make WordPress Core

Ticket #39074: 39074.3.diff

File 39074.3.diff, 5.5 KB (added by xkon, 5 weeks ago)
  • src/js/_enqueues/admin/postbox.js

    diff --git a/src/js/_enqueues/admin/postbox.js b/src/js/_enqueues/admin/postbox.js
    index 9789518b65..1eacaa8e53 100644
    a b  
    4141                        var $el = $( this ),
    4242                                p = $el.parent( '.postbox' ),
    4343                                id = p.attr( 'id' ),
    44                                 ariaExpandedValue;
     44                                ariaExpandedValue,
     45                                closestPostbox = $( this ).closest( '.postbox' );
    4546
    4647                        if ( 'dashboard_browser_nag' === id ) {
    4748                                return;
    4849                        }
    4950
     51                        if ( $el.hasClass( 'handle-order-prev' ) ) {
     52                                // The handle order prev button was clicked.
     53                                closestPostbox.prev().before( closestPostbox );
     54                                postboxes.save_order( postboxes.page );
     55                                $el.focus();
     56                                return;
     57                        }
     58
     59                        if ( $el.hasClass( 'handle-order-next' ) ) {
     60                                // The handle order next button was clicked.
     61                                closestPostbox.next().after( closestPostbox );
     62                                postboxes.save_order( postboxes.page );
     63                                $el.focus();
     64                                return;
     65                        }
     66
    5067                        p.toggleClass( 'closed' );
    5168
    5269                        ariaExpandedValue = ! p.hasClass( 'closed' );
     
    99116                 * @return {void}
    100117                 */
    101118                add_postbox_toggles : function (page, args) {
    102                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     119                        var $handles = $( '.postbox .hndle, .postbox .handlediv, .postbox .handle-order-next, .postbox .handle-order-prev' );
    103120
    104121                        this.page = page;
    105122                        this.init( page, args );
     
    263280                                var $el = $( this );
    264281                                $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
    265282                        });
     283
     284                        // Handle the click & keyup events for focusing properly the postboxes.
     285                        $( 'body' ).on( 'click', function( e ) {
     286                                var target = $( e.target );
     287
     288                                $( '.postbox' ).each( function() {
     289                                        $( this ).removeClass( 'focused' );
     290                                });
     291
     292                                if ( 1 === $( target ).closest( '.postbox' ).length ) {
     293                                        target.closest( '.postbox' ).addClass( 'focused' );
     294                                }
     295                        });
     296
     297                        $( 'body' ).on( 'keyup', function( e ) {
     298                                var keyCode = e.keyCode || e.which;
     299
     300                                // We only need to check on a Tab keyup.
     301                                if (keyCode == 9) {
     302                                        var target = $( e.target );
     303
     304                                        $( '.postbox' ).each( function() {
     305                                                $( this ).removeClass( 'focused' );
     306                                        });
     307
     308                                        if ( 1 === $( target ).closest( '.postbox' ).length ) {
     309                                                target.closest( '.postbox' ).addClass( 'focused' );
     310                                        }
     311                                }
     312                        });
    266313                },
    267314
    268315                /**
  • src/wp-admin/css/common.css

    diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
    index a8b8112b00..c3196497bf 100644
    a b html.wp-toolbar { 
    20572057        font-weight: 400;
    20582058}
    20592059
     2060.postbox .handle-order-prev,
     2061.postbox .handle-order-next,
    20602062.postbox .handlediv {
    20612063        display: none;
    20622064        float: right;
    html.wp-toolbar { 
    20692071        cursor: pointer;
    20702072}
    20712073
     2074.postbox .handle-order-prev,
     2075.postbox .handle-order-next,
    20722076.js .postbox .handlediv {
    2073         display: block;
     2077        display: inline-block;
    20742078}
    20752079
    20762080.sortable-placeholder {
    html.wp-toolbar { 
    20852089        line-height: 1;
    20862090}
    20872091
     2092.postbox.focused {
     2093        box-shadow:
     2094        0 0 0 1px #5b9dd9,
     2095        0 0 2px 1px rgba(30, 140, 190, 0.8);
     2096}
     2097
    20882098/* user-select is not a part of the CSS standard - may change behavior in the future */
    20892099.postbox .hndle,
    20902100.stuffbox .hndle {
    img { 
    30483058        content: "\f140";
    30493059}
    30503060
     3061.js .postbox .handle-order-next .toggle-indicator:before {
     3062        content: "\f347";
     3063}
     3064
     3065.js .postbox .handle-order-prev .toggle-indicator:before {
     3066        content: "\f343";
     3067}
     3068
     3069.js .postbox .handle-order-next .toggle-indicator:before,
     3070.js .postbox .handle-order-prev .toggle-indicator:before,
    30513071.js .postbox .handlediv .toggle-indicator:before {
    30523072        margin-top: 4px;
    30533073        width: 20px;
    img { 
    30553075        text-indent: -1px; /* account for the dashicon alignment */
    30563076}
    30573077
     3078.rtl.js .postbox .handle-order-next .toggle-indicator:before,
     3079.rtl.js .postbox .handle-order-prev .toggle-indicator:before,
    30583080.rtl.js .postbox .handlediv .toggle-indicator:before {
    30593081        text-indent: 1px; /* account for the dashicon alignment */
    30603082}
    img { 
    30653087        color: #72777c;
    30663088}
    30673089
     3090.js .postbox .handle-order-next:focus,
     3091.js .postbox .handle-order-prev:focus,
    30683092.js .postbox .handlediv:focus {
    30693093        box-shadow: none;
    30703094        outline: none;
    30713095}
    30723096
     3097.js .postbox .handle-order-next:focus .toggle-indicator:before,
     3098.js .postbox .handle-order-prev:focus .toggle-indicator:before,
    30733099.js .postbox .handlediv:focus .toggle-indicator:before {
    30743100        box-shadow:
    30753101                0 0 0 1px #5b9dd9,
  • src/wp-admin/includes/template.php

    diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
    index 5e6838eab1..9257d803d3 100644
    a b function do_meta_boxes( $screen, $context, $object ) { 
    13151315                                                ) . '</span>';
    13161316                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    13171317                                                echo '</button>';
     1318
     1319                                                echo '<button type="button" class="handle-order-next">';
     1320                                                echo '<span class="screen-reader-text">' . sprintf(
     1321                                                        /* translators: Meta box title. */
     1322                                                        __( 'Move %s panel to next position' ),
     1323                                                        $widget_title
     1324                                                ) . '</span>';
     1325                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
     1326                                                echo '</button>';
     1327
     1328                                                echo '<button type="button" class="handle-order-prev">';
     1329                                                echo '<span class="screen-reader-text">' . sprintf(
     1330                                                        /* translators: Meta box title. */
     1331                                                        __( 'Move %s panel to previous position' ),
     1332                                                        $widget_title
     1333                                                ) . '</span>';
     1334                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
     1335                                                echo '</button>';
    13181336                                        }
    13191337                                        echo '<h2 class="hndle">';
    13201338                                        if ( 'dashboard_php_nag' === $box['id'] ) {