Changeset 42794 for trunk/src/wp-admin/includes/widgets.php

Timestamp:

03/07/2018 10:26:39 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Widgets: Make the "Available Widgets" section operable with a keyboard.

For a number of years, the "Available Widgets" section has been off-limits for
keyboard users. Now it can be used also with the keyboard. This change introduces
also some improvements for assistive technologies.

• makes the widget toggles focusable and adds an aria-expanded attribute to indicate their state
• improves the toggles labelling to clarify context (add/edit)
• changes the controls to choose a sidebar from list items to buttons
• adds an aria-label attribute to the buttons to clarify their purpose
• adds an aria-pressed attribute to the buttons to indicate which one is selected
• improves color contrast of the selected button
• uses a wp.a11y.speak() message to announce to screen reader users when a widget has been added to a sidebar
• moves focus back to the toggle button when closing a widget

See #40677.

File:

• trunk/src/wp-admin/includes/widgets.php (modified) (2 diffs)

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

@@ -91 +91 @@
 
     if ( $sidebar_name ) {
+        $add_to = sprintf(
+            /* translators: %s: widgets sidebar name. */
+            __( 'Add to: %s' ),
+            $sidebar_name
+        );
         ?>
-        <div class="sidebar-name">
+        <div class="sidebar-name" data-add-to="<?php echo esc_attr( $add_to ); ?>">
             <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
                 <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
@@ -240 +245 @@
     <div class="widget-title-action">
         <button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
-            <span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
+            <span class="screen-reader-text edit"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span>
+            <span class="screen-reader-text add"><?php printf( __( 'Add widget: %s' ), $widget_title ); ?></span>
             <span class="toggle-indicator" aria-hidden="true"></span>
         </button>