From 884cad9c982f619efd7547465500aea5dfa0a696 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 17:34:06 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui)=20:=20TabList=20=E2=80=94=20roving=20ta?=
 =?UTF-8?q?bindex=20+=20aria=20panels=20+=20layout=20non-fen=C3=AAtr=C3=A9?=
 =?UTF-8?q?=20(review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- focusedKey assure exactement un tab focalisable quand l'actif est hors fenêtre
- aria-labelledby conditionnel + fallback aria-label pour panneaux dont le bouton n'est pas rendu
- DOM non-fenêtré identique à l'origine (plus de wrapper flex parasite)
- reset de la fenêtre (startIndex) au remplacement des tabs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/tab/TabList.test.ts | 17 +++++++
 app/components/malio/tab/TabList.vue     | 57 +++++++++++++++++++++---
 2 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/app/components/malio/tab/TabList.test.ts b/app/components/malio/tab/TabList.test.ts
index 7e91ad2..12a90c0 100644
--- a/app/components/malio/tab/TabList.test.ts
+++ b/app/components/malio/tab/TabList.test.ts
@@ -304,6 +304,23 @@ describe('MalioTabList — fenêtrage maxVisibleTabs', () => {
     expect(wrapper.text()).toContain('Panel 1')
   })
 
+  it('keeps exactly one rendered tab with tabindex=0 when the active tab scrolls out of the window', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+
+    // active tab is the first one (t1) by default; scroll it out of the window
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    // t1 is no longer rendered
+    const labels = wrapper.findAll('[role="tab"]').map(b => b.text())
+    expect(labels.some(l => l.includes('Tab 1'))).toBe(false)
+
+    const focusable = wrapper.findAll('[role="tab"]').filter(b => b.attributes('tabindex') === '0')
+    expect(focusable).toHaveLength(1)
+    // falls back to the first visible tab (Tab 3)
+    expect(focusable[0].text()).toContain('Tab 3')
+  })
+
   it('arrows expose aria-labels', () => {
     const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
     expect(wrapper.find('[data-test="tab-prev"]').attributes('aria-label')).toBe('Onglets précédents')
diff --git a/app/components/malio/tab/TabList.vue b/app/components/malio/tab/TabList.vue
index 969e26a..0e58b7e 100644
--- a/app/components/malio/tab/TabList.vue
+++ b/app/components/malio/tab/TabList.vue
@@ -1,8 +1,7 @@
 <template>
   <div v-bind="$attrs">
-    <div class="flex items-center justify-center gap-4">
+    <div v-if="isWindowed" class="flex items-center justify-center gap-4">
       <button
-        v-if="isWindowed"
         type="button"
         aria-label="Onglets précédents"
         data-test="tab-prev"
@@ -29,7 +28,7 @@
           :aria-selected="activeTab === tab.key"
           :aria-controls="`${componentId}-panel-${tab.key}`"
           :aria-disabled="!!tab.disabled"
-          :tabindex="activeTab === tab.key ? 0 : -1"
+          :tabindex="focusedKey === tab.key ? 0 : -1"
           :disabled="tab.disabled"
           :class="[
             'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
@@ -51,7 +50,6 @@
       </div>
 
       <button
-        v-if="isWindowed"
         type="button"
         aria-label="Onglets suivants"
         data-test="tab-next"
@@ -66,13 +64,49 @@
       </button>
     </div>
 
+    <div
+      v-else
+      role="tablist"
+      class="flex justify-center gap-[60px] border-b border-m-primary"
+    >
+      <button
+        v-for="tab in visibleTabs"
+        :id="`${componentId}-tab-${tab.key}`"
+        :key="tab.key"
+        role="tab"
+        type="button"
+        :aria-selected="activeTab === tab.key"
+        :aria-controls="`${componentId}-panel-${tab.key}`"
+        :aria-disabled="!!tab.disabled"
+        :tabindex="focusedKey === tab.key ? 0 : -1"
+        :disabled="tab.disabled"
+        :class="[
+          'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
+          activeTab === tab.key
+            ? 'cursor-pointer text-m-primary after:content-[\'\'] after:absolute after:-bottom-[3px] after:left-0 after:right-0 after:h-[3px] after:bg-m-primary'
+            : tab.disabled
+              ? 'cursor-not-allowed text-m-primary/50'
+              : 'cursor-pointer text-m-primary/50 hover:text-m-primary/70',
+        ]"
+        @click="selectTab(tab.key)"
+      >
+        <IconifyIcon
+          v-if="tab.icon"
+          :icon="tab.icon"
+          :width="tab.iconSize ?? 24"
+        />
+        {{ tab.label }}
+      </button>
+    </div>
+
     <div
       v-for="tab in tabs"
       v-show="activeTab === tab.key"
       :id="`${componentId}-panel-${tab.key}`"
       :key="tab.key"
       role="tabpanel"
-      :aria-labelledby="`${componentId}-tab-${tab.key}`"
+      :aria-labelledby="isTabRendered(tab.key) ? `${componentId}-tab-${tab.key}` : undefined"
+      :aria-label="isTabRendered(tab.key) ? undefined : tab.label"
     >
       <slot :name="tab.key" />
     </div>
@@ -134,6 +168,14 @@ const visibleTabs = computed(() =>
     : props.tabs,
 )
 
+const focusedKey = computed(() => {
+  if (!isWindowed.value) return activeTab.value
+  const inView = visibleTabs.value.some(t => t.key === activeTab.value)
+  return inView ? activeTab.value : (visibleTabs.value[0]?.key ?? '')
+})
+
+const isTabRendered = (key: string) => !isWindowed.value || visibleTabs.value.some(t => t.key === key)
+
 const canPrev = computed(() => isWindowed.value && startIndex.value > 0)
 const canNext = computed(() => isWindowed.value && startIndex.value < maxStartIndex.value)
 
@@ -152,6 +194,11 @@ watch(maxStartIndex, (max) => {
   if (startIndex.value > max) startIndex.value = max
 })
 
+// Reset the window to the start when the tab list is replaced.
+watch(() => props.tabs, () => {
+  startIndex.value = 0
+})
+
 function selectTab(key: string) {
   const tab = props.tabs.find(t => t.key === key)
   if (tab?.disabled) return