WordPress.org

Make WordPress Core

Changeset 41709


Ignore:
Timestamp:
10/03/17 15:43:22 (2 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.