🇬🇧United Kingdom @harpade

Change --ck-z-panel: 1300 in your admin theme. does not work for me.

But this does:

This problem often arises when JavaScript event handlers, such as e.preventDefault(), inadvertently interfere with the default behavior of anchor (<a>) tags inside interactive elements like accordions.​

To resolve this, it's essential to ensure that click events on links are not obstructed by the accordion's JavaScript behavior. Here's my solution:

(function (Drupal, jQuery) {
  Drupal.behaviors.accordionBehavior = {
    attach: function (context, settings) {
      jQuery('.accordion', context).once('accordionBehavior').on('click', 'details', function (event) {
        // Allow default action if the clicked element is 'a, button, input, select, textarea'
        if (jQuery(event.target).is('a, button, input, select, textarea')) {
          return;
        }

        event.preventDefault(); // Prevent the default toggle behavior

        var isOpening = !this.open;
        var currentDetails = jQuery(this);
        var accordionContent = currentDetails.find('.accordion-content');

        if (isOpening) {
          currentDetails.attr('open', '');

          // Close other open accordions within the same group
          currentDetails.siblings('details[open]').each(function () {
            var otherDetails = jQuery(this);
            var otherContent = otherDetails.find('.accordion-content');

            otherContent.slideUp(300, function () {
              otherDetails.removeAttr('open');
            });

            otherDetails.attr('aria-expanded', 'false');
          });

          // Open the current accordion content
          accordionContent.slideDown(300);
        } else {
          // Close the current accordion content
          accordionContent.slideUp(300, function () {
            currentDetails.removeAttr('open');
          });
        }

        // Update ARIA attribute for accessibility
        currentDetails.attr('aria-expanded', isOpening ? 'true' : 'false');
      });
    }
  };
})(Drupal, jQuery);

Key Adjustments:

Interactive Element Check: The script now checks if the clicked element is an interactive element (a, button, input, select, textarea). If so, it allows the default action to proceed, ensuring that links and form elements function correctly within the accordion.

harpade → created an issue.

harpade → created an issue.

harpade → made their first commit to this issue’s fork.

harpade → made their first commit to this issue’s fork.

I have confirmed that #34 and #38 work. Thank you!

Although I have several security modules on the server, I’m considering upgrading from version 10.3.5 to 11.0.4, as the issue has been resolved in that release.