Changeset 41709

Timestamp:

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

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (2 diffs)
• wp-includes/customize/class-wp-customize-theme-control.php (modified) (1 diff)
• wp-includes/customize/class-wp-customize-themes-panel.php (modified) (2 diffs)
• wp-includes/customize/class-wp-customize-themes-section.php (modified) (2 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -1660 +1660 @@
                 // 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() ) {
@@ -2004 +2004 @@
             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 );

trunk/src/wp-includes/customize/class-wp-customize-theme-control.php

@@ -68 +68 @@
         ?>
         <# 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">
         <# } #>
 

trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php

@@ -47 +47 @@
 
                 <?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>
@@ -91 +91 @@
         </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

trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

@@ -101 +101 @@
         <# 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">
@@ -130 +130 @@
             </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">