vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-01 15:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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


git-svn-id: https://develop.svn.wordpress.org/trunk@48373 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2020-07-07 12:58:10 +00:00
parent 30201a396f
commit 337b3295fe
6 changed files with 268 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/wp-admin/includes/template.php
View File

@@ -1314,6 +1314,16 @@ function do_meta_boxes( $screen, $context, $object ) {
// get_hidden_meta_boxes() doesn't apply in the block editor.
$hidden_class = ( ! $screen->is_block_editor() && in_array( $box['id'], $hidden, true ) ) ? ' hide-if-js' : '';
echo '<div id="' . $box['id'] . '" class="postbox ' . postbox_classes( $box['id'], $page ) . $hidden_class . '" ' . '>' . "\n";
echo '<div class="postbox-header">';
echo '<h2 class="hndle">';
if ( 'dashboard_php_nag' === $box['id'] ) {
echo '<span aria-hidden="true" class="dashicons dashicons-warning"></span>';
echo '<span class="screen-reader-text">' . __( 'Warning:' ) . ' </span>';
}
echo "{$box['title']}";
echo "</h2>\n";
if ( 'dashboard_browser_nag' !== $box['id'] ) {
$widget_title = $box['title'];
@@ -1323,6 +1333,28 @@ function do_meta_boxes( $screen, $context, $object ) {
unset( $box['args']['__widget_basename'] );
}
echo '<div class="handle-actions hide-if-no-js">';
echo '<button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-higher-description">';
echo '<span class="screen-reader-text">' . __( 'Move up' ) . '</span>';
echo '<span class="order-higher-indicator" aria-hidden="true"></span>';
echo '</button>';
echo '<span class="hidden" id="' . $box['id'] . '-handle-order-higher-description">' . sprintf(
/* translators: %s: Meta box title. */
__( 'Move %s box up' ),
$widget_title
) . '</span>';
echo '<button type="button" class="handle-order-lower" aria-disabled="false" aria-describedby="' . $box['id'] . '-handle-order-lower-description">';
echo '<span class="screen-reader-text">' . __( 'Move down' ) . '</span>';
echo '<span class="order-lower-indicator" aria-hidden="true"></span>';
echo '</button>';
echo '<span class="hidden" id="' . $box['id'] . '-handle-order-lower-description">' . sprintf(
/* translators: %s: Meta box title. */
__( 'Move %s box down' ),
$widget_title
) . '</span>';
echo '<button type="button" class="handlediv" aria-expanded="true">';
echo '<span class="screen-reader-text">' . sprintf(
/* translators: %s: Meta box title. */
@@ -1331,14 +1363,11 @@ function do_meta_boxes( $screen, $context, $object ) {
) . '</span>';
echo '<span class="toggle-indicator" aria-hidden="true"></span>';
echo '</button>';
echo '</div>';
}
echo '<h2 class="hndle">';
if ( 'dashboard_php_nag' === $box['id'] ) {
echo '<span aria-hidden="true" class="dashicons dashicons-warning"></span>';
echo '<span class="screen-reader-text">' . __( 'Warning:' ) . ' </span>';
}
echo "<span>{$box['title']}</span>";
echo "</h2>\n";
echo '</div>';
echo '<div class="inside">' . "\n";
if ( WP_DEBUG && ! $block_compatible && 'edit' === $screen->parent_base && ! $screen->is_block_editor() && ! isset( $_GET['meta-box-loader'] ) ) {