WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
05/14/2024 04:47:03 PM (4 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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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
Note: See TracChangeset for help on using the changeset viewer.