WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/03/2016 04:27:55 PM (5 years ago)
Author:
afercia
Message:

Customize: Improve the widgets and menu items search.

  • adds a "search" icon into the search fields
  • adds a hidden description for the widget search field, targeted by aria-describedby
  • adds the "clear-results" button to the widgets search
  • removes the change and search events bound on the widget search, for these "live searches" WordPress should standardize on input (+ keyup when needed)
  • adds property and function to keep track and update the number of the widgets search results
  • the widgets search results are now announced via wp.a11y.speak()
  • adds a visible and audible message when there are no widgets search results
  • moves some CSS to customize-controls.css

Props ryankienstra, melchoyce, afercia.
Fixes #36908.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r38672 r38709  
    734734                'reorderModeOff'   => __( 'Reorder mode closed' ),
    735735                'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),
    736                 'reorderLabelOff'  => esc_attr__( 'Close reorder mode' ),
     736                'widgetsFound'     => __( 'Number of widgets found: %d' ),
     737                'noWidgetsFound'   => __( 'No widgets found.' ),
    737738            ),
    738739            'tpl' => array(
     
    778779            <div id="available-widgets-filter">
    779780                <label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
    780                 <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />
     781                <input type="text" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" aria-describedby="widgets-search-desc" />
     782                <div class="search-icon" aria-hidden="true"></div>
     783                <button type="button" class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
     784                <p class="screen-reader-text" id="widgets-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
    781785            </div>
    782786            <div id="available-widgets-list">
     
    786790                </div>
    787791            <?php endforeach; ?>
     792            <p class="no-widgets-found-message"><?php _e( 'No widgets found.' ); ?></p>
    788793            </div><!-- #available-widgets-list -->
    789794        </div><!-- #available-widgets -->
Note: See TracChangeset for help on using the changeset viewer.