@mozaic-ds/vue 2.17.0 → 2.18.0

package/src/components/tabs/Mtabs.spec.ts

@@ -161,6 +161,168 @@ describe('MTabs.vue', () => {
     expect(wrapper.emitted('update:modelValue')!.length).toBe(1);
   });
 
+  it('selected tab has tabindex="0", others have tabindex="-1"', () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '2' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('tabindex')).toBe('-1');
+    expect(buttons[1].attributes('tabindex')).toBe('0');
+    expect(buttons[2].attributes('tabindex')).toBe('-1');
+  });
+
+  it('falls back to first enabled tab for tabindex when selected tab is disabled', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1', disabled: true },
+          { id: '2', label: 'Tab 2' },
+          { id: '3', label: 'Tab 3' },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('tabindex')).toBe('-1');
+    expect(buttons[1].attributes('tabindex')).toBe('0');
+    expect(buttons[2].attributes('tabindex')).toBe('-1');
+  });
+
+  it('falls back to first enabled tab for tabindex when modelValue is invalid', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        modelValue: 'unknown-id',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('tabindex')).toBe('0');
+    expect(buttons[1].attributes('tabindex')).toBe('-1');
+    expect(buttons[2].attributes('tabindex')).toBe('-1');
+  });
+
+  it('sets disabled and aria-disabled attributes on disabled tabs', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1' },
+          { id: '2', label: 'Tab 2', disabled: true },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    expect(buttons[0].attributes('aria-disabled')).toBeUndefined();
+    expect(buttons[1].attributes('aria-disabled')).toBe('true');
+  });
+
+  it('ArrowRight moves selection to the next tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '1' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2']);
+  });
+
+  it('ArrowLeft moves selection to the previous tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '2' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[1].trigger('keydown', { key: 'ArrowLeft' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1']);
+  });
+
+  it('ArrowRight wraps from last to first tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '3' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[2].trigger('keydown', { key: 'ArrowRight' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1']);
+  });
+
+  it('Home moves selection to the first tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '3' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[2].trigger('keydown', { key: 'Home' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1']);
+  });
+
+  it('End moves selection to the last tab', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '1' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'End' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3']);
+  });
+
+  it('does not react to ArrowUp and ArrowDown keys', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, modelValue: '1' },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowDown' });
+    await buttons[0].trigger('keydown', { key: 'ArrowUp' });
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+  });
+
+  it('ArrowRight skips disabled tabs', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1' },
+          { id: '2', label: 'Tab 2', disabled: true },
+          { id: '3', label: 'Tab 3' },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3']);
+  });
+
+  it('does not emit on keydown when all tabs are disabled', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { id: '1', label: 'Tab 1', disabled: true },
+          { id: '2', label: 'Tab 2', disabled: true },
+        ],
+        modelValue: '1',
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+    await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+    await buttons[0].trigger('keydown', { key: 'Home' });
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+  });
+
   it('renders icon component when icon prop is provided', () => {
     const DummyIcon = markRaw(
       defineComponent({

package/src/main.ts

@@ -59,6 +59,7 @@ export { default as MStatusNotification } from './components/statusnotification/
 export { default as MStepperBottomBar } from './components/stepperbottombar/MStepperBottomBar.vue';
 export { default as MStepperCompact } from './components/steppercompact/MStepperCompact.vue';
 export { default as MStepperInline } from './components/stepperinline/MStepperInline.vue';
+export { default as MStepperStacked } from './components/stepperstacked/MStepperStacked.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';

package/src/components/ComponentsMapping.mdx

@@ -1,98 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Components v1 → v2" />
-
-# Components mapping v1 → v2
-
-## Introduction
-
-This document summarizes all component changes between the ADS Vue V1 and V2 design system libraries — including renames, splits, merges, removals, and new additions.
-
-
-### Mapping Table
-
-<table>
-  <thead>
-    <tr>
-      <th>V1 Component</th>
-      <th>V2 Component</th>
-      <th>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr><td><code>MAccordion</code></td><td><code>MAccordionList</code> + <code>MAccordionListItem</code></td><td>🔀 Split</td></tr>
-    <tr><td><code>MActionBar</code> + <code>MBottomBar</code></td><td><code>MActionBottomBar</code></td><td>🔗 Merged</td></tr>
-    <tr><td><code>MListBoxActions</code></td><td><code>MActionListBox</code></td><td>🔄 Renamed</td></tr>
-    <tr><td>—</td><td><code>MAvatar</code></td><td>✨ New</td></tr>
-    <tr><td><code>MBreadcrumb</code></td><td><code>MBreadcrumb</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MMenu</code></td><td><code>MBuiltInMenu</code></td><td>🔄 Renamed</td></tr>
-    <tr><td><code>MButton</code></td><td><code>MButton</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MCallout</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MCarousel</code></td><td>✨ New</td></tr>
-    <tr><td><code>MCheckbox</code></td><td><code>MCheckbox</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MCheckboxGroup</code></td><td><code>MCheckboxGroup</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MChecklistMenu</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MCircularProgressBar</code></td><td>✨ New</td></tr>
-    <tr><td><code>MAutocomplete</code> + <code>MDropdown</code></td><td><code>MCombobox</code></td><td>🔗 Merged</td></tr>
-    <tr><td><code>MContainer</code></td><td><code>MContainer</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MDatePicker</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MDivider</code></td><td>✨ New</td></tr>
-    <tr><td><code>MLayer</code></td><td><code>MDrawer</code></td><td>🔄 Renamed</td></tr>
-    <tr><td><code>MField</code></td><td><code>MField</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MFieldGroup</code></td><td>✨ New</td></tr>
-    <tr><td><code>MFileUploader</code></td><td><code>MFileUploader</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MFileUploaderItem</code></td><td>✨ New</td></tr>
-    <tr><td><code>MFlag</code></td><td><code>MFlag</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MIcon</code></td><td><em>removed</em></td><td>🗑️ Removed</td></tr>
-    <tr><td>—</td><td><code>MIconButton</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MKpiItem</code></td><td>✨ New</td></tr>
-    <tr><td><code>MProgress</code></td><td><code>MLinearProgressBarBuffer</code> + <code>MLinearProgressBarPercentage</code></td><td>🔀 Split</td></tr>
-    <tr><td><code>MLink</code></td><td><code>MLink</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MLoader</code></td><td><code>MLoader</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MLoadingOverlay</code></td><td>✨ New</td></tr>
-    <tr><td><code>MModal</code></td><td><code>MModal</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MNavigationIndicator</code></td><td>✨ New</td></tr>
-    <tr><td><code>MNotification</code></td><td><code>MStatusNotification</code></td><td>🔄 Renamed</td></tr>
-    <tr><td>—</td><td><code>MNumberBadge</code></td><td>✨ New</td></tr>
-    <tr><td><code>MListbox</code></td><td><code>MOptionListBox</code></td><td>🔄 Renamed</td></tr>
-    <tr><td><code>MOverlay</code></td><td><code>MOverlay</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MPageHeader</code></td><td>✨ New</td></tr>
-    <tr><td><code>MPagination</code></td><td><code>MPagination</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MPasswordInput</code></td><td><code>MPasswordInput</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MPhoneNumber</code></td><td><code>MPhoneNumber</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MPinCode</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MPopover</code></td><td>✨ New</td></tr>
-    <tr><td><code>MQuantitySelector</code></td><td><code>MQuantitySelector</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MRadio</code></td><td><code>MRadio</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MRadioGroup</code></td><td><code>MRadioGroup</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MSegmentedControl</code></td><td><code>MSegmentedControl</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MSelect</code></td><td><code>MSelect</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MSidebar</code></td><td><code>MSidebar</code> + 6 sub-components</td><td>🔀 Split</td></tr>
-    <tr><td>—</td><td><code>MSidebarExpandableItem</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MSidebarFooter</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MSidebarHeader</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MSidebarNavItem</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MSidebarShortcutItem</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MSidebarShortcuts</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MStarRating</code></td><td>✨ New</td></tr>
-    <tr><td><code>MBadge</code></td><td><code>MStatusBadge</code></td><td>🔄 Renamed</td></tr>
-    <tr><td>—</td><td><code>MStatusDot</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MStatusMessage</code></td><td>✨ New</td></tr>
-    <tr><td><code>MStepper</code> (<code>compact: false</code>)</td><td><code>MStepperInline</code></td><td>🔄 Renamed</td></tr>
-    <tr><td><code>MStepper</code> (<code>compact: true</code>)</td><td><code>MStepperCompact</code></td><td>🔄 Renamed</td></tr>
-    <tr><td>—</td><td><code>MStepperBottomBar</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MStepperStacked</code></td><td>✨ New</td></tr>
-    <tr><td><code>MTab</code> / <code>MTabsV2</code></td><td><code>MTabs</code></td><td>🔄 Renamed</td></tr>
-    <tr><td><code>MTag</code></td><td><code>MTag</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MTextArea</code></td><td><code>MTextArea</code></td><td>✅ Same name</td></tr>
-    <tr><td><code>MTextInput</code></td><td><code>MTextInput</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MTile</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MTileClickable</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MTileExpandable</code></td><td>✨ New</td></tr>
-    <tr><td><code>MOptionCard</code></td><td><code>MTileSelectable</code></td><td>🔄 Renamed</td></tr>
-    <tr><td>—</td><td><code>MToaster</code></td><td>✨ New</td></tr>
-    <tr><td><code>MToggle</code></td><td><code>MToggle</code></td><td>✅ Same name</td></tr>
-    <tr><td>—</td><td><code>MToggleGroup</code></td><td>✨ New</td></tr>
-    <tr><td>—</td><td><code>MTooltip</code></td><td>✨ New</td></tr>
-  </tbody>
-</table>