Changeset 48373 for trunk/src/wp-admin/includes/template.php

Timestamp:

07/07/2020 12:58:10 PM (4 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.

File:

• trunk/src/wp-admin/includes/template.php (modified) (3 diffs)

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

@@ -1315 +1315 @@
                     $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 +1333 @@
                             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">';
@@ -1332 +1364 @@
                         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";