WordPress.org
Get WordPress

Make WordPress Core

Changeset 48373


Ignore:
Timestamp:
07/07/2020 12:58:10 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Allow post boxes on the Dashboard and Classic Editor pages to be reordered by using the keyboard.

So far, it has been possible to rearrange into a new order the post boxes (also known as "widgets" on the Dashboard and "meta boxes" on the Edit post page) only by using a pointing device, for example a mouse.

This change adds new controls and functionality to allow the boxes to be rearranged also with the keyboard. Additionally, audible messages are sent to the admin ARIA live region to notify screen reader users of the reorder action result.

Props joedolson, anevins, antpb, audrasjb, xkon, MarcoZ, karmatosed, afercia.
Fixes #39074.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r48340 r48373  
    4343                handle_click : function () {
    4444                        var $el = $( this ),
    45                                 p = $el.parent( '.postbox' ),
     45                                p = $el.closest( '.postbox' ),
    4646                                id = p.attr( 'id' ),
    4747                                ariaExpandedValue;
    … …  
    5252
    5353                        p.toggleClass( 'closed' );
    54 
    5554                        ariaExpandedValue = ! p.hasClass( 'closed' );
    5655
    … …  
    9190
    9291                /**
     92                 * Handles clicks on the move up/down buttons.
     93                 *
     94                 * @since 5.5.0
     95                 *
     96                 * @return {void}
     97                 */
     98                handleOrder: function() {
     99                        var button = $( this ),
     100                                postbox = button.closest( '.postbox' ),
     101                                postboxId = postbox.attr( 'id' ),
     102                                postboxesWithinSortables = postbox.closest( '.meta-box-sortables' ).find( '.postbox:visible' ),
     103                                postboxesWithinSortablesCount = postboxesWithinSortables.length,
     104                                postboxWithinSortablesIndex = postboxesWithinSortables.index( postbox ),
     105                                firstOrLastPositionMessage;
     106
     107                        if ( 'dashboard_browser_nag' === postboxId ) {
     108                                return;
     109                        }
     110
     111                        // If on the first or last position, do nothing and send an audible message to screen reader users.
     112                        if ( 'true' === button.attr( 'aria-disabled' ) ) {
     113                                firstOrLastPositionMessage = button.hasClass( 'handle-order-higher' ) ?
     114                                        __( 'The box is on the first position' ) :
     115                                        __( 'The box is on the last position' );
     116
     117                                wp.a11y.speak( firstOrLastPositionMessage );
     118                                return;
     119                        }
     120
     121                        // Move a postbox up.
     122                        if ( button.hasClass( 'handle-order-higher' ) ) {
     123                                // If the box is first within a sortable area, move it to the previous sortable area.
     124                                if ( 0 === postboxWithinSortablesIndex ) {
     125                                        postboxes.handleOrderBetweenSortables( 'previous', button, postbox );
     126                                        return;
     127                                }
     128
     129                                postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );
     130                                button.focus();
     131                                postboxes.updateOrderButtonsProperties();
     132                                postboxes.save_order( postboxes.page );
     133                        }
     134
     135                        // Move a postbox down.
     136                        if ( button.hasClass( 'handle-order-lower' ) ) {
     137                                // If the box is last within a sortable area, move it to the next sortable area.
     138                                if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {
     139                                        postboxes.handleOrderBetweenSortables( 'next', button, postbox );
     140                                        return;
     141                                }
     142
     143                                postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );
     144                                button.focus();
     145                                postboxes.updateOrderButtonsProperties();
     146                                postboxes.save_order( postboxes.page );
     147                        }
     148
     149                },
     150
     151                /**
     152                 * Moves postboxes between the sortables areas.
     153                 *
     154                 * @since 5.5.0
     155                 *
     156                 * @param {string} position The "previous" or "next" sortables area.
     157                 * @param {object} button   The jQuery object representing the button that was clicked.
     158                 * @param {object} postbox  The jQuery object representing the postbox to be moved.
     159                 *
     160                 * @return {void}
     161                 */
     162                handleOrderBetweenSortables: function( position, button, postbox ) {
     163                        var closestSortablesId = button.closest( '.meta-box-sortables' ).attr( 'id' ),
     164                                sortablesIds = [],
     165                                sortablesIndex,
     166                                detachedPostbox;
     167
     168                        // Get the list of sortables within the page.
     169                        $( '.meta-box-sortables:visible' ).each( function() {
     170                                sortablesIds.push( $( this ).attr( 'id' ) );
     171                        });
     172
     173                        // Return if there's only one visible sortables area, e.g. in the block editor page.
     174                        if ( 1 === sortablesIds.length ) {
     175                                return;
     176                        }
     177
     178                        // Find the index of the current sortables area within all the sortable areas.
     179                        sortablesIndex = $.inArray( closestSortablesId, sortablesIds );
     180                        // Detach the postbox to be moved.
     181                        detachedPostbox = postbox.detach();
     182
     183                        // Move the detached postbox to its new position.
     184                        if ( 'previous' === position ) {
     185                                $( detachedPostbox ).appendTo( '#' + sortablesIds[ sortablesIndex - 1 ] );
     186                        }
     187
     188                        if ( 'next' === position ) {
     189                                $( detachedPostbox ).prependTo( '#' + sortablesIds[ sortablesIndex + 1 ] );
     190                        }
     191
     192                        postboxes._mark_area();
     193                        button.focus();
     194                        postboxes.updateOrderButtonsProperties();
     195                        postboxes.save_order( postboxes.page );
     196                },
     197
     198                /**
     199                 * Update the move buttons properties depending on the postbox position.
     200                 *
     201                 * @since 5.5.0
     202                 *
     203                 * @return {void}
     204                 */
     205                updateOrderButtonsProperties: function() {
     206                        var firstSortablesId = $( '.meta-box-sortables:first' ).attr( 'id' ),
     207                                lastSortablesId = $( '.meta-box-sortables:last' ).attr( 'id' ),
     208                                firstPostbox = $( '.postbox:visible:first' ),
     209                                lastPostbox = $( '.postbox:visible:last' ),
     210                                firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),
     211                                lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' );
     212
     213                        // Enable all buttons as a reset first.
     214                        $( '.handle-order-higher' ).attr( 'aria-disabled', 'false' );
     215                        $( '.handle-order-lower' ).attr( 'aria-disabled', 'false' );
     216
     217                        // Set an aria-disabled=true attribute on the first visible "move" buttons.
     218                        if ( firstSortablesId === firstPostboxSortablesId ) {
     219                                $( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );
     220                        }
     221
     222                        // Set an aria-disabled=true attribute on the last visible "move" buttons.
     223                        if ( lastSortablesId === lastPostboxSortablesId ) {
     224                                $( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );
     225                        }
     226                },
     227
     228                /**
    93229                 * Adds event handlers to all postboxes and screen option on the current page.
    94230                 *
    … …  
    104240                 */
    105241                add_postbox_toggles : function (page, args) {
    106                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
     242                        var $handles = $( '.postbox .hndle, .postbox .handlediv' ),
     243                                $orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );
    107244
    108245                        this.page = page;
    … …  
    110247
    111248                        $handles.on( 'click.postboxes', this.handle_click );
     249
     250                        // Handle the order of the postboxes.
     251                        $orderButtons.on( 'click.postboxes', this.handleOrder );
    112252
    113253                        /**
    … …  
    123263                         * Event handler for the postbox dismiss button. After clicking the button
    124264                         * the postbox will be hidden.
     265                         *
     266                         * As of WordPress 5.5, this is only used for the browser update nag.
    125267                         *
    126268                         * @since 3.2.0
    … …  
    249391                                                return;
    250392                                        }
     393
     394                                        postboxes.updateOrderButtonsProperties();
    251395                                        postboxes.save_order(page);
    252396                                },
    … …  
    267411                        this._mark_area();
    268412
     413                        // Update the "move" buttons properties.
     414                        this.updateOrderButtonsProperties();
     415                        $document.on( 'postbox-toggled', this.updateOrderButtonsProperties );
     416
    269417                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
    270418                        $handleButtons.each( function () {
    271419                                var $el = $( this );
    272                                 $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
     420                                $el.attr( 'aria-expanded', ! $el.closest( '.postbox' ).hasClass( 'closed' ) );
    273421                        });
    274422                },
    … …  
    333481                        } );
    334482
    335                         $.post( ajaxurl, postVars );
     483                        $.post(
     484                                ajaxurl,
     485                                postVars,
     486                                function( response ) {
     487                                        if ( response.success ) {
     488                                                wp.a11y.speak( __( 'The boxes order has been saved.' ) );
     489                                        }
     490                                }
     491                        );
    336492                },
    337493

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

    r48368 r48373  
    728728}
    729729
    730 .postbox .hndle,
    731730.stuffbox .hndle {
    732731        border-bottom: 1px solid #ccd0d4;
    … …  
    19841983}
    19851984
     1985/* Configurable dashboard widgets "Configure" edit-box link. */
    19861986.hndle a {
    1987         font-size: 11px;
     1987        font-size: 12px;
    19881988        font-weight: 400;
    19891989}
    19901990
     1991.postbox-header {
     1992        display: flex;
     1993        align-items: center;
     1994        justify-content: space-between;
     1995        border-bottom: 1px solid #ccd0d4;
     1996}
     1997
     1998.postbox-header .hndle {
     1999        flex-grow: 1;
     2000        /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
     2001        display: flex;
     2002        justify-content: space-between;
     2003        align-items: center;
     2004}
     2005
     2006.postbox-header .handle-actions {
     2007        flex-shrink: 0;
     2008}
     2009
     2010.postbox .handle-order-higher,
     2011.postbox .handle-order-lower,
    19912012.postbox .handlediv {
    1992         display: none;
    1993         float: right;
    19942013        width: 36px;
    19952014        height: 36px;
    … …  
    20012020}
    20022021
    2003 .js .postbox .handlediv {
    2004         display: block;
     2022.postbox .handle-order-higher,
     2023.postbox .handle-order-lower {
     2024        color: #72777c;
     2025}
     2026
     2027.postbox .handle-order-higher[aria-disabled="true"],
     2028.postbox .handle-order-lower[aria-disabled="true"] {
     2029        cursor: default;
     2030        color: #a0a5aa;
    20052031}
    20062032
    … …  
    29502976
    29512977/* Metabox collapse arrow indicators */
    2952 .sidebar-name .toggle-indicator:before,
    2953 .js .meta-box-sortables .postbox .toggle-indicator:before,
    2954 .bulk-action-notice .toggle-indicator:before,
    2955 .privacy-text-box .toggle-indicator:before {
     2978.sidebar-name .toggle-indicator::before,
     2979.meta-box-sortables .postbox .toggle-indicator::before,
     2980.meta-box-sortables .postbox .order-higher-indicator::before,
     2981.meta-box-sortables .postbox .order-lower-indicator::before,
     2982.bulk-action-notice .toggle-indicator::before,
     2983.privacy-text-box .toggle-indicator::before {
    29562984        content: "\f142";
    29572985        display: inline-block;
    … …  
    29632991}
    29642992
    2965 .js .widgets-holder-wrap.closed .toggle-indicator:before,
    2966 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
    2967 .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before,
    2968 .privacy-text-box.closed .toggle-indicator:before {
     2993.js .widgets-holder-wrap.closed .toggle-indicator::before,
     2994.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
     2995.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
     2996.privacy-text-box.closed .toggle-indicator::before {
    29692997        content: "\f140";
    29702998}
    29712999
    2972 .js .postbox .handlediv .toggle-indicator:before {
    2973         margin-top: 4px;
     3000.postbox .handle-order-higher .order-higher-indicator::before {
     3001        content: "\f343";
     3002        color: inherit;
     3003}
     3004
     3005.postbox .handle-order-lower .order-lower-indicator::before {
     3006        content: "\f347";
     3007        color: inherit;
     3008}
     3009
     3010.postbox .handle-order-higher .order-higher-indicator::before,
     3011.postbox .handle-order-lower .order-lower-indicator::before,
     3012.postbox .handlediv .toggle-indicator::before {
    29743013        width: 20px;
    29753014        border-radius: 50%;
    2976         text-indent: -1px; /* account for the dashicon alignment */
    2977 }
    2978 
    2979 .rtl.js .postbox .handlediv .toggle-indicator:before {
    2980         text-indent: 1px; /* account for the dashicon alignment */
    2981 }
    2982 
    2983 .bulk-action-notice .toggle-indicator:before {
     3015}
     3016
     3017.postbox .handlediv .toggle-indicator::before {
     3018        text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
     3019}
     3020
     3021.rtl .postbox .handlediv .toggle-indicator::before {
     3022        text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
     3023}
     3024
     3025.bulk-action-notice .toggle-indicator::before {
    29843026        line-height: 16px;
    29853027        vertical-align: top;
    … …  
    29873029}
    29883030
    2989 .js .postbox .handlediv:focus {
     3031.postbox .handle-order-higher:focus,
     3032.postbox .handle-order-lower:focus,
     3033.postbox .handlediv:focus {
    29903034        box-shadow: none;
    29913035        /* Only visible in Windows High Contrast mode */
    … …  
    29933037}
    29943038
    2995 .js .postbox .handlediv:focus .toggle-indicator:before {
     3039.postbox .handle-order-higher:focus .order-higher-indicator::before,
     3040.postbox .handle-order-lower:focus .order-lower-indicator::before,
     3041.postbox .handlediv:focus .toggle-indicator::before {
    29963042        box-shadow:
    29973043                0 0 0 1px #5b9dd9,

  • trunk/src/wp-admin/css/dashboard.css

    r48340 r48373  
    4949
    5050#dashboard-widgets .meta-box-sortables {
     51        display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
    5152        /* Required min-height to make the jQuery UI Sortable drop zone work. */
    5253        min-height: 100px;

  • trunk/src/wp-admin/includes/ajax-actions.php

    r48200 r48373  
    19281928        }
    19291929
    1930         wp_die( 1 );
     1930        wp_send_json_success();
    19311931}
    19321932

  • trunk/src/wp-admin/includes/template.php

    r48199 r48373  
    13151315                                        $hidden_class = ( ! $screen->is_block_editor() && in_array( $box['id'], $hidden, true ) ) ? ' hide-if-js' : '';
    13161316                                        echo '<div id="' . $box['id'] . '" class="postbox ' . postbox_classes( $box['id'], $page ) . $hidden_class . '" ' . '>' . "\n";
     1317
     1318                                        echo '<div class="postbox-header">';
     1319                                        echo '<h2 class="hndle">';
     1320                                        if ( 'dashboard_php_nag' === $box['id'] ) {
     1321                                                echo '<span aria-hidden="true" class="dashicons dashicons-warning"></span>';
     1322                                                echo '<span class="screen-reader-text">' . __( 'Warning:' ) . ' </span>';
     1323                                        }
     1324                                        echo "{$box['title']}";
     1325                                        echo "</h2>\n";
     1326
    13171327                                        if ( 'dashboard_browser_nag' !== $box['id'] ) {
    13181328                                                $widget_title = $box['title'];
    … …  
    13231333                                                        unset( $box['args']['__widget_basename'] );
    13241334                                                }
     1335
     1336                                                echo '<div class="handle-actions hide-if-no-js">';
     1337
     1338                                                echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
     1339                                                echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
     1340                                                echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
     1341                                                echo '</button>';
     1342                                                echo '<span class="hidden" id="' . $box['id'] . '-handle-order-higher-description">' . sprintf(
     1343                                                        /* translators: %s: Meta box title. */
     1344                                                        __( 'Move %s box up' ),
     1345                                                        $widget_title
     1346                                                ) . '</span>';
     1347
     1348                                                echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
     1349                                                echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
     1350                                                echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
     1351                                                echo '</button>';
     1352                                                echo '<span class="hidden" id="' . $box['id'] . '-handle-order-lower-description">' . sprintf(
     1353                                                        /* translators: %s: Meta box title. */
     1354                                                        __( 'Move %s box down' ),
     1355                                                        $widget_title
     1356                                                ) . '</span>';
    13251357
    13261358                                                echo '<button type="button" class="handlediv" aria-expanded="true">';
    … …  
    13321364                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
    13331365                                                echo '</button>';
     1366
     1367                                                echo '</div>';
    13341368                                        }
    1335                                         echo '<h2 class="hndle">';
    1336                                         if ( 'dashboard_php_nag' === $box['id'] ) {
    1337                                                 echo '<span aria-hidden="true" class="dashicons dashicons-warning"></span>';
    1338                                                 echo '<span class="screen-reader-text">' . __( 'Warning:' ) . ' </span>';
    1339                                         }
    1340                                         echo "<span>{$box['title']}</span>";
    1341                                         echo "</h2>\n";
     1369                                        echo '</div>';
     1370
    13421371                                        echo '<div class="inside">' . "\n";
    13431372

  • trunk/src/wp-includes/script-loader.php

    r48350 r48373  
    12091209                $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 );
    12101210
    1211                 $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 );
     1211                $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable', 'wp-a11y' ), false, 1 );
    12121212                $scripts->set_translations( 'postbox' );
    12131213
Note: See TracChangeset for help on using the changeset viewer.