Changeset 38709 for trunk/src/wp-includes/class-wp-customize-widgets.php

Timestamp:

10/03/2016 04:27:55 PM (7 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:

• trunk/src/wp-includes/class-wp-customize-widgets.php (modified) (3 diffs)

trunk/src/wp-includes/class-wp-customize-widgets.php

@@ -734 +734 @@
                 '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(
@@ -778 +779 @@
             <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">
@@ -786 +790 @@
                 </div>
             <?php endforeach; ?>
+            <p class="no-widgets-found-message"><?php _e( 'No widgets found.' ); ?></p>
             </div><!-- #available-widgets-list -->
         </div><!-- #available-widgets -->