Changeset 56023

Timestamp:

06/25/2023 05:20:01 PM (21 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (3 diffs)
• wp-admin/css/forms.css (modified) (1 diff)
• wp-admin/css/media.css (modified) (1 diff)
• wp-admin/includes/class-wp-media-list-table.php (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (3 diffs)

trunk/src/wp-admin/css/common.css

@@ -1082 +1082 @@
 
 .wp-filter .search-form input[type="search"] {
-    margin: 1px 0;
     width: 280px;
     max-width: 100%;
@@ -4064 +4063 @@
 
     .wp-filter .search-form input[type="search"] {
+        width: 100%;
         font-size: 1rem;
     }
@@ -4117 +4117 @@
         border-bottom: 1px solid #c3c4c7;
     }
-
-    .wp-filter .search-form input[type="search"] {
-        width: 100%;
-    }
 }
 

trunk/src/wp-admin/css/forms.css

@@ -1651 +1651 @@
     p.search-box {
         float: none;
-        position: absolute;
-        bottom: 0;
-        width: 98%;
-        height: 90px;
+        width: 100%;
         margin-bottom: 20px;
+        display: flex;
     }
 

trunk/src/wp-admin/css/media.css

@@ -582 +582 @@
 .media-frame.mode-grid .search {
     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;
 }
 

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

@@ -313 +313 @@
 
             <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>

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

@@ -925 +925 @@
 }
 
-.media-frame .media-search-input-label {
-    position: absolute;
-    left: 0;
-    top: 10px;
-    margin: 0;
-    line-height: 1;
-}
-
 /**
  * Attachments
@@ -1218 +1210 @@
     display: flex;
     align-items: center;
+    column-gap: .5rem;
 }
 
@@ -2807 +2800 @@
 
     .mode-grid .attachments-browser .media-toolbar-primary {
-        display: block;
+        display: flex;
+    }
+
+    .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
+        width: 100%;
     }