Ticket #57949: 57949.diff

src/wp-admin/css/common.css

@@ -1081 +1081 @@
 }
 
 .wp-filter .search-form input[type="search"] {
-        margin: 1px 0;
         width: 280px;
         max-width: 100%;
 }
@@ -4063 +4062 @@
         }
 
         .wp-filter .search-form input[type="search"] {
+                width: 100%;
                 font-size: 1rem;
         }
 
@@ -4116 +4116 @@
         .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) {

src/wp-admin/css/forms.css

@@ -1650 +1650 @@
 
         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"] {

src/wp-admin/css/media.css

@@ -583 +583 @@
         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;
 }

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

@@ -312 +312 @@
                         </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

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

@@ -924 +924 @@
         max-width: 100%;
 }
 
-.media-frame .media-search-input-label {
-        position: absolute;
-        left: 0;
-        top: 10px;
-        margin: 0;
-        line-height: 1;
-}
-
 /**
  * Attachments
  */
@@ -1217 +1209 @@
 .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 +2799 @@
         }
 
         .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,
         .attachment-details .copy-to-clipboard-container .success {
                 font-size: 14px;