Make WordPress Core

Changeset 56023


Ignore:
Timestamp:
06/25/2023 05:20:01 PM (10 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r55984 r56023  
    10821082
    10831083.wp-filter .search-form input[type="search"] {
    1084     margin: 1px 0;
    10851084    width: 280px;
    10861085    max-width: 100%;
     
    40644063
    40654064    .wp-filter .search-form input[type="search"] {
     4065        width: 100%;
    40664066        font-size: 1rem;
    40674067    }
     
    41174117        border-bottom: 1px solid #c3c4c7;
    41184118    }
    4119 
    4120     .wp-filter .search-form input[type="search"] {
    4121         width: 100%;
    4122     }
    41234119}
    41244120
  • trunk/src/wp-admin/css/forms.css

    r56008 r56023  
    16511651    p.search-box {
    16521652        float: none;
    1653         position: absolute;
    1654         bottom: 0;
    1655         width: 98%;
    1656         height: 90px;
     1653        width: 100%;
    16571654        margin-bottom: 20px;
     1655        display: flex;
    16581656    }
    16591657
  • trunk/src/wp-admin/css/media.css

    r55919 r56023  
    582582.media-frame.mode-grid .search {
    583583    margin-top: 0;
    584 }
    585 
    586 .media-search-input-label {
    587     margin: 0 .2em 0 0;
    588     vertical-align: baseline;
    589 }
    590 
    591 .media-frame.mode-grid .media-search-input-label {
    592     position: static;
    593     margin: 0 .5em 0 0;
    594584}
    595585
  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r55971 r56023  
    313313
    314314            <div class="search-form">
    315                 <label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
    316                 <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
     315                <p class="search-box">
     316                    <label class="screen-reader-text" for="media-search-input">
     317                    <?php
     318                    /* translators: Hidden accessibility text. */
     319                    esc_html_e( 'Search Media' );
     320                    ?>
     321                    </label>
     322                    <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
     323                    <input id="search-submit" type="submit" class="button" value="<?php esc_attr_e( 'Search Media' ); ?>">
     324                </p>
    317325            </div>
    318326        </div>
  • trunk/src/wp-includes/css/media-views.css

    r55919 r56023  
    925925}
    926926
    927 .media-frame .media-search-input-label {
    928     position: absolute;
    929     left: 0;
    930     top: 10px;
    931     margin: 0;
    932     line-height: 1;
    933 }
    934 
    935927/**
    936928 * Attachments
     
    12181210    display: flex;
    12191211    align-items: center;
     1212    column-gap: .5rem;
    12201213}
    12211214
     
    28072800
    28082801    .mode-grid .attachments-browser .media-toolbar-primary {
    2809         display: block;
     2802        display: flex;
     2803    }
     2804
     2805    .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
     2806        width: 100%;
    28102807    }
    28112808
Note: See TracChangeset for help on using the changeset viewer.