WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/03/2017 03:43:22 PM (4 years ago)
Author:
afercia
Message:

Customize: Fix invalid HTML and aria-describedby values.

  • fixes invalid HTML and duplicate IDs
  • as per the Accessibility coding standards, all new code must use explicitly associated form labels
  • properly escapes a few HTML attributes

Props celloexpressions, afercia.
Fixes #42054.

File:
1 edited

Legend:

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

    r41648 r41709  
    101101        <# if ( 'wporg' === data.action ) { #>
    102102            <div class="search-form">
    103                 <label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
    104                 <input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
    105                 <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     103                <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
     104                <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">
     105                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
    106106            </div>
    107107            <button type="button" class="button feature-filter-toggle">
     
    130130            </div>
    131131        <# } else { #>
    132             <p class="themes-filter-container">
    133                 <label for="themes-filter">
    134                     <span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
    135                     <input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes" />
    136                     <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
    137                 </label>
    138             </p>
     132            <div class="themes-filter-container">
     133                <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
     134                <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" />
     135                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     136            </div>
    139137        <# } #>
    140138        <div class="filter-themes-count">
Note: See TracChangeset for help on using the changeset viewer.