WordPress.org
Get WordPress

Make WordPress Core

Changeset 58146


Ignore:
Timestamp:
05/14/2024 04:47:03 PM (5 months ago)
Author:
joedolson
Message:

Administration: A11y: Replace placeholders with visible labels.

Add visible labels to inputs that are using placeholder attributes as a substitute for visible labeling.

Labels added or made visible on the customizer theme search, customizer widget search, customizer menu item search, customizer new page UI, the search plugins screens, the media search screens, and the classic editor link inserter.

Props afercia, joedolson, rcreators, sabernhardt.
See #40331.

Location:
trunk/src
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/vendor/tinymce/plugins/wplink/plugin.js

    r57654 r58146  
    5757            return (
    5858                '<div id="' + this._id + '" class="wp-link-input">' +
    59                     '<input type="text" value="" placeholder="' + tinymce.translate( 'Paste URL or type to search' ) + '" />' +
     59                    '<label for="' + this._id + '_label">' + tinymce.translate( 'Paste URL or type to search' ) + '</label><input id="' + this._id + '_label" type="text" value="" />' +
    6060                    '<input type="text" style="display:none" value="" />' +
    6161                '</div>'
    … …  
    6363        },
    6464        setURL: function( url ) {
    65             this.getEl().firstChild.value = url;
     65            this.getEl().firstChild.nextSibling.value = url;
    6666        },
    6767        getURL: function() {
    68             return tinymce.trim( this.getEl().firstChild.value );
     68            return tinymce.trim( this.getEl().firstChild.nextSibling.value );
    6969        },
    7070        getLinkText: function() {
    71             var text = this.getEl().firstChild.nextSibling.value;
     71            var text = this.getEl().firstChild.nextSibling.nextSibling.value;
    7272
    7373            if ( ! tinymce.trim( text ) ) {
    … …  
    7878        },
    7979        reset: function() {
    80             var urlInput = this.getEl().firstChild;
     80            var urlInput = this.getEl().firstChild.nextSibling;
    8181
    8282            urlInput.value = '';
    … …  
    395395            onPostRender: function() {
    396396                var element = this.getEl(),
    397                     input = element.firstChild,
     397                    input = element.firstChild.nextSibling,
    398398                    $input, cache, last;
    399399
    … …  
    439439                        select: function( event, ui ) {
    440440                            $input.val( ui.item.permalink );
    441                             $( element.firstChild.nextSibling ).val( ui.item.title );
     441                            $( element.firstChild.nextSibling.nextSibling ).val( ui.item.title );
    442442
    443443                            if ( 9 === event.keyCode && typeof window.wpLinkL10n !== 'undefined' ) {

  • trunk/src/js/_enqueues/wp/customize/controls.js

    r57987 r58146  
    19181918                var $themeContainer = $( '.customize-themes-full-container' ),
    19191919                    $filterToggle = $( e.currentTarget );
    1920                 section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
     1920                section.filtersHeight = $filterToggle.parents( '.themes-filter-bar' ).next( '.filter-drawer' ).height();
    19211921
    19221922                if ( 0 < $themeContainer.scrollTop() ) {
    … …  
    19331933                        return 'true' === attr ? 'false' : 'true';
    19341934                    })
    1935                     .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
     1935                    .parents( '.themes-filter-bar' ).next( '.filter-drawer' ).slideToggle( 180, 'linear' );
    19361936
    19371937                if ( $filterToggle.hasClass( 'open' ) ) {
    … …  
    37403740            var control = this, newItem;
    37413741            if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) {
    3742                 newItem = control.container.find( '.new-content-item' );
     3742                newItem = control.container.find( '.new-content-item-wrapper' );
    37433743                newItem.hide(); // Hide in JS to preserve flex display when showing.
    37443744                control.container.on( 'click', '.add-new-toggle', function( e ) {
    … …  
    40864086
    40874087            toggle = control.container.find( '.add-new-toggle' );
    4088             container = control.container.find( '.new-content-item' );
     4088            container = control.container.find( '.new-content-item-wrapper' );
    40894089            input = control.container.find( '.create-item-input' );
    40904090            title = input.val();

  • trunk/src/js/media/views/attachments/browser.js

    r57605 r58146  
    379379
    380380        if ( this.options.search ) {
    381             // Search is an input, a visually hidden label element needs to be rendered before.
     381            // Search is an input, a label element needs to be rendered before.
    382382            this.toolbar.set( 'searchLabel', new wp.media.view.Label({
    383383                value: l10n.searchLabel,

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

    r58081 r58146  
    10911091.wp-filter .search-form {
    10921092    float: right;
    1093     margin: 10px 0;
     1093    display: flex;
     1094    align-items: center;
     1095    column-gap: .5rem;
    10941096}
    10951097
    … …  
    11201122.no-js .wp-filter .search-form.search-plugins .button {
    11211123    display: inline-block;
    1122     margin-top: 10px;
    11231124    vertical-align: top;
    11241125}
    … …  
    13601361        position: relative;
    13611362        max-width: 100%;
     1363    }
     1364    .wp-filter .search-form {
     1365        margin: 11px 0;
     1366        flex-wrap: wrap;
     1367        row-gap: 10px;
    13621368    }
    13631369}
    … …  
    41524158
    41534159    .wp-filter .search-form input[type="search"] {
    4154         width: 100%;
    41554160        font-size: 1rem;
    41564161    }
    … …  
    42064211        border-bottom: 1px solid #c3c4c7;
    42074212    }
     4213
     4214    .wp-filter .search-form.search-plugins label {
     4215        width: 100%;
     4216    }
    42084217}
    42094218

  • trunk/src/wp-admin/css/customize-controls.css

    r57553 r58146  
    10831083}
    10841084
    1085 #available-menu-items .accordion-section-content .new-content-item,
    1086 .customize-control-dropdown-pages .new-content-item {
     1085#available-menu-items .accordion-section-content .new-content-item-wrapper,
     1086.customize-control-dropdown-pages .new-content-item-wrapper {
    10871087    width: calc(100% - 30px);
    10881088    padding: 8px 15px;
    … …  
    10911091    z-index: 10;
    10921092    background: #f0f0f1;
     1093}
     1094
     1095.customize-control-dropdown-pages .new-content-item-wrapper {
     1096    width: 100%;
     1097    padding: 0;
     1098    position: static;
     1099}
     1100
     1101#available-menu-items .accordion-section-content .new-content-item,
     1102.customize-control-dropdown-pages .new-content-item {
    10931103    display: flex;
    10941104}
    … …  
    10981108    padding: 5px 0 5px 1px;
    10991109    position: relative;
     1110}
     1111
     1112.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
     1113    padding: 0;
     1114}
     1115
     1116.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
     1117    line-height: 1.6;
    11001118}
    11011119
    … …  
    18161834}
    18171835
    1818 .themes-filter-bar .feature-filter-toggle {
    1819     float: right;
    1820     margin: 3px 0 3px 25px;
    1821 }
    1822 
    18231836.themes-filter-bar .feature-filter-toggle:before {
    18241837    content: "\f111";
    … …  
    18791892.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
    18801893    animation: .6s themes-fade-in 1;
    1881 }
    1882 
    1883 .control-panel-themes .filter-themes-count {
    1884     position: relative;
    1885     float: right;
    1886     line-height: 2.6;
    18871894}
    18881895
    … …  
    20982105    border-bottom: 1px solid #dcdcde;
    20992106}
     2107.customize-preview-header.themes-filter-bar,
     2108.customize-preview-header.themes-filter-bar .search-form {
     2109    display: flex;
     2110    align-items: center;
     2111    gap: 10px;
     2112    flex-wrap: wrap;
     2113}
     2114
     2115.customize-preview-header.themes-filter-bar .search-form-input {
     2116    position: relative;
     2117}
     2118
     2119.customize-preview-header .filter-themes-wrapper {
     2120    display: grid;
     2121    align-items: center;
     2122    gap: 10px;
     2123    grid-template-columns: auto 1fr;
     2124}
     2125
     2126.customize-preview-header .filter-themes-wrapper .filter-themes-count {
     2127    justify-self: end;
     2128}
    21002129
    21012130@media screen and (min-width: 1670px) {
    … …  
    21102139    margin: 0;
    21112140    padding: 0;
     2141    display: flex;
     2142    align-items: center;
     2143    gap: 10px;
    21122144}
    21132145
    … …  
    21182150    width: 40%;
    21192151    min-width: 300px;
    2120     position: absolute;
    2121     top: 6px;
    2122     left: 25px;
    21232152    height: 32px;
    21242153    margin: 1px 0;
     2154    top: 0;
     2155    left: 0;
    21252156}
    21262157
    … …  
    21562187}
    21572188
     2189@media screen and (max-width: 960px) {
     2190    .customize-preview-header.themes-filter-bar {
     2191        height: 96px;
     2192    }
     2193}
     2194
    21582195@media screen and (max-width: 900px) {
    2159     .customize-preview-header.themes-filter-bar {
    2160         height: 86px;
    2161         padding-top: 46px;
    2162     }
    2163 
    21642196    .themes-filter-bar .wp-filter-search {
    2165         width: calc(100% - 50px);
     2197        width: 100%;
    21662198        margin: 0;
    21672199        min-width: 200px;
     2200    }
     2201
     2202    .customize-preview-header.themes-filter-bar,
     2203    .customize-preview-header.themes-filter-bar .search-form
     2204    .themes-filter-bar .themes-filter-container {
     2205        display: grid;
     2206        gap: 4px;
     2207    }
     2208
     2209    .customize-preview-header.themes-filter-bar .search-form-input {
     2210        display: flex;
     2211        flex-grow: 1;
    21682212    }
    21692213
    … …  
    25812625
    25822626#available-widgets-list {
    2583     top: 60px;
     2627    top: 82px;
    25842628    position: absolute;
    25852629    overflow: auto;
    … …  
    26252669    display: block;
    26262670    position: absolute;
    2627     top: 15px; /* 13 container padding +1 input margin +1 input border */
     2671    bottom: 15px; /* 13 container padding +1 input margin +1 input border */
    26282672    left: 16px;
    26292673    width: 30px;
    … …  
    26352679
    26362680#available-widgets-filter .clear-results,
    2637 #available-menu-items-search .clear-results {
     2681#available-menu-items-search .accordion-section-title .clear-results {
    26382682    position: absolute;
    2639     top: 15px; /* 13 container padding +1 input margin +1 input border */
     2683    top: 36px; /* 13 container padding +1 input margin +1 input border */
    26402684    right: 16px;
    26412685    width: 30px;
    … …  
    26962740.themes-filter-bar .search-icon {
    26972741    position: absolute;
    2698     top: 7px;
    2699     left: 26px;
     2742    top: 2px;
     2743    left: 2px;
    27002744    z-index: 1;
    27012745    color: #646970;
    … …  
    28152859    }
    28162860
    2817     .wp-core-ui .themes-filter-bar .feature-filter-toggle {
    2818         margin: 3px 0 3px 25px;
     2861    .customize-preview-header.themes-filter-bar .search-icon {
     2862        top: 6px;
    28192863    }
    28202864}
    … …  
    29532997
    29542998    #available-widgets-list {
    2955         top: 130px;
    2956     }
    2957 
    2958     #available-menu-items-search .clear-results,
    2959     #available-menu-items-search .search-icon {
    2960         top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
     2999        top: 152px;
     3000    }
     3001
     3002    #available-menu-items-search .clear-results {
     3003        top: 36px;
     3004        right: 16px;
    29613005    }
    29623006
    … …  
    29643008    .reordering .reorder-done {
    29653009        padding: 8px;
    2966     }
    2967 
    2968     .wp-core-ui .themes-filter-bar .feature-filter-toggle {
    2969         margin: 0;
    29703010    }
    29713011}

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r57553 r58146  
    558558#available-menu-items .accordion-section-title .no-items,
    559559#available-menu-items .cannot-expand .accordion-section-title .spinner,
    560 #available-menu-items .cannot-expand .accordion-section-title > button {
     560#available-menu-items .cannot-expand .accordion-section-title > button:not(#available-menu-items-search button.is-visible) {
    561561    display: none;
    562562}
    … …  
    582582
    583583#available-menu-items .accordion-section-content .available-menu-items-list {
    584     margin: 0 0 45px;
     584    margin: 0 0 64px;
    585585    padding: 1px 15px 15px;
    586586}
    … …  
    681681#available-menu-items-search .spinner {
    682682    position: absolute;
    683     top: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
     683    bottom: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
    684684    right: 21px;
    685685    margin: 0 !important;
    … …  
    690690    position: absolute;
    691691    left: 0;
    692     top: 60px; /* below title div / search input */
     692    top: 75px; /* below title div / search input */
    693693    bottom: 0; /* 100% height that still triggers lazy load */
    694694    max-height: none;
    … …  
    879879@media screen and (max-width: 640px) {
    880880    #available-menu-items #available-menu-items-search .accordion-section-content {
    881         top: 130px;
     881        top: 146px;
    882882    }
    883883}

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

    r57713 r58146  
    721721
    722722p.search-box {
     723    display: flex;
     724    flex-wrap: wrap;
     725    align-items: center;
     726    column-gap: 0.5rem;
     727    position: relative;
    723728    float: right;
    724     margin: 0;
     729    margin: 11px 0;
    725730}
    726731

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

    r57933 r58146  
    586586
    587587.media-frame-content .media-search-input-label {
    588     margin: 0 .2em 0 0;
    589588    vertical-align: baseline;
    590 }
    591 
    592 .media-frame.mode-grid .media-search-input-label {
    593     position: static;
    594     margin: 0 .5em 0 0;
    595589}
    596590
    … …  
    13741368        margin-bottom: 20px;
    13751369        display: flex;
     1370        flex-wrap: nowrap;
     1371        column-gap: 0;
     1372    }
     1373
     1374    .wp-filter p.search-box #media-search-input {
     1375        width: 100%;
    13761376    }
    13771377

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

    r58069 r58146  
    454454        ?>
    455455        <p class="search-box">
    456             <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?>:</label>
    457             <input type="search" id="<?php echo esc_attr( $input_id ); ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" placeholder="<?php esc_attr_e( 'Search installed plugins...' ); ?>" />
     456            <label for="<?php echo esc_attr( $input_id ); ?>"><?php echo $text; ?></label>
     457            <input type="search" id="<?php echo esc_attr( $input_id ); ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" />
    458458            <?php submit_button( $text, 'hide-if-js', '', false, array( 'id' => 'search-submit' ) ); ?>
    459459        </p>

  • trunk/src/wp-admin/includes/plugin-install.php

    r58073 r58146  
    321321    <form class="search-form search-plugins" method="get">
    322322        <input type="hidden" name="tab" value="search" />
     323        <label for="search-plugins"><?php _e( 'Search Plugins' ); ?></label>
     324        <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" />
    323325        <label class="screen-reader-text" for="typeselector">
    324326            <?php
    … …  
    332334            <option value="tag"<?php selected( 'tag', $type ); ?>><?php _ex( 'Tag', 'Plugin Installer' ); ?></option>
    333335        </select>
    334         <label class="screen-reader-text" for="search-plugins">
    335             <?php
    336             /* translators: Hidden accessibility text. */
    337             _e( 'Search Plugins' );
    338             ?>
    339         </label>
    340         <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search plugins...' ); ?>" />
    341336        <?php submit_button( __( 'Search Plugins' ), 'hide-if-js', false, false, array( 'id' => 'search-submit' ) ); ?>
    342337    </form>

  • trunk/src/wp-admin/plugins.php

    r57658 r58146  
    791791
    792792<form class="search-form search-plugins" method="get">
    793 <?php $wp_list_table->search_box( __( 'Search Installed Plugins' ), 'plugin' ); ?>
     793<?php $wp_list_table->search_box( __( 'Search installed plugins' ), 'plugin' ); ?>
    794794</form>
    795795

  • trunk/src/wp-includes/class-wp-customize-control.php

    r57369 r58146  
    636636                        ?>
    637637                    </button>
    638                     <div class="new-content-item">
    639                         <label for="create-input-<?php echo esc_attr( $this->id ); ?>"><span class="screen-reader-text">
    640                             <?php
    641                             /* translators: Hidden accessibility text. */
    642                             _e( 'New page title' );
    643                             ?>
    644                         </span></label>
    645                         <input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input" placeholder="<?php esc_attr_e( 'New page title&hellip;' ); ?>">
    646                         <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     638                    <div class="new-content-item-wrapper">
     639                        <label for="create-input-<?php echo esc_attr( $this->id ); ?>"><?php _e( 'New page title' ); ?></label>
     640                        <div class="new-content-item">
     641                            <input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input" >
     642                            <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     643                        </div>
    647644                    </div>
    648645                <?php endif; ?>

  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r57644 r58146  
    11641164            <div id="available-menu-items-search" class="accordion-section cannot-expand">
    11651165                <div class="accordion-section-title">
    1166                     <label class="screen-reader-text" for="menu-items-search">
    1167                         <?php
    1168                         /* translators: Hidden accessibility text. */
    1169                         _e( 'Search Menu Items' );
    1170                         ?>
    1171                     </label>
    1172                     <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ); ?>" aria-describedby="menu-items-search-desc" />
     1166                    <label for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
     1167                    <input type="text" id="menu-items-search" aria-describedby="menu-items-search-desc" />
    11731168                    <p class="screen-reader-text" id="menu-items-search-desc">
    11741169                        <?php
    … …  
    11781173                    </p>
    11791174                    <span class="spinner"></span>
     1175                    <div class="search-icon" aria-hidden="true"></div>
     1176                    <button type="button" class="clear-results"><span class="screen-reader-text">
     1177                        <?php
     1178                        /* translators: Hidden accessibility text. */
     1179                        _e( 'Clear Results' );
     1180                        ?>
     1181                    </span></button>
    11801182                </div>
    1181                 <div class="search-icon" aria-hidden="true"></div>
    1182                 <button type="button" class="clear-results"><span class="screen-reader-text">
    1183                     <?php
    1184                     /* translators: Hidden accessibility text. */
    1185                     _e( 'Clear Results' );
    1186                     ?>
    1187                 </span></button>
    11881183                <ul class="accordion-section-content available-menu-items-list" data-type="search"></ul>
    11891184            </div>
    … …  
    12441239                    <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
    12451240                    <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
    1246                         <div class="new-content-item">
    1247                             <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
    1248                             <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
    1249                             <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     1241                        <div class="new-content-item-wrapper">
     1242                            <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
     1243                            <div class="new-content-item">
     1244                                <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input">
     1245                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     1246                            </div>
    12501247                        </div>
    12511248                    <?php endif; ?>

  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r57309 r58146  
    910910            </div>
    911911            <div id="available-widgets-filter">
    912                 <label class="screen-reader-text" for="widgets-search">
     912                <label for="widgets-search">
    913913                    <?php
    914914                    /* translators: Hidden accessibility text. */
    … …  
    916916                    ?>
    917917                </label>
    918                 <input type="text" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ); ?>" aria-describedby="widgets-search-desc" />
     918                <input type="text" id="widgets-search" aria-describedby="widgets-search-desc" />
    919919                <div class="search-icon" aria-hidden="true"></div>
    920920                <button type="button" class="clear-results"><span class="screen-reader-text">

  • trunk/src/wp-includes/css/editor.css

    r57553 r58146  
    17381738}
    17391739
     1740.mce-inline-toolbar-grp div.mce-flow-layout-item > div {
     1741    display: flex;
     1742    align-items: flex-end;
     1743}
     1744
    17401745div.wp-link-input {
    17411746    float: left;
    17421747    margin: 2px;
    17431748    max-width: 694px;
     1749}
     1750
     1751div.wp-link-input label {
     1752    margin-bottom: 4px;
     1753    display: block;
    17441754}
    17451755

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

    r57881 r58146  
    12101210    align-items: center;
    12111211    column-gap: .5rem;
     1212    margin: 11px 0;
    12121213}
    12131214
    … …  
    28032804
    28042805    .mode-grid .attachments-browser .media-toolbar-primary {
    2805         display: flex;
     2806        display: grid;
     2807        grid-template-columns: auto 1fr;
    28062808    }
    28072809

  • trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

    r56435 r58146  
    125125        <# if ( 'wporg' === data.action ) { #>
    126126            <div class="search-form">
    127                 <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text">
    128                     <?php
    129                     /* translators: Hidden accessibility text. */
    130                     _e( 'Search themes&hellip;' );
    131                     ?>
    132                 </label>
    133                 <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
    134                 <div class="search-icon" aria-hidden="true"></div>
    135                 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
    136                     <?php
    137                     /* translators: Hidden accessibility text. */
    138                     _e( 'The search results will be updated as you type.' );
    139                     ?>
    140                 </span>
    141             </div>
     127                <label for="wp-filter-search-input-{{ data.id }}"><?php _e( 'Search themes' ); ?></label>
     128                <div class="search-form-input">
     129                    <input type="search" id="wp-filter-search-input-{{ data.id }}" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
     130                    <div class="search-icon" aria-hidden="true"></div>
     131                    <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
     132                        <?php
     133                        /* translators: Hidden accessibility text. */
     134                        _e( 'The search results will be updated as you type.' );
     135                        ?>
     136                    </span>
     137                </div>
     138            </div>
     139        <# } else { #>
     140            <div class="themes-filter-container">
     141                <label for="{{ data.id }}-themes-filter"><?php _e( 'Search themes' ); ?></label>
     142                <div class="search-form-input">
     143                    <input type="search" id="{{ data.id }}-themes-filter" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
     144                    <div class="search-icon" aria-hidden="true"></div>
     145                    <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
     146                        <?php
     147                        /* translators: Hidden accessibility text. */
     148                        _e( 'The search results will be updated as you type.' );
     149                        ?>
     150                    </span>
     151                </div>
     152            </div>
     153        <# } #>
     154        <div class="filter-themes-wrapper">
     155            <# if ( 'wporg' === data.action ) { #>
    142156            <button type="button" class="button feature-filter-toggle">
    143157                <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
    … …  
    148162                </span>
    149163            </button>
    150         <# } else { #>
    151             <div class="themes-filter-container">
    152                 <label for="{{ data.id }}-themes-filter" class="screen-reader-text">
     164            <# } #>
     165            <div class="filter-themes-count">
     166                <span class="themes-displayed">
    153167                    <?php
    154                     /* translators: Hidden accessibility text. */
    155                     _e( 'Search themes&hellip;' );
    156                     ?>
    157                 </label>
    158                 <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
    159                 <div class="search-icon" aria-hidden="true"></div>
    160                 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
    161                     <?php
    162                     /* translators: Hidden accessibility text. */
    163                     _e( 'The search results will be updated as you type.' );
     168                    /* translators: %s: Number of themes displayed. */
     169                    printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
    164170                    ?>
    165171                </span>
    166172            </div>
    167         <# } #>
    168         <div class="filter-themes-count">
    169             <span class="themes-displayed">
    170                 <?php
    171                 /* translators: %s: Number of themes displayed. */
    172                 printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
    173                 ?>
    174             </span>
    175173        </div>
    176174        <?php

  • trunk/src/wp-includes/media.php

    r58143 r58146  
    48264826        'filterByDate'                => __( 'Filter by date' ),
    48274827        'filterByType'                => __( 'Filter by type' ),
    4828         'searchLabel'                 => __( 'Search' ),
     4828        'searchLabel'                 => __( 'Search media' ),
    48294829        'searchMediaLabel'            => __( 'Search media' ),          // Backward compatibility pre-5.3.
    48304830        'searchMediaPlaceholder'      => __( 'Search media items...' ), // Placeholder (no ellipsis), backward compatibility pre-5.3.
Note: See TracChangeset for help on using the changeset viewer.