Not able to link contents inside the accordions

Believe this to be a bug with embedded content

Sounds like a z-index issue?

Can you please give me more information about how you link?

Are you using linkit, or the drupal link?

Please give me the steps to reproduce this and i'll try and fix it.

thanks

Yes I added the z-index and got it working for now.

We are using USWDS CKEditor Integration and linkit. When I try to add links inside the accordion in CKEditor Integration, the link popup doesn't show up. While checking I noticed that the link poup inside the accordion was beneath the accordion modal. So I added z-index for now and it working. But I think this is related to modal inside modal issue.

Change --ck-z-panel: 1300 in your admin theme.

This is not a bug with the module. It is an admin theme bug relating to ckeditor embedded in a dialog.

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.