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.
Built from https://develop.svn.wordpress.org/trunk@58405


git-svn-id: http://core.svn.wordpress.org/trunk@57854 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/themes-rtl.css

@@ -20,23 +20,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-right: 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;
-	right: 20px;
 	margin: 0;
 	width: 280px;
 }
@@ -956,11 +956,15 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 		clear: both;
 		right: 0;
 		left: 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;
@@ -1030,6 +1034,13 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	padding-right: 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;

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;

wp-admin/js/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'
 	},

wp-admin/network/site-themes.php

@@ -237,7 +237,7 @@ if ( isset( $_GET['enabled'] ) ) {
 <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>
 

wp-admin/network/themes.php

@@ -460,7 +460,7 @@ if ( '' !== $message ) {
 ?>
 
 <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

wp-admin/theme-install.php

@@ -56,7 +56,6 @@ wp_localize_script(
 		'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 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 		<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

wp-admin/themes.php

@@ -232,8 +232,7 @@ wp_localize_script(
 		),
 		'l10n'     => array(
 			'addNew'            => __( 'Add New Theme' ),
-			'search'            => __( 'Search Installed Themes' ),
+			'search'            => __( 'Search installed themes' ),
-			'searchPlaceholder' => __( 'Search installed themes...' ), // Placeholder (no ellipsis).
 			/* translators: %d: Number of themes. */
 			'themesFound'       => __( 'Number of Themes found: %d' ),
 			'noThemesFound'     => __( 'No themes found. Try a different search.' ),
@@ -252,14 +251,12 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 	<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(

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.6-beta2-58403';
+$wp_version = '6.6-beta2-58405';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.