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.

Built from https://develop.svn.wordpress.org/trunk@41709


git-svn-id: http://core.svn.wordpress.org/trunk@41543 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2017-10-03 15:44:46 +00:00
parent d0593d59be
commit a452e2259b
6 changed files with 18 additions and 20 deletions

View File

@ -1659,7 +1659,7 @@
// Search terms.
debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
section.contentContainer.on( 'input', '#wp-filter-search-input', function() {
section.contentContainer.on( 'input', '.wp-filter-search', function() {
debounced( section );
if ( ! section.expanded() ) {
section.expand();
@ -2003,7 +2003,7 @@
checkTerm: function( section ) {
var newTerm;
if ( 'wporg' === section.params.action ) {
newTerm = $( '#wp-filter-search-input' ).val();
newTerm = section.contentContainer.find( '.wp-filter-search' ).val();
if ( section.term !== newTerm ) {
section.initializeNewQuery( newTerm, section.tags );
}

File diff suppressed because one or more lines are too long

View File

@ -67,9 +67,9 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
$install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
?>
<# if ( data.theme.active ) { #>
<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action">
<# } else { #>
<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action">
<# } #>
<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>

View File

@ -46,7 +46,7 @@ class WP_Customize_Themes_Panel extends WP_Customize_Panel {
?>
<?php if ( current_user_can( 'switch_themes' ) ) : ?>
<button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
<button type="button" class="button change-theme" aria-label="<?php esc_attr_e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
<?php endif; ?>
</h3>
<ul class="accordion-sub-container control-panel-content"></ul>
@ -90,9 +90,9 @@ class WP_Customize_Themes_Panel extends WP_Customize_Panel {
<?php endif; ?>
</li>
<li class="customize-themes-full-container-container">
<ul class="customize-themes-full-container">
<li class="customize-themes-notifications"></li>
</ul>
<div class="customize-themes-full-container">
<div class="customize-themes-notifications"></div>
</div>
</li>
<?php
}

View File

@ -100,9 +100,9 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
<button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Back to theme sources' ); ?></button>
<# if ( 'wporg' === data.action ) { #>
<div class="search-form">
<label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
<input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
<label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
<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">
<span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</div>
<button type="button" class="button feature-filter-toggle">
<span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
@ -129,13 +129,11 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
?>
</div>
<# } else { #>
<p class="themes-filter-container">
<label for="themes-filter">
<span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
<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" />
<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</label>
</p>
<div class="themes-filter-container">
<label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
<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" />
<span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</div>
<# } #>
<div class="filter-themes-count">
<span class="themes-displayed">

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.9-alpha-41708';
$wp_version = '4.9-alpha-41709';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.