From 3bbd044c7780283480ce8dd378eed76ca088024a Mon Sep 17 00:00:00 2001 From: angie radtke Date: Thu, 6 Feb 2025 16:48:14 +0100 Subject: [PATCH 1/5] Update tab.js --- src/js/tab/tab.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/js/tab/tab.js b/src/js/tab/tab.js index f4a9a975..68dd710a 100644 --- a/src/js/tab/tab.js +++ b/src/js/tab/tab.js @@ -146,10 +146,11 @@ class TabsElement extends HTMLElement { // Create tab button const tabButton = document.createElement('button'); - tabButton.setAttribute('aria-expanded', !!tab.hasAttribute('active')); + tabButton.setAttribute('aria-selected', !!tab.hasAttribute('active')); tabButton.setAttribute('aria-controls', tab.id); tabButton.setAttribute('role', 'tab'); tabButton.setAttribute('type', 'button'); + tabButton.setAttribute('tabindex', 0); tabButton.innerHTML = `${tab.getAttribute('name')}`; this.tabButtonContainer.appendChild(tabButton); @@ -244,7 +245,8 @@ class TabsElement extends HTMLElement { deactivateTabs() { this.tabs.map((tabObj) => { tabObj.accordionButton.removeAttribute('aria-disabled'); - tabObj.tabButton.removeAttribute('aria-expanded'); + tabObj.tabButton.setAttribute('aria-selected', false); + tabObj.tabButton.setAttribute('tabindex', -1); tabObj.accordionButton.setAttribute('aria-expanded', false); if (tabObj.tab.hasAttribute('active')) { @@ -283,7 +285,7 @@ class TabsElement extends HTMLElement { // Remove current active this.deactivateTabs(); // Set new active - currentTrigger.tabButton.setAttribute('aria-expanded', true); + currentTrigger.tabButton.setAttribute('aria-selected', true); currentTrigger.accordionButton.setAttribute('aria-expanded', true); currentTrigger.accordionButton.setAttribute('aria-disabled', true); currentTrigger.tab.setAttribute('active', ''); From 197cf2a97173db70e639a3c3ea0ff66b70969b64 Mon Sep 17 00:00:00 2001 From: angie radtke Date: Mon, 10 Feb 2025 14:33:25 +0100 Subject: [PATCH 2/5] Update tab.js --- src/js/tab/tab.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/js/tab/tab.js b/src/js/tab/tab.js index 68dd710a..8aca0598 100644 --- a/src/js/tab/tab.js +++ b/src/js/tab/tab.js @@ -150,8 +150,14 @@ class TabsElement extends HTMLElement { tabButton.setAttribute('aria-controls', tab.id); tabButton.setAttribute('role', 'tab'); tabButton.setAttribute('type', 'button'); - tabButton.setAttribute('tabindex', 0); + tabButton.setAttribute('tabindex', -1); tabButton.innerHTML = `${tab.getAttribute('name')}`; + if(tab.hasAttribute('active')) + { + tabButton.setAttribute('tabindex', 0); + + } + this.tabButtonContainer.appendChild(tabButton); tabButton.addEventListener('click', this.activateTab); From 0d0e631363c0f8a9ff61b83d32e735f84e1277a3 Mon Sep 17 00:00:00 2001 From: angie radtke Date: Mon, 10 Feb 2025 14:36:03 +0100 Subject: [PATCH 3/5] Update tab.scss --- src/scss/tab/tab.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/scss/tab/tab.scss b/src/scss/tab/tab.scss index 635b6270..d110b8a0 100644 --- a/src/scss/tab/tab.scss +++ b/src/scss/tab/tab.scss @@ -49,7 +49,8 @@ joomla-tab button[role=tab] { appearance: none; } -joomla-tab button[role=tab][aria-expanded="true"] { +joomla-tab button[role=tab][aria-expanded="true"], +joomla-tab button[role=tab][aria-selected="true"] { background-color: rgba(0, 0, 0, .03); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .05) 100%); border-right: 0 none; @@ -59,7 +60,9 @@ joomla-tab button[role=tab][aria-expanded="true"] { box-shadow: 2px 0 1px -1px rgba(0, 0, 0, .08) inset, -2px 0 1px -1px rgba(0, 0, 0, .08) inset, 0 1px 0 rgba(0, 0, 0, .02) inset; } -joomla-tab button[aria-expanded="true"]::after { +joomla-tab button[aria-expanded="true"]::after, +joomla-tab button[aria-selected="true"]::after +{ position: absolute; right: 0; bottom: -1px; From c89ed295ca92878af3225190f85eafedbdaf9ca1 Mon Sep 17 00:00:00 2001 From: Dimitris Grammatikogiannis Date: Wed, 12 Feb 2025 21:12:35 +0200 Subject: [PATCH 4/5] Update tab.js --- src/js/tab/tab.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/js/tab/tab.js b/src/js/tab/tab.js index 8aca0598..c222dea2 100644 --- a/src/js/tab/tab.js +++ b/src/js/tab/tab.js @@ -152,10 +152,8 @@ class TabsElement extends HTMLElement { tabButton.setAttribute('type', 'button'); tabButton.setAttribute('tabindex', -1); tabButton.innerHTML = `${tab.getAttribute('name')}`; - if(tab.hasAttribute('active')) - { + if(tab.hasAttribute('active')) { tabButton.setAttribute('tabindex', 0); - } this.tabButtonContainer.appendChild(tabButton); From c9a962e6ec1241f8d7987ea8cecea976d22b6845 Mon Sep 17 00:00:00 2001 From: Dimitris Grammatikogiannis Date: Wed, 12 Feb 2025 21:13:21 +0200 Subject: [PATCH 5/5] Update tab.js --- src/js/tab/tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/tab/tab.js b/src/js/tab/tab.js index c222dea2..b3c4b073 100644 --- a/src/js/tab/tab.js +++ b/src/js/tab/tab.js @@ -152,7 +152,7 @@ class TabsElement extends HTMLElement { tabButton.setAttribute('type', 'button'); tabButton.setAttribute('tabindex', -1); tabButton.innerHTML = `${tab.getAttribute('name')}`; - if(tab.hasAttribute('active')) { + if (tab.hasAttribute('active')) { tabButton.setAttribute('tabindex', 0); }