Make WordPress Core


Ignore:
Timestamp:
09/27/2017 04:28:59 PM (6 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/widgets.php

    r40313 r41621  
    388388    <div id="available-widgets" class="widgets-holder-wrap">
    389389        <div class="sidebar-name">
    390             <div class="sidebar-name-arrow"><br /></div>
     390            <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
     391                <span class="screen-reader-text"><?php _e( 'Available Widgets' ); ?></span>
     392                <span class="toggle-indicator" aria-hidden="true"></span>
     393            </button>
    391394            <h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
    392395        </div>
Note: See TracChangeset for help on using the changeset viewer.