Elementor Nested Accordion – Keyboard Accessibility Fix (Tab Navigation)

tab-fix.js

<script>
/**
 * Elementor Nested Accordion – Keyboard Tab Navigation Fix
 *
 * Elementor assigns tabindex="-1" to inactive accordion
 * summaries, removing them from the normal Tab sequence.
 *
 * This script restores tabindex="0" to all summaries so
 * keyboard users can navigate with Tab and Shift+Tab,
 * regardless of which accordion panel is expanded.
 *
 * A MutationObserver reapplies the fix when Elementor
 * dynamically updates tabindex or adds accordion items.
 *
 * Targets Elementor Nested Accordions (.e-n-accordion).
 *
 * Note: This addresses Tab navigation only. It does not
 * resolve other potential ARIA or accessibility issues.
 */

(function () {
  "use strict";

  // Target only Elementor Nested Accordion summaries.
  const selector =
    ".e-n-accordion > details.e-n-accordion-item > summary.e-n-accordion-item-title";

  // Restore each summary to the normal keyboard Tab order.
  function fixAccordionTabindex() {
    document.querySelectorAll(selector).forEach(function (summary) {
      if (summary.getAttribute("tabindex") !== "0") {
        summary.setAttribute("tabindex", "0");
      }
    });
  }

  function initialize() {
    // Fix accordions already present on the page.
    fixAccordionTabindex();

    // Reapply when Elementor modifies tabindex or adds content.
    const observer = new MutationObserver(function (mutations) {
      const needsUpdate = mutations.some(function (mutation) {
        return (
          (mutation.type === "attributes" &&
            mutation.target.matches(selector)) ||
          (mutation.type === "childList" &&
            mutation.addedNodes.length > 0)
        );
      });

      if (needsUpdate) {
        fixAccordionTabindex();
      }
    });

    observer.observe(document.body, {
      subtree: true,
      childList: true,
      attributes: true,
      attributeFilter: ["tabindex"]
    });
  }

  // Initialize once the DOM is ready.
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initialize);
  } else {
    initialize();
  }
})();
</script>

Fixes keyboard Tab and Shift+Tab navigation in Elementor's Nested Accordion widget.

Elementor uses a roving tabindex approach that can cause keyboard focus to skip other accordion toggles when a panel is expanded. This script restores tabindex="0" to all accordion summaries, allowing users to navigate sequentially regardless of which panel is open.

Works with Elementor's existing accordion markup without modifying the widget or its content.

Installation: Add the script through Elementor → Custom Code, set the location to Body End, and apply it to the appropriate pages.

Note: This is a workaround for keyboard navigation, not a complete WCAG accessibility fix. Test with keyboard and screen readers after installation and following Elementor updates.