Ticket #42054: 42054.diff

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

@@ -1603 +1603 @@
 
                                 // 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();
@@ -1947 +1947 @@
                 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 );
                                 }

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

@@ -67 +67 @@
                 $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] ) { #>

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

@@ -94 +94 @@
                         <span class="customize-loading-text"><?php _e( 'Setting up your live preview. This may take a bit.' ); ?></span>
                 </li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
                 <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
         }

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>
+                                <input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="{{ data.id }}-live-search-desc" id="wp-filter-search-input-{{ data.id }}" 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">
@@ -132 +132 @@
                         <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>
+                                        <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>
                                 </label>
                         </p>
                 <# } #>