Changeset 41621 for trunk/src/wp-admin/widgets.php

Timestamp:

09/27/2017 04:28:59 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Improve the sidebar toggles in the Widgets screen.

• uses button elements for the toggles
• uses aria-expanded on the toggles to communicate to assistive technologies the panels expanded/collapsed state
• adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
• standardizes CSS class names to .toggle-indicator and .handlediv as these names are already used across the admin for similar controls

Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes #37013.

File:

• trunk/src/wp-admin/widgets.php (modified) (1 diff)

trunk/src/wp-admin/widgets.php

@@ -388 +388 @@
     <div id="available-widgets" class="widgets-holder-wrap">
         <div class="sidebar-name">
-            <div class="sidebar-name-arrow"><br /></div>
+            <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
+                <span class="screen-reader-text"><?php _e( 'Available Widgets' ); ?></span>
+                <span class="toggle-indicator" aria-hidden="true"></span>
+            </button>
             <h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
         </div>