Administration: Consistent positioning and size of search form.

Move the visual positioning of the posts search form into it's DOM position. Fixes an accessibility bug where the keyboard focus sequence did not match the visual order. Change the media search form in list view to match the format of other post views. Give search forms a consistent layout on mobile.

Props oglekler, sabernhardt, joedolson.
Fixes #57949.
Built from https://develop.svn.wordpress.org/trunk@56023


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

wp-admin/css/common-rtl.css

@@ -1082,7 +1082,6 @@ th.action-links {
 }
 
 .wp-filter .search-form input[type="search"] {
-	margin: 1px 0;
 	width: 280px;
 	max-width: 100%;
 }
@@ -4064,6 +4063,7 @@ img {
 	}
 
 	.wp-filter .search-form input[type="search"] {
+		width: 100%;
 		font-size: 1rem;
 	}
 
@@ -4117,10 +4117,6 @@ img {
 	.nav-tab-active:focus:active {
 		border-bottom: 1px solid #c3c4c7;
 	}
-
-	.wp-filter .search-form input[type="search"] {
-		width: 100%;
-	}
 }
 
 @media screen and (max-width: 480px) {

wp-admin/css/common.css

@@ -1081,7 +1081,6 @@ th.action-links {
 }
 
 .wp-filter .search-form input[type="search"] {
-	margin: 1px 0;
 	width: 280px;
 	max-width: 100%;
 }
@@ -4063,6 +4062,7 @@ img {
 	}
 
 	.wp-filter .search-form input[type="search"] {
+		width: 100%;
 		font-size: 1rem;
 	}
 
@@ -4116,10 +4116,6 @@ img {
 	.nav-tab-active:focus:active {
 		border-bottom: 1px solid #c3c4c7;
 	}
-
-	.wp-filter .search-form input[type="search"] {
-		width: 100%;
-	}
 }
 
 @media screen and (max-width: 480px) {

wp-admin/css/forms-rtl.css

@@ -1651,11 +1651,9 @@ table.form-table td .updated p {
 
 	p.search-box {
 		float: none;
-		position: absolute;
-		bottom: 0;
-		width: 98%;
-		height: 90px;
+		width: 100%;
 		margin-bottom: 20px;
+		display: flex;
 	}
 
 	p.search-box input[name="s"] {

wp-admin/css/forms.css

@@ -1650,11 +1650,9 @@ table.form-table td .updated p {
 
 	p.search-box {
 		float: none;
-		position: absolute;
-		bottom: 0;
-		width: 98%;
-		height: 90px;
+		width: 100%;
 		margin-bottom: 20px;
+		display: flex;
 	}
 
 	p.search-box input[name="s"] {

wp-admin/css/media-rtl.css

@@ -584,16 +584,6 @@ border color while dragging a file over the uploader drop area */
 	margin-top: 0;
 }
 
-.media-search-input-label {
-	margin: 0 0 0 .2em;
-	vertical-align: baseline;
-}
-
-.media-frame.mode-grid .media-search-input-label {
-	position: static;
-	margin: 0 0 0 .5em;
-}
-
 .attachments-browser .media-toolbar-secondary > .media-button {
 	margin-left: 10px;
 }

wp-admin/css/media.css

@@ -583,16 +583,6 @@ border color while dragging a file over the uploader drop area */
 	margin-top: 0;
 }
 
-.media-search-input-label {
-	margin: 0 .2em 0 0;
-	vertical-align: baseline;
-}
-
-.media-frame.mode-grid .media-search-input-label {
-	position: static;
-	margin: 0 .5em 0 0;
-}
-
 .attachments-browser .media-toolbar-secondary > .media-button {
 	margin-right: 10px;
 }

wp-admin/includes/class-wp-media-list-table.php

@@ -312,8 +312,16 @@ class WP_Media_List_Table extends WP_List_Table {
 			</div>
 
 			<div class="search-form">
-				<label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
+				<p class="search-box">
+					<label class="screen-reader-text" for="media-search-input">
+					<?php
+					/* translators: Hidden accessibility text. */
+					esc_html_e( 'Search Media' );
+					?>
+					</label>
 					<input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
+					<input id="search-submit" type="submit" class="button" value="<?php esc_attr_e( 'Search Media' ); ?>">
+				</p>
 			</div>
 		</div>
 		<?php

wp-includes/css/media-views-rtl.css

@@ -925,14 +925,6 @@
 	max-width: 100%;
 }
 
-.media-frame .media-search-input-label {
-	position: absolute;
-	right: 0;
-	top: 10px;
-	margin: 0;
-	line-height: 1;
-}
-
 /**
  * Attachments
  */
@@ -1218,6 +1210,7 @@
 .mode-grid .attachments-browser .media-toolbar-primary {
 	display: flex;
 	align-items: center;
+	column-gap: .5rem;
 }
 
 .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
@@ -2807,7 +2800,11 @@
 	}
 
 	.mode-grid .attachments-browser .media-toolbar-primary {
-		display: block;
+		display: flex;
+	}
+
+	.mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
+		width: 100%;
 	}
 
 	.media-sidebar .copy-to-clipboard-container .success,

wp-includes/css/media-views.css

@@ -924,14 +924,6 @@
 	max-width: 100%;
 }
 
-.media-frame .media-search-input-label {
-	position: absolute;
-	left: 0;
-	top: 10px;
-	margin: 0;
-	line-height: 1;
-}
-
 /**
  * Attachments
  */
@@ -1217,6 +1209,7 @@
 .mode-grid .attachments-browser .media-toolbar-primary {
 	display: flex;
 	align-items: center;
+	column-gap: .5rem;
 }
 
 .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
@@ -2806,7 +2799,11 @@
 	}
 
 	.mode-grid .attachments-browser .media-toolbar-primary {
-		display: block;
+		display: flex;
+	}
+
+	.mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
+		width: 100%;
 	}
 
 	.media-sidebar .copy-to-clipboard-container .success,

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.3-alpha-56022';
+$wp_version = '6.3-alpha-56023';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.