Accessibility: Wrap the installed themes search field within a form element.

Valid code is important not just to formally meet the specification, but also to
ensure user agents, including assistive technologies, can accurately interpret
and parse content. When HTML elements are not used in the recommended way,
user agents may render them in unexpected ways. It can also become a problem for
compatibility with older or even future browsers, devices, or other software.
See W3C WCAG 4.1.1.

Props takayukister, aryamaaru.
Fixes #34881.


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

src/wp-admin/css/themes.css

@@ -20,6 +20,10 @@
 }
 
 /* Search form */
+.themes-php .wp-filter-search-form {
+	display: inline;
+}
+
 .themes-php .wp-filter-search {
 	position: relative;
 	top: -2px;

src/wp-admin/js/theme.js

@@ -83,7 +83,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
 	},
 
 	// Defines search element container
-	searchContainer: $( '.search-form' ),
+	searchContainer: $( '.wp-filter-search-form' ),
 
 	// Search input and view
 	// for current theme collection

src/wp-admin/themes.php

@@ -160,7 +160,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 		<a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js page-title-action"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a>
 	<?php endif; ?>
 
-	<span class="search-form"></span>
+	<form class="wp-filter-search-form"></form>
 
 	<hr class="wp-header-end">
 <?php