Administration: A11y: Add visible labels in theme UI.

Finish task to replace placeholders used for labels with visible label elements. Add label elements in theme browser and theme installation screen. Change position of search input to match other user interfaces in WordPress.

Also crediting all contributors to ticket #61389, which this also closes.

Props joedolson, rcreators, sabernhardt, balub, rejaulalomkhan, syamraj24, nazmul111, krupajnanda, huzaifaalmesbah, hmbashar, mdnesarmridha, colorful-tones, printsachen1.
Fixes #40331, #61389.

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

src/js/_enqueues/wp/theme.js

@@ -96,7 +96,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
 	},
 
 	// Defines search element container.
-	searchContainer: $( '.search-form' ),
+	searchContainer: $( '.search-form .search-box' ),
 
 	// Search input and view
 	// for current theme collection.
@@ -118,7 +118,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
 		// Render and append after screen title.
 		view.render();
 		this.searchContainer
-			.append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
+			.append( $.parseHTML( '<label for="wp-filter-search-input">' + l10n.search + '</label>' ) )
 			.append( view.el )
 			.on( 'submit', function( event ) {
 				event.preventDefault();
@@ -1359,7 +1359,6 @@ themes.view.Search = wp.Backbone.View.extend({
 	searching: false,
 
 	attributes: {
-		placeholder: l10n.searchPlaceholder,
 		type: 'search',
 		'aria-describedby': 'live-search-desc'
 	},

src/wp-admin/css/themes.css

@@ -19,23 +19,23 @@ body.js .theme-browser.search-loading {
 	clear: both;
 }
 
-.themes-php:not(.network-admin) .wrap h1 {
-	margin-bottom: 15px;
-}
-
 .themes-php .wrap h1 .button {
 	margin-left: 20px;
 }
 
 /* Search form */
 .themes-php .search-form {
-	display: inline;
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+	top: 0;
+	gap: .5rem;
+	width: 100%;
+	justify-content: end;
 }
 
 .themes-php .wp-filter-search {
 	position: relative;
-	top: -2px;
-	left: 20px;
 	margin: 0;
 	width: 280px;
 }
@@ -955,11 +955,15 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 		clear: both;
 		left: 0;
 		right: 0;
-		margin: -5px 0 20px;
 		width: 100%;
 		max-width: 280px;
 	}
 
+	.theme-install-php .wp-filter p.search-box {
+		display: grid;
+		row-gap: .5rem;
+	}
+
 	.theme-browser .theme.add-new-theme span:after {
 		font: normal 60px/90px dashicons;
 		width: 80px;
@@ -1029,6 +1033,13 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	padding-left: 20px;
 }
 
+/* Override column gap adjustment in media library. */
+@media only screen and (max-width: 1000px) {
+	.theme-install-php .wp-filter p.search-box {
+		column-gap: .5rem;
+	}
+}
+
 .theme-install-php a.upload,
 .theme-install-php a.browse-themes {
 	cursor: pointer;

src/wp-admin/network/site-themes.php

@@ -237,7 +237,7 @@
 <p><?php _e( 'Network enabled themes are not shown on this screen.' ); ?></p>
 
 <form method="get">
-<?php $wp_list_table->search_box( __( 'Search Installed Themes' ), 'theme' ); ?>
+<?php $wp_list_table->search_box( __( 'Search installed themes' ), 'theme' ); ?>
 <input type="hidden" name="id" value="<?php echo esc_attr( $id ); ?>" />
 </form>
 

src/wp-admin/network/themes.php

@@ -460,7 +460,7 @@
 ?>
 
 <form method="get">
-<?php $wp_list_table->search_box( __( 'Search Installed Themes' ), 'theme' ); ?>
+<?php $wp_list_table->search_box( __( 'Search installed themes' ), 'theme' ); ?>
 </form>
 
 <?php

src/wp-admin/theme-install.php

@@ -56,7 +56,6 @@
 		'l10n'            => array(
 			'addNew'              => __( 'Add New Theme' ),
 			'search'              => __( 'Search Themes' ),
-			'searchPlaceholder'   => __( 'Search themes...' ), // Placeholder (no ellipsis).
 			'upload'              => __( 'Upload Theme' ),
 			'back'                => __( 'Back' ),
 			'error'               => sprintf(
@@ -217,7 +216,7 @@
 
 		<button type="button" class="button drawer-toggle" aria-expanded="false"><?php _e( 'Feature Filter' ); ?></button>
 
-		<form class="search-form"></form>
+		<form class="search-form"><p class="search-box"></p></form>
 
 		<div class="favorites-form">
 			<?php

src/wp-admin/themes.php

@@ -232,8 +232,7 @@
 		),
 		'l10n'     => array(
 			'addNew'            => __( 'Add New Theme' ),
-			'search'            => __( 'Search Installed Themes' ),
-			'searchPlaceholder' => __( 'Search installed themes...' ), // Placeholder (no ellipsis).
+			'search'            => __( 'Search installed themes' ),
 			/* translators: %d: Number of themes. */
 			'themesFound'       => __( 'Number of Themes found: %d' ),
 			'noThemesFound'     => __( 'No themes found. Try a different search.' ),
@@ -252,14 +251,12 @@
 	<h1 class="wp-heading-inline"><?php esc_html_e( 'Themes' ); ?>
 		<span class="title-count theme-count"><?php echo ! empty( $_GET['search'] ) ? __( '&hellip;' ) : count( $themes ); ?></span>
 	</h1>
-
 	<?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
 		<a href="<?php echo esc_url( admin_url( 'theme-install.php' ) ); ?>" class="hide-if-no-js page-title-action"><?php echo esc_html__( 'Add New Theme' ); ?></a>
 	<?php endif; ?>
-
-	<form class="search-form"></form>
-
 	<hr class="wp-header-end">
+	<form class="search-form search-themes"><p class="search-box"></p></form>
+
 <?php
 if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) {
 	wp_admin_notice(