From 55aa6dd1fea2b5776df6611de869b4732bc4ca50 Mon Sep 17 00:00:00 2001
From: Nicolas AMBROISE <nicolas.ambroise@ctie.etat.lu>
Date: Tue, 13 May 2025 09:08:22 +0200
Subject: [PATCH] Use Tabs design Pattern

---
 .../tabs/v1/tabs/clientlibs/site/css/tabs.less       |  3 ++-
 .../tabs/v1/tabs/clientlibs/site/js/tabs.js          |  4 +++-
 .../apps/core/wcm/components/tabs/v1/tabs/tabs.html  | 12 +++++++-----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/css/tabs.less b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/css/tabs.less
index 17444efdf9..82370fc703 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/css/tabs.less
+++ b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/css/tabs.less
@@ -16,7 +16,8 @@
 
 .cmp-tabs__tablist {
     display: flex;
-    flex-wrap: wrap;
+    overflow: auto hidden;
+    flex-wrap: nowrap;
     padding-left: 0;
     list-style: none;
 }
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/js/tabs.js b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/js/tabs.js
index eba34f8ad4..4fa9f1294d 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/js/tabs.js
+++ b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/clientlibs/site/js/tabs.js
@@ -254,12 +254,14 @@
                         if (i === parseInt(that._active)) {
                             tabpanels[i].classList.add(selectors.active.tabpanel);
                             tabpanels[i].removeAttribute("aria-hidden");
+                            tabpanels[i].setAttribute("tabindex", "0");
                             tabs[i].classList.add(selectors.active.tab);
                             tabs[i].setAttribute("aria-selected", true);
-                            tabs[i].setAttribute("tabindex", "0");
+                            tabs[i].removeAttribute("tabindex");
                         } else {
                             tabpanels[i].classList.remove(selectors.active.tabpanel);
                             tabpanels[i].setAttribute("aria-hidden", true);
+                            tabpanels[i].removeAttribute("tabindex");
                             tabs[i].classList.remove(selectors.active.tab);
                             tabs[i].setAttribute("aria-selected", false);
                             tabs[i].setAttribute("tabindex", "-1");
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/tabs.html b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/tabs.html
index 3d9f2ff09c..5886b8e914 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/tabs.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs/tabs.html
@@ -21,21 +21,23 @@
      data-cmp-is="tabs"
      data-cmp-data-layer="${tabs.data.json}"
      data-placeholder-text="${wcmmode.edit && 'Please drag Tab components here' @ i18n}">
-    <ol data-sly-set.items="${tabs.children || tabs.items}"
+    <div data-sly-set.items="${tabs.children || tabs.items}"
         data-sly-test="${items && items.size > 0}"
         data-sly-list.tab="${items}"
         role="tablist"
         class="cmp-tabs__tablist"
         aria-label="${tabs.accessibilityLabel}"
+        tabindex="0"
         aria-multiselectable="false">
         <sly data-sly-test.isActive="${tab.name == tabs.activeItem}"/>
-        <li role="tab"
+        <button role="tab"
             id="${tab.id}-tab"
             class="cmp-tabs__tab${isActive ? ' cmp-tabs__tab--active' : ''}"
+            type="button"
             aria-controls="${tab.id}-tabpanel"
-            tabindex="${isActive ? '0' : '-1'}"
-            data-cmp-hook-tabs="tab">${tab.title}</li>
-    </ol>
+            tabindex="${isActive ? '' : '-1'}"
+            data-cmp-hook-tabs="tab">${tab.title}</button>
+    </div>
     <div data-sly-repeat.item="${items}"
          data-sly-resource="${item.resource @ decorationTagName='div'}"
          id="${item.id}-tabpanel"