From eb3c37919e6325ee646cc980645c45e4bd2e92d0 Mon Sep 17 00:00:00 2001 From: Aaron Jorbin Date: Tue, 4 Feb 2025 03:01:18 +0000 Subject: [PATCH] Customizer: Allow custom accordion items with obsolete structure. In [59224], customizer accordion item HTML structure was changed to include a button element as the interactive control. However, some themes inject custom markup for panel headings. Fix controls.js to handle both the new markup and the old markup, which is relatively common in themes. Reviewed by jorbin. Merges [59555] to the 6.7 branch. Props paullb, desrosj, sabernhardt, joedolson, jorbin. Fixes #62494. git-svn-id: https://develop.svn.wordpress.org/branches/6.7@59758 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/wp/customize/controls.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js index 1d402bc1c3273..7a6e69cf3eb9c 100644 --- a/src/js/_enqueues/wp/customize/controls.js +++ b/src/js/_enqueues/wp/customize/controls.js @@ -1530,7 +1530,7 @@ } // Expand/Collapse accordion sections on click. - section.container.find( '.accordion-section-title button, .customize-section-back' ).on( 'click keydown', function( event ) { + section.container.find( '.accordion-section-title button, .customize-section-back, .accordion-section-title[tabindex]' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } @@ -1605,7 +1605,7 @@ content = section.contentContainer, overlay = section.headContainer.closest( '.wp-full-overlay' ), backBtn = content.find( '.customize-section-back' ), - sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(), + sectionTitle = section.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ).first(), expand, panel; if ( expanded && ! content.hasClass( 'open' ) ) { @@ -2694,7 +2694,7 @@ container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ), content = section.contentContainer, backBtn = content.find( '.customize-section-back' ), - sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(), + sectionTitle = section.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ).first(), body = $( document.body ), expand, panel; @@ -2833,7 +2833,7 @@ var meta, panel = this; // Expand/Collapse accordion sections on click. - panel.headContainer.find( '.accordion-section-title button' ).on( 'click keydown', function( event ) { + panel.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ).on( 'click keydown', function( event ) { if ( api.utils.isKeydownButNotEnterEvent( event ) ) { return; } @@ -2937,7 +2937,7 @@ accordionSection = panel.contentContainer, overlay = accordionSection.closest( '.wp-full-overlay' ), container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ), - topPanel = panel.headContainer.find( '.accordion-section-title button' ), + topPanel = panel.headContainer.find( '.accordion-section-title button, .accordion-section-title[tabindex]' ), backBtn = accordionSection.find( '.customize-panel-back' ), childSections = panel.sections(), skipTransition;