Make WordPress Core

Opened 2 weeks ago

Last modified 5 days ago

#63042 new defect (bug)

Customizer accordion sections do not respond to click

Reported by: joyously's profile joyously Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.7
Component: Customize Keywords:
Focuses: javascript, administration Cc:

Description

I last updated my theme in Oct. 2022, so it now has the 2 year warning on it. In order to test with the latest WP, I fired it up at https://wpsandbox.net/create/ and specifying the theme directly from the repository: https://wordpress.org/themes/twenty8teen/ .
The front end works great, but this ticket is about some change that happened in the wp-admin/js/accordion.js which makes the theme's Customizer accordion not work.
There is only one place to see it: install my theme and go to Customizer > Theme Advanced. Clicking on any of the presets in the list should open that section, but it does nothing.

I have WP 6.4.5 locally, and it works there. I downloaded WP 6.6 to try, and it also fails. (Update: I tested it, but now notice it updated to 6.7.2, which I didn't realize until after.)
The following code is minimized, but I see that there is a difference between the working one and the failing one. It is the function from wp-admin/js/accordion.js that is attached to the click event on the div which is my control.
From WP 6.4.5 (working) (and there is also a keydown event there)

function(e) {
  var n, o, a, i, t;
  "keydown" === e.type && 13 !== e.which || (e.preventDefault(), e = (e = s(this)).closest(".accordion-section"), 
n = e.find("[aria-expanded]").first(), o = e.closest(".accordion-container"), 
a = o.find(".open"), i = a.find("[aria-expanded]").first(), 
t = e.find(".accordion-section-content"), e.hasClass("cannot-expand")) || (o.addClass("opening"), e.hasClass("open") ? (e.toggleClass("open"), t.toggle(!0).slideToggle(150)) : (i.attr("aria-expanded", "false"), a.removeClass("open"), a.find(".accordion-section-content").show().slideUp(150), t.toggle(!1).slideToggle(150), e.toggleClass("open")), setTimeout(function() {
    o.removeClass("opening")
  }, 150), n && n.attr("aria-expanded", String("false" === n.attr("aria-expanded"))))
}

From WP 6.6 (failing) (and no keydown event)

function() {
  var n, o, e, a, t, i;
  n = s(this), o = n.closest(".accordion-section"), e = o.closest(".accordion-container"), 
a = e.find(".open"), t = a.find("[aria-expanded]").first(), 
i = o.find(".accordion-section-content"), o.hasClass("cannot-expand") || (e.addClass("opening"), o.hasClass("open") ? (o.toggleClass("open"), i.toggle(!0).slideToggle(150)) : (t.attr("aria-expanded", "false"), a.removeClass("open"), a.find(".accordion-section-content").show().slideUp(150), i.toggle(!1).slideToggle(150), o.toggleClass("open")), setTimeout(function() {
    e.removeClass("opening")
  }, 150), n && n.attr("aria-expanded", String("false" === n.attr("aria-expanded"))))
}

Change History (2)

#1 @joyously
2 weeks ago

  • Version set to 6.7

I was able to revert to WP 6.6.2 and found that it worked.
Looking at the code in accordion.js, it has comments for how to markup the accordion. The change was to add a button in the title div, and the click event is on the button. Since my markup didn't change, it didn't work for me...
I think the entire title should be clickable, as before, so I will likely switch my code to use <details> and <summary> instead.

This ticket was mentioned in Slack in #themes by kafleg. View the logs.


5 days ago

Note: See TracTickets for help on using tickets.