Plugins: Improve Ajax search of installed plugins.

Fixes a few accessibility issues, tweaks the design of the search form to match other Ajax search fields and improves compatibility with older browsers.

See #37230.

git-svn-id: https://develop.svn.wordpress.org/trunk@38033 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/common.css

@@ -582,6 +582,7 @@ code {
 	color: #555d66;
 	font-size: 14px;
 	font-weight: 400;
+	line-height: 1;
 }
 
 .wrap .add-new-h2, /* deprecated */

src/wp-admin/css/forms.css

@@ -564,6 +564,16 @@ p.search-box {
 	margin: 0 4px 0 0;
 }
 
+.js.plugins-php .search-box .wp-filter-search {
+	margin: 0;
+	width: 280px;
+	font-size: 16px;
+	font-weight: 300;
+	line-height: 1.5;
+	padding: 3px 5px;
+	height: 32px;
+}
+
 input[type="text"].ui-autocomplete-loading,
 input[type="email"].ui-autocomplete-loading {
 	background-image: url(../images/loading.gif);

src/wp-admin/includes/ajax-actions.php

@@ -3810,6 +3810,7 @@ function wp_ajax_search_plugins() {
 
 	ob_start();
 	$wp_list_table->display();
+	$status['count'] = count( $wp_list_table->items );
 	$status['items'] = ob_get_clean();
 
 	wp_send_json_success( $status );

src/wp-admin/includes/class-wp-plugins-list-table.php

@@ -341,6 +341,37 @@ class WP_Plugins_List_Table extends WP_List_Table {
 			_e( 'You do not appear to have any plugins available at this time.' );
 	}
 
+	/**
+	 * Display the search box.
+	 *
+	 * @since 4.6.0
+	 * @access public
+	 *
+	 * @param string $text The search button text
+	 * @param string $input_id The search input id
+	 */
+	public function search_box( $text, $input_id ) {
+		if ( empty( $_REQUEST['s'] ) && ! $this->has_items() ) {
+			return;
+		}
+
+		$input_id = $input_id . '-search-input';
+
+		if ( ! empty( $_REQUEST['orderby'] ) ) {
+			echo '<input type="hidden" name="orderby" value="' . esc_attr( $_REQUEST['orderby'] ) . '" />';
+		}
+		if ( ! empty( $_REQUEST['order'] ) ) {
+			echo '<input type="hidden" name="order" value="' . esc_attr( $_REQUEST['order'] ) . '" />';
+		}
+		?>
+		<p class="search-box">
+			<label class="screen-reader-text" for="<?php echo $input_id ?>"><?php echo $text; ?>:</label>
+			<input type="search" id="<?php echo $input_id ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" placeholder="<?php echo esc_attr( 'Search installed plugins...' ); ?>"/>
+			<input type="submit" id="search-submit" class="button hide-if-js" value="<?php echo esc_attr( $text ); ?>">
+		</p>
+		<?php
+	}
+
 	/**
 	 *
 	 * @global string $status

src/wp-admin/js/updates.js

@@ -1584,7 +1584,8 @@
 	$( function() {
 		var $pluginFilter    = $( '#plugin-filter' ),
 			$bulkActionForm  = $( '#bulk-action-form' ),
-			$filesystemModal = $( '#request-filesystem-credentials-dialog' );
+			$filesystemModal = $( '#request-filesystem-credentials-dialog' ),
+			$pluginSearch    = $( '.plugins-php .wp-filter-search' );
 
 		/*
 		 * Whether a user needs to submit filesystem credentials.
@@ -1972,7 +1973,7 @@
 		 *
 		 * @since 4.6.0
 		 */
-		$( 'input.wp-filter-search, .wp-filter input[name="s"]' ).on( 'keyup search', _.debounce( function() {
+		$( '.plugin-install-php .wp-filter-search' ).on( 'keyup search', _.debounce( function() {
 			var $form = $( '#plugin-filter' ).empty(),
 				data  = _.extend( {
 					_ajax_nonce: wp.updates.ajaxNonce,
@@ -1987,7 +1988,9 @@
 				wp.updates.searchTerm = data.s;
 			}
 
-			history.pushState( null, '', location.href.split( '?' )[0] + '?' + $.param( _.omit( data, '_ajax_nonce' ) ) );
+			if ( history.pushState ) {
+				history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?' + $.param( _.omit( data, '_ajax_nonce' ) ) );
+			}
 
 			if ( 'undefined' !== typeof wp.updates.searchRequest ) {
 				wp.updates.searchRequest.abort();
@@ -2001,25 +2004,36 @@
 			} );
 		}, 500 ) );
 
+		if ( $pluginSearch.length > 0 ) {
+			$pluginSearch.attr( 'aria-describedby', 'live-search-desc' );
+		}
+
 		/**
 		 * Handles changes to the plugin search box on the Installed Plugins screen,
 		 * searching the plugin list dynamically.
 		 *
 		 * @since 4.6.0
 		 */
-		$( '#plugin-search-input' ).on( 'keyup search', _.debounce( function() {
+		$pluginSearch.on( 'keyup input', _.debounce( function( event ) {
 			var data = {
 				_ajax_nonce: wp.updates.ajaxNonce,
-				s:           $( '<p />' ).html( $( this ).val() ).text()
+				s:           event.target.value
 			};
 
+			// Clear on escape.
+			if ( 'keyup' === event.type && 27 === event.which ) {
+				event.target.value = '';
+			}
+
 			if ( wp.updates.searchTerm === data.s ) {
 				return;
 			} else {
 				wp.updates.searchTerm = data.s;
 			}
 
-			history.pushState( null, '', location.href.split( '?' )[0] + '?s=' + data.s );
+			if ( history.pushState ) {
+				history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?s=' + data.s );
+			}
 
 			if ( 'undefined' !== typeof wp.updates.searchRequest ) {
 				wp.updates.searchRequest.abort();
@@ -2045,6 +2059,12 @@
 				$( 'body' ).removeClass( 'loading-content' );
 				$bulkActionForm.append( response.items );
 				delete wp.updates.searchRequest;
+
+				if ( 0 === response.count ) {
+					wp.a11y.speak( wp.updates.l10n.noPluginsFound );
+				} else {
+					wp.a11y.speak( wp.updates.l10n.pluginsFound.replace( '%d', response.count ) );
+				}
 			} );
 		}, 500 ) );
 

src/wp-admin/plugins.php

@@ -371,6 +371,7 @@ get_current_screen()->add_help_tab( array(
 'title'		=> __('Overview'),
 'content'	=>
 	'<p>' . __('Plugins extend and expand the functionality of WordPress. Once a plugin is installed, you may activate it or deactivate it here.') . '</p>' .
+	'<p>' . __( 'The search for installed plugins will search for terms in their name, description, or author.' ) . ' <span id="live-search-desc" class="hide-if-no-js">' . __( 'The search results will be updated as you type.' ) . '</span></p>' .
 	'<p>' . sprintf(
 		/* translators: %s: WordPress Plugin Directory URL */
 		__( 'If you would like to see more plugins to choose from, click on the &#8220;Add New&#8221; button and you will be able to browse or search for additional plugins from the <a href="%s" target="_blank">WordPress.org Plugin Directory</a>. Plugins in the WordPress.org Plugin Directory are designed and developed by third parties, and are compatible with the license WordPress uses. Oh, and they&#8217;re free!' ),

src/wp-includes/script-loader.php

@@ -653,6 +653,8 @@ function wp_default_scripts( &$scripts ) {
 				'activateTheme'              => is_network_admin() ? __( 'Network Enable' ) : __( 'Activate' ),
 				'activateImporter'           => __( 'Activate importer' ),
 				'unknownError'               => __( 'An unknown error occured' ),
+				'pluginsFound'               => __( 'Number of plugins found: %d' ),
+				'noPluginsFound'             => __( 'No plugins found. Try a different search.' ),
 			),
 		) );
 

tests/qunit/fixtures/updates.js

@@ -39,7 +39,9 @@ window._wpUpdatesSettings = {
 		'activatePlugin': 'Activate',
 		'activateTheme': 'Activate',
 		'activateImporter': 'Activate importer',
-		'unknownError': 'An unknown error occured'
+		'unknownError': 'An unknown error occured',
+		'pluginsFound': 'Number of plugins found: %d',
+		'noPluginsFound': 'No plugins found. Try a different search.'
 	}
 };
 window._wpUpdatesItemCounts = {