WordPress.org

Make WordPress Core

Changeset 41709


Ignore:
Timestamp:
10/03/2017 03:43:22 PM (8 months 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.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r41694 r41709  
    16601660                // Search terms.
    16611661                debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
    1662                 section.contentContainer.on( 'input', '#wp-filter-search-input', function() {
     1662                section.contentContainer.on( 'input', '.wp-filter-search', function() {
    16631663                    debounced( section );
    16641664                    if ( ! section.expanded() ) {
     
    20042004            var newTerm;
    20052005            if ( 'wporg' === section.params.action ) {
    2006                 newTerm = $( '#wp-filter-search-input' ).val();
     2006                newTerm = section.contentContainer.find( '.wp-filter-search' ).val();
    20072007                if ( section.term !== newTerm ) {
    20082008                    section.initializeNewQuery( newTerm, section.tags );
  • trunk/src/wp-includes/customize/class-wp-customize-theme-control.php

    r41648 r41709  
    6868        ?>
    6969        <# if ( data.theme.active ) { #>
    70             <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
     70            <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action">
    7171        <# } else { #>
    72             <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
     72            <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action">
    7373        <# } #>
    7474
  • trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php

    r41667 r41709  
    4747
    4848                <?php if ( current_user_can( 'switch_themes' ) ) : ?>
    49                     <button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
     49                    <button type="button" class="button change-theme" aria-label="<?php esc_attr_e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
    5050                <?php endif; ?>
    5151            </h3>
     
    9191        </li>
    9292        <li class="customize-themes-full-container-container">
    93             <ul class="customize-themes-full-container">
    94                 <li class="customize-themes-notifications"></li>
    95             </ul>
     93            <div class="customize-themes-full-container">
     94                <div class="customize-themes-notifications"></div>
     95            </div>
    9696        </li>
    9797        <?php
  • 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.