Skip to main content

It seems we can’t find what you’re looking for. Perhaps searching can help.

function fixAccordionARIA() { document.querySelectorAll('.panel-group[role="tablist"]').forEach(function (tablist) { // Skip already-processed accordions if (tablist.dataset.ariaFixed) return; tablist.dataset.ariaFixed = "true"; const accordionId = tablist.getAttribute("id") || "acc-" + Math.random().toString(36).slice(2, 7); tablist.querySelectorAll(".panel").forEach(function (panel, index) { const heading = panel.querySelector(".panel-heading"); const pTitle = panel.querySelector(".panel-title"); const anchor = panel.querySelector(".panel-heading a"); const body = panel.querySelector(".panel-collapse"); const panelBody = panel.querySelector(".panel-body"); const isOpen = panel.classList.contains("active-group"); const tabId = accordionId + "-tab-" + index; const panelId = accordionId + "-panel-" + index; panel.setAttribute("role", "presentation"); if (heading) heading.setAttribute("role", "presentation"); if (pTitle) pTitle.setAttribute("role", "presentation"); if (panelBody) panelBody.setAttribute("role", "presentation"); if (anchor) { anchor.setAttribute("role", "tab"); anchor.setAttribute("aria-selected", isOpen ? "true" : "false"); anchor.setAttribute("aria-expanded", isOpen ? "true" : "false"); anchor.setAttribute("tabindex", isOpen ? "0" : "-1"); anchor.setAttribute("id", tabId); anchor.setAttribute("aria-controls", panelId); } if (body) { body.setAttribute("role", "tabpanel"); body.setAttribute("id", panelId); body.setAttribute("aria-labelledby", tabId); body.setAttribute("tabindex", "0"); } if (anchor) { anchor.addEventListener("click", function () { tablist.querySelectorAll('a[role="tab"]').forEach(function (t) { t.setAttribute("aria-selected", "false"); t.setAttribute("aria-expanded", "false"); t.setAttribute("tabindex", "-1"); }); anchor.setAttribute("aria-selected", "true"); anchor.setAttribute("aria-expanded", "true"); anchor.setAttribute("tabindex", "0"); }); } }); }); } // Run on DOM ready document.addEventListener("DOMContentLoaded", fixAccordionARIA); // Run again on full load (catches lazy/deferred accordions) window.addEventListener("load", fixAccordionARIA); // Watch for any accordions injected dynamically after load const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { if (node.nodeType === 1 && node.querySelector && node.querySelector('.panel-group[role="tablist"]')) { fixAccordionARIA(); } }); }); }); observer.observe(document.body, { childList: true, subtree: true });