vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 20:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customize: Improve the widgets and menu items search.

Browse Source 
- 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38709 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2016-10-03 16:27:55 +00:00
parent bcf50fedcd
commit 395823c9cd
6 changed files with 178 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/class-wp-customize-widgets.php
+7 -2
View File
@@ -733,7 +733,8 @@ final class WP_Customize_Widgets {
'reorderModeOn' => __( 'Reorder mode enabled' ),
'reorderModeOff' => __( 'Reorder mode closed' ),
'reorderLabelOn' => esc_attr__( 'Reorder widgets' ),
'reorderLabelOff' => esc_attr__( 'Close reorder mode' ),
'widgetsFound' => __( 'Number of widgets found: %d' ),
'noWidgetsFound' => __( 'No widgets found.' ),
),
'tpl' => array(
'widgetReorderNav' => $widget_reorder_nav_tpl,
@@ -777,7 +778,10 @@ final class WP_Customize_Widgets {
</div>
<div id="available-widgets-filter">
<label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
<input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />
<input type="text" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" aria-describedby="widgets-search-desc" />
<div class="search-icon" aria-hidden="true"></div>
<button type="button" class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
<p class="screen-reader-text" id="widgets-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
</div>
<div id="available-widgets-list">
<?php foreach ( $this->get_available_widgets() as $available_widget ): ?>
@@ -785,6 +789,7 @@ final class WP_Customize_Widgets {
<?php echo $available_widget['control_tpl']; ?>
</div>
<?php endforeach; ?>
<p class="no-widgets-found-message"><?php _e( 'No widgets found.' ); ?></p>
</div><!-- #available-widgets-list -->
</div><!-- #available-widgets -->
</div><!-- #widgets-left -->