fix : composant TabList + client playground

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

@@ -8,6 +8,7 @@ type Tab = {
   key: string
   label: string
   icon?: string
+  disabled?: boolean
 }
 
 type TabListProps = {
@@ -134,4 +135,53 @@ describe('MalioTabList', () => {
     expect(icons[0].props('icon')).toBe('mdi:home')
     expect(icons[1].props('icon')).toBe('mdi:account')
   })
+
+  it('sets disabled attribute and aria-disabled on disabled tabs', () => {
+    const disabledTabs: Tab[] = [
+      {key: 'a', label: 'A'},
+      {key: 'b', label: 'B', disabled: true},
+    ]
+    const wrapper = mountComponent({tabs: disabledTabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[1].attributes('disabled')).toBeDefined()
+    expect(buttons[1].attributes('aria-disabled')).toBe('true')
+  })
+
+  it('applies cursor-not-allowed on disabled tabs', () => {
+    const disabledTabs: Tab[] = [
+      {key: 'a', label: 'A'},
+      {key: 'b', label: 'B', disabled: true},
+    ]
+    const wrapper = mountComponent({tabs: disabledTabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+    expect(buttons[1].classes()).toContain('cursor-not-allowed')
+    expect(buttons[1].classes()).not.toContain('hover:text-m-primary/70')
+  })
+
+  it('does not emit update:modelValue when clicking a disabled tab', async () => {
+    const disabledTabs: Tab[] = [
+      {key: 'a', label: 'A'},
+      {key: 'b', label: 'B', disabled: true},
+    ]
+    const wrapper = mountComponent({tabs: disabledTabs, modelValue: 'a'})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('does not change active tab in uncontrolled mode when clicking disabled tab', async () => {
+    const disabledTabs: Tab[] = [
+      {key: 'a', label: 'A'},
+      {key: 'b', label: 'B', disabled: true},
+    ]
+    const wrapper = mountComponent({tabs: disabledTabs})
+    const buttons = wrapper.findAll('[role="tab"]')
+
+    await buttons[1].trigger('click')
+
+    expect(buttons[0].attributes('aria-selected')).toBe('true')
+    expect(buttons[1].attributes('aria-selected')).toBe('false')
+  })
 })