From ced07754fa79c2574a8edf61a5da11819b2a061d Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Sun, 25 Jun 2023 17:20:01 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@56023 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css                       |  6 +-----
 src/wp-admin/css/forms.css                        |  6 ++----
 src/wp-admin/css/media.css                        | 10 ----------
 .../includes/class-wp-media-list-table.php        | 12 ++++++++++--
 src/wp-includes/css/media-views.css               | 15 ++++++---------
 5 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index d26d644c55..24892a65a1 100644
--- a/src/wp-admin/css/common.css
+++ b/src/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) {
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 54ebeea537..09ad1a3c3a 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/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"] {
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 0ca42938d1..5e604adbc5 100644
--- a/src/wp-admin/css/media.css
+++ b/src/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;
 }
diff --git a/src/wp-admin/includes/class-wp-media-list-table.php b/src/wp-admin/includes/class-wp-media-list-table.php
index 5ae5b25240..f05febb0fd 100644
--- a/src/wp-admin/includes/class-wp-media-list-table.php
+++ b/src/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>
-				<input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
+				<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
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 5e70fdb992..e786d9c9b8 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/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,