@mozaic-ds/vue 2.17.0 → 2.19.0

package/src/components/tabs/MTabs.vue

@@ -16,11 +16,15 @@
             'mc-tabs__tab--disabled': tab.disabled,
           }"
           :aria-selected="isTabSelected(index, tab.id)"
+          :aria-disabled="tab.disabled || undefined"
+          :disabled="tab.disabled"
+          :tabindex="index === focusableTabIndex ? 0 : -1"
           type="button"
           @click="onClickTab(index, tab.id)"
+          @keydown="onKeydown($event, index)"
         >
           <span v-if="tab.icon" class="mc-tabs__icon">
-            <component :is="tab.icon" />
+            <component :is="tab.icon" aria-hidden="true" />
           </span>
           <div class="mc-tabs__label">
             <span>{{ tab.label }}</span>
@@ -36,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, type Component } from 'vue';
+import { computed, nextTick, useTemplateRef, type Component } from 'vue';
 import MDivider from '../divider/MDivider.vue';
 import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
@@ -101,7 +105,48 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref<string | number | undefined>(props.modelValue);
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string | number | undefined) {
+    emit('update:modelValue', value);
+  },
+});
+
+const enabledTabs = computed(() => {
+  return props.tabs.map((_, i) => i).filter((i) => !props.tabs[i].disabled);
+});
+
+const selectedTabIndex = computed(() => {
+  if (typeof modelValue.value === 'string') {
+    return props.tabs.findIndex((tab) => tab.id === modelValue.value);
+  }
+
+  if (
+    typeof modelValue.value === 'number' &&
+    modelValue.value >= 0 &&
+    modelValue.value < props.tabs.length
+  ) {
+    return modelValue.value;
+  }
+
+  return -1;
+});
+
+const focusableTabIndex = computed(() => {
+  if (enabledTabs.value.length === 0) {
+    return -1;
+  }
+
+  if (enabledTabs.value.includes(selectedTabIndex.value)) {
+    return selectedTabIndex.value;
+  }
+
+  return enabledTabs.value[0];
+});
+
+const tabRefs = useTemplateRef<HTMLButtonElement[]>('tab');
 
 const onClickTab = (index: number, id?: string) => {
   const tab =
@@ -114,7 +159,6 @@ const onClickTab = (index: number, id?: string) => {
   if (tab?.disabled) return;
   if (value !== modelValue.value) {
     modelValue.value = value;
-    emit('update:modelValue', value);
   }
 };
 
@@ -124,6 +168,48 @@ const isTabSelected = (index: number, id?: string) => {
   return modelValue.value === value;
 };
 
+function onKeydown(event: KeyboardEvent, index: number) {
+  if (
+    event.key !== 'ArrowRight' &&
+    event.key !== 'ArrowLeft' &&
+    event.key !== 'Home' &&
+    event.key !== 'End'
+  ) {
+    return;
+  }
+
+  if (enabledTabs.value.length === 0) {
+    return;
+  }
+
+  const pos = enabledTabs.value.indexOf(index);
+
+  let nextPos: number | null = null;
+  if (event.key === 'ArrowRight') {
+    event.preventDefault();
+    if (pos < 0) return;
+    nextPos = (pos + 1) % enabledTabs.value.length;
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault();
+    if (pos < 0) return;
+    nextPos = (pos - 1 + enabledTabs.value.length) % enabledTabs.value.length;
+  } else if (event.key === 'Home') {
+    event.preventDefault();
+    nextPos = 0;
+  } else if (event.key === 'End') {
+    event.preventDefault();
+    nextPos = enabledTabs.value.length - 1;
+  }
+
+  if (nextPos !== null) {
+    const nextIndex = enabledTabs.value[nextPos];
+    onClickTab(nextIndex, props.tabs[nextIndex].id);
+    nextTick(() => {
+      tabRefs.value?.[nextIndex]?.focus();
+    });
+  }
+}
+
 const emit = defineEmits<{
   /**
    * Emits when the selected tab changes, updating the modelValue prop.

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/components/textinput/MTextInput.vue

@@ -35,7 +35,7 @@
           class="mc-controls-options__icon"
           aria-hidden="true"
         />
-        <span class="mc-controls-options__label">{clearLabel}</span>
+        <span class="mc-controls-options__label">{{ clearLabel }}</span>
       </button>
     </div>
   </div>
@@ -71,6 +71,7 @@ const props = withDefaults(
      */
     inputType?:
       | 'date'
+      | 'datetime-local'
       | 'email'
       | 'number'
       | 'password'
@@ -145,7 +146,6 @@ const emit = defineEmits<{
 }>();
 
 function focus() {
-  console.log(textInput.value);
   textInput.value?.focus();
 }
 

package/src/components/toggle/MToggle.vue

@@ -13,7 +13,7 @@
           emit('update:modelValue', ($event.target as HTMLInputElement).checked)
         "
       />
-      <span v-if="label" :for="id" class="mc-toggle__label">
+      <span v-if="label" class="mc-toggle__label">
         {{ label }}
       </span>
     </label>

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>