fix: readonly component style + TabList + required component (#61)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #61
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/tab/TabList.test.ts

@@ -15,6 +15,8 @@ type TabListProps = {
   tabs: Tab[]
   modelValue?: string
   id?: string
+  maxVisibleTabs?: number
+  maxWidth?: number
 }
 
 const TabListForTest = TabList as DefineComponent<TabListProps>
@@ -185,3 +187,154 @@ describe('MalioTabList', () => {
     expect(buttons[1].attributes('aria-selected')).toBe('false')
   })
 })
+
+describe('MalioTabList — fenêtrage maxVisibleTabs', () => {
+  const sevenTabs: Tab[] = [
+    {key: 't1', label: 'Tab 1'},
+    {key: 't2', label: 'Tab 2'},
+    {key: 't3', label: 'Tab 3'},
+    {key: 't4', label: 'Tab 4'},
+    {key: 't5', label: 'Tab 5'},
+    {key: 't6', label: 'Tab 6'},
+    {key: 't7', label: 'Tab 7'},
+  ]
+
+  it('applies the default maxWidth (1100px) on the tabs container when windowed', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    expect(wrapper.find('[role="tablist"]').attributes('style')).toContain('max-width: 1100px')
+  })
+
+  it('applies a custom maxWidth on the tabs container', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5, maxWidth: 1200})
+    expect(wrapper.find('[role="tablist"]').attributes('style')).toContain('max-width: 1200px')
+  })
+
+  it('renders only maxVisibleTabs buttons and disables prev at start', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(5)
+    expect(buttons[0].text()).toContain('Tab 1')
+    expect(buttons[4].text()).toContain('Tab 5')
+
+    const prev = wrapper.find('[data-test="tab-prev"]')
+    const next = wrapper.find('[data-test="tab-next"]')
+    expect(prev.exists()).toBe(true)
+    expect(next.exists()).toBe(true)
+    expect(prev.attributes('disabled')).toBeDefined()
+    expect(next.attributes('disabled')).toBeUndefined()
+  })
+
+  it('shifts the window by 1 on next click', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    const labels = wrapper.findAll('[role="tab"]').map(b => b.text())
+    expect(labels.some(l => l.includes('Tab 1'))).toBe(false)
+    expect(labels.some(l => l.includes('Tab 6'))).toBe(true)
+    expect(labels).toHaveLength(5)
+
+    expect(wrapper.find('[data-test="tab-prev"]').attributes('disabled')).toBeUndefined()
+  })
+
+  it('disables next at the end and shows the last window', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+
+    // 7 - 5 = 2 clicks to reach the end
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    const next = wrapper.find('[data-test="tab-next"]')
+    expect(next.attributes('disabled')).toBeDefined()
+
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(5)
+    // last window starts at tabs[length-5] = tabs[2] = Tab 3
+    expect(buttons[0].text()).toContain('Tab 3')
+    expect(buttons[4].text()).toContain('Tab 7')
+  })
+
+  it('clicking next past the end does not overshoot', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    const next = wrapper.find('[data-test="tab-next"]')
+
+    await next.trigger('click')
+    await next.trigger('click')
+    await next.trigger('click') // guarded, no-op
+    await next.trigger('click') // guarded, no-op
+
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons).toHaveLength(5)
+    expect(buttons[0].text()).toContain('Tab 3')
+    expect(buttons[4].text()).toContain('Tab 7')
+  })
+
+  it('renders no arrows and all tabs when maxVisibleTabs is undefined', () => {
+    const wrapper = mountComponent({tabs: sevenTabs})
+    expect(wrapper.findAll('[role="tab"]')).toHaveLength(7)
+    expect(wrapper.find('[data-test="tab-prev"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="tab-next"]').exists()).toBe(false)
+  })
+
+  it('renders no arrows when maxVisibleTabs >= tabs.length', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 7})
+    expect(wrapper.findAll('[role="tab"]')).toHaveLength(7)
+    expect(wrapper.find('[data-test="tab-prev"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="tab-next"]').exists()).toBe(false)
+  })
+
+  it('selecting a visible tab activates it without moving the window', async () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[2].trigger('click')
+
+    const after = wrapper.findAll('[role="tab"]')
+    expect(after[2].attributes('aria-selected')).toBe('true')
+    // window unchanged
+    expect(after[0].text()).toContain('Tab 1')
+    expect(after).toHaveLength(5)
+  })
+
+  it('keeps the active panel rendered even when its tab is outside the window', async () => {
+    const wrapper = mountComponent(
+      {tabs: sevenTabs, maxVisibleTabs: 5, modelValue: 't1'},
+      {t1: '<p>Panel 1</p>'},
+    )
+
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+    await wrapper.find('[data-test="tab-next"]').trigger('click')
+
+    // Tab 1 is no longer in the window
+    const labels = wrapper.findAll('[role="tab"]').map(b => b.text())
+    expect(labels.some(l => l.includes('Tab 1'))).toBe(false)
+
+    // but its panel is still rendered and visible
+    const panels = wrapper.findAll('[role="tabpanel"]')
+    expect(panels).toHaveLength(7)
+    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')
+    expect(wrapper.find('[data-test="tab-next"]').attributes('aria-label')).toBe('Onglets suivants')
+  })
+})

