From 62fd6280a932c7371b1b8747c9849c7e87dbc4a4 Mon Sep 17 00:00:00 2001 From: Mark Woodard Date: Wed, 11 Dec 2024 21:01:51 -0600 Subject: [PATCH] Fixing an issue where accordions would not open and cleaning up some aria placement https://stellarwp.atlassian.net/browse/KAD-3831 --- includes/assets/js/kt-tabs.min.js | 2 +- src/assets/js/kt-tabs.js | 57 ++++++++++++++----------------- 2 files changed, 27 insertions(+), 32 deletions(-) diff --git a/includes/assets/js/kt-tabs.min.js b/includes/assets/js/kt-tabs.min.js index edc3c9eb3..d7216f5b6 100644 --- a/includes/assets/js/kt-tabs.min.js +++ b/includes/assets/js/kt-tabs.min.js @@ -1 +1 @@ -(function(){"use strict";window.KBTabs={setupTabs(){const a=document.querySelectorAll(".kt-tabs-wrap");a.forEach(a=>{if(!a.classList.contains("initialized")){a.querySelectorAll(":scope > .kt-tabs-title-list").forEach(a=>{a.setAttribute("role","tablist")}),a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tab-inner-content").forEach(a=>{a.setAttribute("role","tabpanel"),a.setAttribute("aria-hidden","true")}),a.querySelectorAll(":scope > .kt-tabs-title-list li a").forEach(b=>{const c=b.parentElement,d=c.getAttribute("id"),e=c.classList.contains("kt-tab-title-active"),f=c.classList.contains("kt-tabs-accordion-title"),g=b.getAttribute("data-tab"),h=a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+g);f?b.setAttribute("aria-selected",!!e):(h.setAttribute("aria-labelledby",d),c.setAttribute("role","presentation"),b.setAttribute("role","tab"),b.setAttribute("aria-controls",d),b.setAttribute("tabindex",e?"0":"-1")),h.setAttribute("aria-hidden",e?"false":"true"),e&&(h.style.display="block")}),a.querySelectorAll(":scope > .kt-tabs-title-list li").forEach(a=>{a.addEventListener("keydown",function(b){switch(b.which){case 37:a.previousElementSibling?a.previousElementSibling.querySelector("a").click():a.parentElement.querySelector("li:last-of-type > a").click();break;case 39:a.nextElementSibling?a.nextElementSibling.querySelector("a").click():a.parentElement.querySelector("li:first-of-type > a").click()}})});const b=new Event("resize");window.dispatchEvent(b);const c=a.querySelectorAll(".kt-tabs-title-list li a");c.forEach(a=>{a.addEventListener("click",function(b){b.preventDefault();const c=a.getAttribute("data-tab"),d=a.closest(".kt-tabs-wrap");window.KBTabs.setActiveTab(d,c)})}),a.classList.contains("kt-create-accordion")&&a.querySelectorAll(":scope > .kt-tabs-title-list .kt-title-item").forEach(a=>{const b=a.querySelector("a").getAttribute("data-tab"),c=a.classList,d=a.closest(".kt-tabs-wrap"),e=d.querySelector(":scope > .kt-tabs-content-wrap"),f=window.document.createElement("div");f.className=[...c].concat(["kt-tabs-accordion-title","kt-tabs-accordion-title-"+b]).join(" "),f.innerHTML=a.innerHTML,e.insertBefore(f,e.querySelector(":scope > .kt-inner-tab-"+b)),e.querySelector(":scope > .kt-tabs-accordion-title-"+b+" a").removeAttribute("role"),e.querySelector(":scope > .kt-tabs-accordion-title-"+b+" a").removeAttribute("tabindex")});const d=a.querySelectorAll(".kt-tabs-accordion-title a");d.forEach(a=>{const b=a.closest(".kt-create-accordion")?.dataset?.noAllowMultipleOpen;a.addEventListener("click",function(c){window.KBTabs.setActiveAccordion(c,a,b)})}),a.classList.add("initialized")}}),window.KBTabs.setActiveWithHash()},setActiveWithHash(){if(""==window.location.hash)return;const a=window.document.querySelector(window.location.hash+".kt-title-item");if(!a)return;const b=window.document.querySelector("#"+window.location.hash.substring(1)),c=b.querySelector("a").getAttribute("data-tab"),d=b.closest(".kt-tabs-wrap");window.KBTabs.setActiveTab(d,c),window.KBTabs.isMobileSize()&&d.classList.contains("kt-tabs-mobile-layout-accordion")||window.KBTabs.isTabletSize()&&d.classList.contains("kt-tabs-tablet-layout-accordion")?d.querySelector(".kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tabs-accordion-title-"+c).scrollIntoView({behavior:"smooth"}):d.classList.contains("kt-tabs-layout-vtabs")&&d.querySelector(".kt-tabs-content-wrap").scrollIntoView({behavior:"smooth"})},isMobileSize(){return 767>=window.innerWidth},isTabletSize(){return 767=window.innerWidth},setActiveAccordion(a,b,c){a.preventDefault();const d=b.getAttribute("data-tab"),e=b.parentElement,f=b.closest(".kt-tabs-wrap"),g=f.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+d);if(e.classList.contains("kt-tab-title-active")?(f.classList.remove("kt-active-tab-"+d),e.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),g.style.display="none"):(f.classList.add("kt-active-tab-"+d),e.classList.replace("kt-tab-title-inactive","kt-tab-title-active"),g.style.display="block"),c){const a=f.querySelectorAll(".kt-tabs-accordion-title a");a.forEach(a=>{const b=a.getAttribute("data-tab"),c=a.parentElement,e=f.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b);b!=d&&(c.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),e.style.display="none")})}window.KBTabs.setAriaAttributesForTabs(f,d);const h=new Event("resize");window.dispatchEvent(h);const i=new Event("kadence-tabs-open");window.dispatchEvent(i)},setActiveTab(a,b,c=!0){const d=a.querySelector(":scope > .kt-tabs-title-list > li.kt-tab-title-active a"),e=a.querySelector(":scope > .kt-tabs-title-list > li.kt-tab-title-active");e.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),d.setAttribute("tabindex","-1"),d.setAttribute("aria-selected","false"),a.className=a.className.replace(/\bkt-active-tab-\S+/g,"kt-active-tab-"+b);const f=a.querySelector(":scope > .kt-tabs-title-list > li.kt-title-item-"+b+" a"),g=a.querySelector(":scope > .kt-tabs-title-list > li.kt-title-item-"+b);g.classList.replace("kt-tab-title-inactive","kt-tab-title-active"),f.setAttribute("tabindex","0"),f.setAttribute("aria-selected","true"),a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tab-inner-content").forEach(a=>{a.style.display="none"});const h=a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b);h.style.display="block",c&&f.focus(),window.KBTabs.setAriaAttributesForTabs(a,b);const i=new Event("resize");window.dispatchEvent(i);const j=new Event("kadence-tabs-open");window.dispatchEvent(j)},setAriaAttributesForTabs(a,b){a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tab-inner-content:not(.kt-inner-tab-"+b+")").forEach(a=>a.setAttribute("aria-hidden","true")),a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b).setAttribute("aria-hidden","false"),a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tabs-accordion-title:not(.kt-tabs-accordion-title-"+b+")").forEach(a=>{a.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),a.setAttribute("tabindex","-1"),a.setAttribute("aria-selected","false")});const c=a.querySelector(":scope >.kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tabs-accordion-title-"+b);c&&(c.classList.replace("kt-tab-title-inactive","kt-tab-title-active"),c.setAttribute("tabindex","0"),c.setAttribute("aria-selected","true"))},init(){window.KBTabs.setupTabs(),window.addEventListener("hashchange",window.KBTabs.setActiveWithHash,!1)}},"loading"===document.readyState?document.addEventListener("DOMContentLoaded",window.KBTabs.init):window.KBTabs.init(),document.addEventListener("kb-query-loaded",window.KBTabs.init)})(); \ No newline at end of file +(function(){"use strict";window.KBTabs={setupTabs(){const a=document.querySelectorAll(".kt-tabs-wrap");a.forEach(a=>{if(!a.classList.contains("initialized")){a.querySelectorAll(":scope > .kt-tabs-title-list").forEach(a=>{a.setAttribute("role","tablist")}),a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tab-inner-content").forEach(a=>{a.setAttribute("role","tabpanel"),a.setAttribute("aria-hidden","true")}),a.querySelectorAll(":scope > .kt-tabs-title-list li a").forEach(b=>{const c=b.parentElement,d=c.getAttribute("id"),e=c.classList.contains("kt-tab-title-active"),f=c.classList.contains("kt-tabs-accordion-title"),g=b.getAttribute("data-tab"),h=a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+g);f?b.setAttribute("aria-selected",!!e):(h.setAttribute("aria-labelledby",d),c.setAttribute("role","presentation"),b.setAttribute("role","tab"),b.setAttribute("aria-controls",d),b.setAttribute("tabindex",e?"0":"-1")),h.setAttribute("aria-hidden",e?"false":"true"),e&&(h.style.display="block")}),a.querySelectorAll(":scope > .kt-tabs-title-list li").forEach(a=>{a.addEventListener("keydown",function(b){switch(b.which){case 37:a.previousElementSibling?a.previousElementSibling.querySelector("a").click():a.parentElement.querySelector("li:last-of-type > a").click();break;case 39:a.nextElementSibling?a.nextElementSibling.querySelector("a").click():a.parentElement.querySelector("li:first-of-type > a").click()}})});const b=new Event("resize");window.dispatchEvent(b);const c=a.querySelectorAll(".kt-tabs-title-list li a");c.forEach(a=>{a.addEventListener("click",function(b){b.preventDefault();const c=a.getAttribute("data-tab"),d=a.closest(".kt-tabs-wrap");window.KBTabs.setActiveTab(d,c)})}),a.classList.contains("kt-create-accordion")&&a.querySelectorAll(":scope > .kt-tabs-title-list .kt-title-item").forEach(a=>{const b=a.querySelector("a").getAttribute("data-tab"),c=a.classList,d=a.closest(".kt-tabs-wrap"),e=d.querySelector(":scope > .kt-tabs-content-wrap"),f=window.document.createElement("div");f.className=[...c].concat(["kt-tabs-accordion-title","kt-tabs-accordion-title-"+b]).join(" "),f.innerHTML=a.innerHTML,e.insertBefore(f,e.querySelector(":scope > .kt-inner-tab-"+b)),e.querySelector(":scope > .kt-tabs-accordion-title-"+b+" a").removeAttribute("role"),e.querySelector(":scope > .kt-tabs-accordion-title-"+b+" a").removeAttribute("tabindex")});const d=a.querySelectorAll(".kt-tabs-accordion-title a");d.forEach(a=>{const b=a.closest(".kt-create-accordion")?.dataset?.noAllowMultipleOpen;a.addEventListener("click",function(c){window.KBTabs.setActiveAccordion(c,a,b)})}),a.classList.add("initialized")}}),window.KBTabs.setActiveWithHash()},setActiveWithHash(){if(""==window.location.hash)return;const a=window.document.querySelector(window.location.hash+".kt-title-item");if(!a)return;const b=window.document.querySelector("#"+window.location.hash.substring(1)),c=b.querySelector("a").getAttribute("data-tab"),d=b.closest(".kt-tabs-wrap");window.KBTabs.setActiveTab(d,c),window.KBTabs.isMobileSize()&&d.classList.contains("kt-tabs-mobile-layout-accordion")||window.KBTabs.isTabletSize()&&d.classList.contains("kt-tabs-tablet-layout-accordion")?d.querySelector(".kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tabs-accordion-title-"+c).scrollIntoView({behavior:"smooth"}):d.classList.contains("kt-tabs-layout-vtabs")&&d.querySelector(".kt-tabs-content-wrap").scrollIntoView({behavior:"smooth"})},isMobileSize(){return 767>=window.innerWidth},isTabletSize(){return 767=window.innerWidth},setActiveAccordion(a,b,c){a.preventDefault();const d=b.getAttribute("data-tab"),e=b.parentElement,f=b.closest(".kt-tabs-wrap"),g=f.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+d);if(e.classList.contains("kt-tab-title-active")?(f.classList.remove("kt-active-tab-"+d),e.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),g.style.display="none",g.setAttribute("tabindex","1"),b.setAttribute("aria-selected","false"),window.KBTabs.setAriaAttributesForTabs(f,d,!1,c)):(f.classList.add("kt-active-tab-"+d),e.classList.replace("kt-tab-title-inactive","kt-tab-title-active"),g.style.display="block",g.setAttribute("tabindex","0"),b.setAttribute("aria-selected","true"),window.KBTabs.setAriaAttributesForTabs(f,d,!0,c)),c){const a=f.querySelectorAll(".kt-tabs-accordion-title a");a.forEach(a=>{const b=a.getAttribute("data-tab"),c=a.parentElement,e=f.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b);b!=d&&(c.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),c.setAttribute("tabindex","-1"),a.setAttribute("aria-selected","false"),e.style.display="none")})}const h=new Event("resize");window.dispatchEvent(h);const i=new Event("kadence-tabs-open");window.dispatchEvent(i)},setActiveTab(a,b,c=!0){const d=a.querySelector(":scope > .kt-tabs-title-list > li.kt-tab-title-active a"),e=a.querySelector(":scope > .kt-tabs-title-list > li.kt-tab-title-active");e.classList.replace("kt-tab-title-active","kt-tab-title-inactive"),d.setAttribute("tabindex","-1"),d.setAttribute("aria-selected","false"),a.className=a.className.replace(/\bkt-active-tab-\S+/g,"kt-active-tab-"+b);const f=a.querySelector(":scope > .kt-tabs-title-list > li.kt-title-item-"+b+" a"),g=a.querySelector(":scope > .kt-tabs-title-list > li.kt-title-item-"+b);g.classList.replace("kt-tab-title-inactive","kt-tab-title-active"),f.setAttribute("tabindex","0"),f.setAttribute("aria-selected","true"),a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tab-inner-content").forEach(a=>{a.style.display="none"});const h=a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b);h.style.display="block",c&&f.focus(),window.KBTabs.setAriaAttributesForTabs(a,b,!0,!0);const i=new Event("resize");window.dispatchEvent(i);const j=new Event("kadence-tabs-open");window.dispatchEvent(j)},setAriaAttributesForTabs(a,b,c=!0,d=!1){d&&a.querySelectorAll(":scope > .kt-tabs-content-wrap > .kt-tab-inner-content:not(.kt-inner-tab-"+b+")").forEach(a=>a.setAttribute("aria-hidden","true")),c?a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b).setAttribute("aria-hidden","false"):a.querySelector(":scope > .kt-tabs-content-wrap > .kt-inner-tab-"+b).setAttribute("aria-hidden","true")},init(){window.KBTabs.setupTabs(),window.addEventListener("hashchange",window.KBTabs.setActiveWithHash,!1)}},"loading"===document.readyState?document.addEventListener("DOMContentLoaded",window.KBTabs.init):window.KBTabs.init(),document.addEventListener("kb-query-loaded",window.KBTabs.init)})(); \ No newline at end of file diff --git a/src/assets/js/kt-tabs.js b/src/assets/js/kt-tabs.js index 9de84f682..91fa53aba 100644 --- a/src/assets/js/kt-tabs.js +++ b/src/assets/js/kt-tabs.js @@ -174,10 +174,16 @@ tabWrap.classList.remove('kt-active-tab-' + clickedTabId); accTitle.classList.replace('kt-tab-title-active', 'kt-tab-title-inactive'); tabContent.style.display = 'none'; + tabContent.setAttribute('tabindex', '1'); + thisElem.setAttribute('aria-selected', 'false'); + window.KBTabs.setAriaAttributesForTabs(tabWrap, clickedTabId, false, noAllowMultipleOpen); } else { tabWrap.classList.add('kt-active-tab-' + clickedTabId); accTitle.classList.replace('kt-tab-title-inactive', 'kt-tab-title-active'); tabContent.style.display = 'block'; + tabContent.setAttribute('tabindex', '0'); + thisElem.setAttribute('aria-selected', 'true'); + window.KBTabs.setAriaAttributesForTabs(tabWrap, clickedTabId, true, noAllowMultipleOpen); } //if the appropriate setting is active, close all other accordions in this accordion @@ -192,13 +198,13 @@ if (otherTabId != clickedTabId) { otherAccTitle.classList.replace('kt-tab-title-active', 'kt-tab-title-inactive'); + otherAccTitle.setAttribute('tabindex', '-1'); + otherElem.setAttribute('aria-selected', 'false'); otherTabContent.style.display = 'none'; } }); } - window.KBTabs.setAriaAttributesForTabs(tabWrap, clickedTabId); - const resizeEvent = new Event('resize'); window.dispatchEvent(resizeEvent); const tabEvent = new Event('kadence-tabs-open'); @@ -235,41 +241,30 @@ newActiveAnchor.focus(); } - window.KBTabs.setAriaAttributesForTabs(wrapper, tabNumber); + window.KBTabs.setAriaAttributesForTabs(wrapper, tabNumber, true, true); const resizeEvent = new Event('resize'); window.dispatchEvent(resizeEvent); const tabEvent = new Event('kadence-tabs-open'); window.dispatchEvent(tabEvent); }, - setAriaAttributesForTabs(wrapper, tabNumber) { - wrapper - .querySelectorAll( - ':scope > .kt-tabs-content-wrap > .kt-tab-inner-content:not(.kt-inner-tab-' + tabNumber + ')' - ) - .forEach((subElem) => subElem.setAttribute('aria-hidden', 'true')); - wrapper - .querySelector(':scope > .kt-tabs-content-wrap > .kt-inner-tab-' + tabNumber) - .setAttribute('aria-hidden', 'false'); - // Accordion tabs - wrapper - .querySelectorAll( - ':scope > .kt-tabs-content-wrap > .kt-tabs-accordion-title:not(.kt-tabs-accordion-title-' + - tabNumber + - ')' - ) - .forEach((tab) => { - tab.classList.replace('kt-tab-title-active', 'kt-tab-title-inactive'); - tab.setAttribute('tabindex', '-1'); - tab.setAttribute('aria-selected', 'false'); - }); - const activeAccordionTab = wrapper.querySelector( - ':scope >.kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tabs-accordion-title-' + tabNumber - ); - if (activeAccordionTab) { - activeAccordionTab.classList.replace('kt-tab-title-inactive', 'kt-tab-title-active'); - activeAccordionTab.setAttribute('tabindex', '0'); - activeAccordionTab.setAttribute('aria-selected', 'true'); + setAriaAttributesForTabs(wrapper, tabNumber, active = true, noAllowMultipleOpen = false) { + if (noAllowMultipleOpen) { + wrapper + .querySelectorAll( + ':scope > .kt-tabs-content-wrap > .kt-tab-inner-content:not(.kt-inner-tab-' + tabNumber + ')' + ) + .forEach((subElem) => subElem.setAttribute('aria-hidden', 'true')); + } + + if (active) { + wrapper + .querySelector(':scope > .kt-tabs-content-wrap > .kt-inner-tab-' + tabNumber) + .setAttribute('aria-hidden', 'false'); + } else { + wrapper + .querySelector(':scope > .kt-tabs-content-wrap > .kt-inner-tab-' + tabNumber) + .setAttribute('aria-hidden', 'true'); } },