Opened 2 weeks ago
Last modified 5 days ago
#63042 new defect (bug)
Customizer accordion sections do not respond to click
Reported by: |
|
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")))) }
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.