app/components/malio/tab/TabList.vue

@@ -1,11 +1,81 @@
 <template>
   <div v-bind="$attrs">
+    <div v-if="isWindowed" class="flex items-center justify-center gap-[36px] border-b border-m-primary">
+      <button
+        type="button"
+        aria-label="Onglets précédents"
+        data-test="tab-prev"
+        :disabled="!canPrev"
+        :class="[
+          'transition-colors',
+          canPrev
+            ? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
+            : 'cursor-not-allowed text-m-disabled',
+        ]"
+        @click="prev"
+      >
+        <IconifyIcon icon="mdi:chevron-left" :width="28" />
+      </button>
+
+      <div
+        role="tablist"
+        class="flex flex-1 justify-center gap-[60px]"
+        :style="{ maxWidth: `${maxWidth}px` }"
+      >
+        <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>
+
+      <button
+        type="button"
+        aria-label="Onglets suivants"
+        data-test="tab-next"
+        :disabled="!canNext"
+        :class="[
+          'transition-colors',
+          canNext
+            ? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
+            : 'cursor-not-allowed text-m-disabled',
+        ]"
+        @click="next"
+      >
+        <IconifyIcon icon="mdi:chevron-right" :width="28" />
+      </button>
+    </div>
+
     <div
+      v-else
       role="tablist"
       class="flex justify-center gap-[60px] border-b border-m-primary"
     >
       <button
-        v-for="tab in tabs"
+        v-for="tab in visibleTabs"
         :id="`${componentId}-tab-${tab.key}`"
         :key="tab.key"
         role="tab"
@@ -13,7 +83,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',
@@ -40,7 +110,8 @@
       :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>
@@ -48,7 +119,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useId} from 'vue'
+import {computed, ref, useId, watch} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 
 defineOptions({name: 'MalioTabList', inheritAttrs: false})
@@ -65,9 +136,13 @@ const props = withDefaults(defineProps<{
   tabs: Tab[]
   modelValue?: string
   id?: string
+  maxVisibleTabs?: number
+  maxWidth?: number
 }>(), {
   modelValue: undefined,
   id: '',
+  maxVisibleTabs: undefined,
+  maxWidth: 1100,
 })
 
 const emit = defineEmits<{
@@ -84,6 +159,53 @@ const activeTab = computed(() =>
   isControlled.value ? props.modelValue! : localValue.value,
 )
 
+const isWindowed = computed(() =>
+  props.maxVisibleTabs != null && props.tabs.length > props.maxVisibleTabs,
+)
+
+const maxStartIndex = computed(() =>
+  isWindowed.value ? Math.max(0, props.tabs.length - props.maxVisibleTabs!) : 0,
+)
+
+const startIndex = ref(0)
+
+const visibleTabs = computed(() =>
+  isWindowed.value
+    ? props.tabs.slice(startIndex.value, startIndex.value + props.maxVisibleTabs!)
+    : 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)
+
+function prev() {
+  if (!canPrev.value) return
+  startIndex.value -= 1
+}
+
+function next() {
+  if (!canNext.value) return
+  startIndex.value += 1
+}
+
+// Clamp startIndex back in range if tabs or maxVisibleTabs change.
+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