@mozaic-ds/vue 2.17.0 → 2.18.0

package/src/components/popover/MPopover.spec.ts

@@ -103,4 +103,130 @@ describe('MPopover.vue', () => {
     expect(activator.exists()).toBe(true);
     expect(activator.attributes('popovertarget')).toBe(id);
   });
+
+  describe('Focus management (toggle)', () => {
+    it('focuses the first focusable element inside when opened', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        props: { closable: true },
+      });
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'open' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      const firstFocusable = popoverEl.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      expect(document.activeElement).toBe(firstFocusable);
+      wrapper.unmount();
+    });
+
+    it('focuses the popover container when opened without focusable content', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        props: {
+          closable: false,
+          title: 'Information',
+          description: 'Read-only content',
+        },
+      });
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper')
+        .element as HTMLElement;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'open' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      expect(document.activeElement).toBe(popoverEl);
+      wrapper.unmount();
+    });
+
+    it('returns focus to the trigger when closed with focus inside the popover', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        props: { closable: true },
+        slots: {
+          activator: (slotProps: { id: string }) =>
+            h('button', {
+              popovertarget: slotProps.id,
+              class: 'trigger-btn',
+            }),
+        },
+      });
+
+      // Simulate focus being on the close button (inside the popover)
+      const closeBtn = wrapper.findComponent(MIconButton).find('button')
+        .element as HTMLElement;
+      closeBtn.focus();
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'closed' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      const trigger = wrapper.find('.trigger-btn').element as HTMLElement;
+      expect(document.activeElement).toBe(trigger);
+      wrapper.unmount();
+    });
+
+    it('returns focus to the trigger when closed with focus on document.body', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        slots: {
+          activator: (slotProps: { id: string }) =>
+            h('button', {
+              popovertarget: slotProps.id,
+              class: 'trigger-btn',
+            }),
+        },
+      });
+
+      // Simulate browser moving focus to body after popover collapses
+      (document.activeElement as HTMLElement)?.blur?.();
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'closed' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      const trigger = wrapper.find('.trigger-btn').element as HTMLElement;
+      expect(document.activeElement).toBe(trigger);
+      wrapper.unmount();
+    });
+
+    it('does not steal focus when closed by an outside click (focus already on another element)', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        slots: {
+          activator: (slotProps: { id: string }) =>
+            h('button', {
+              popovertarget: slotProps.id,
+              class: 'trigger-btn',
+            }),
+        },
+      });
+
+      // Simulate user clicking an outside input
+      const outsideInput = document.createElement('input');
+      document.body.appendChild(outsideInput);
+      outsideInput.focus();
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'closed' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      // Focus should remain on the outside input, not be stolen by the trigger
+      expect(document.activeElement).toBe(outsideInput);
+      outsideInput.remove();
+      wrapper.unmount();
+    });
+  });
 });

package/src/components/popover/MPopover.vue

@@ -10,10 +10,13 @@
   >
     <div
       :id="id"
+      ref="popoverRef"
       class="mc-popover__wrapper"
       popover
+      tabindex="-1"
       :aria-labelledby="title && `${id}-title`"
       :aria-describedby="description && `${id}-description`"
+      @toggle="onToggle"
     >
       <div class="mc-popover__content">
         <div v-if="title || description" class="mc-popover__headings">
@@ -58,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { useId, type VNode } from 'vue';
+import { useId, useTemplateRef, nextTick, type VNode } from 'vue';
 import { Cross20 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 /**
@@ -124,6 +127,38 @@ defineSlots<{
 }>();
 
 const id = useId();
+const popoverRef = useTemplateRef('popoverRef');
+
+function onToggle(event: ToggleEvent) {
+  if (event.newState === 'open') {
+    nextTick(() => {
+      const focusable = popoverRef.value?.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable) {
+        focusable.focus();
+      } else {
+        popoverRef.value?.focus();
+      }
+    });
+  } else {
+    const activeEl = document.activeElement as HTMLElement | null;
+    const closedFromInside =
+      !activeEl ||
+      activeEl === document.body ||
+      popoverRef.value?.contains(activeEl);
+
+    if (closedFromInside) {
+      const triggers = document.querySelectorAll<HTMLElement>(
+        `[popovertarget="${id}"]:not(.mc-popover__close)`,
+      );
+      const trigger = Array.from(triggers).find(
+        (el) => !popoverRef.value?.contains(el),
+      );
+      trigger?.focus();
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/segmentedcontrol/MSegmentedControl.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
+import { nextTick } from 'vue';
 import MSegmentedControl from './MSegmentedControl.vue';
 
 describe('MSegmentedControl.vue', () => {
@@ -145,4 +146,95 @@ describe('MSegmentedControl.vue', () => {
       expect(button.attributes('role')).toBe('radio');
     });
   });
+
+  it('forwards attrs to the radiogroup so callers can name the group', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+      attrs: { 'aria-label': 'View options' },
+    });
+    expect(wrapper.find('[role="radiogroup"]').attributes('aria-label')).toBe(
+      'View options',
+    );
+  });
+
+  describe('Keyboard navigation (radiogroup pattern)', () => {
+    it('selected button has tabindex="0", others have tabindex="-1"', () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: '2' },
+      });
+      const buttons = wrapper.findAll('button');
+      expect(buttons[0].attributes('tabindex')).toBe('-1');
+      expect(buttons[1].attributes('tabindex')).toBe('0');
+      expect(buttons[2].attributes('tabindex')).toBe('-1');
+    });
+
+    it('keeps the first segment tabbable when modelValue does not match any segment', () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: 'unknown' },
+      });
+      const buttons = wrapper.findAll('button');
+      expect(buttons[0].attributes('tabindex')).toBe('0');
+      expect(buttons[1].attributes('tabindex')).toBe('-1');
+      expect(buttons[2].attributes('tabindex')).toBe('-1');
+      expect(buttons[0].attributes('aria-checked')).toBe('false');
+    });
+
+    it('ArrowRight selects and focuses the next segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '1' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[0].element.focus();
+      await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['2']);
+      expect(document.activeElement).toBe(buttons[1].element);
+      wrapper.unmount();
+    });
+
+    it('ArrowLeft selects and focuses the previous segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '2' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[1].trigger('keydown', { key: 'ArrowLeft' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
+      wrapper.unmount();
+    });
+
+    it('ArrowRight wraps around from last to first segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '3' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('keydown', { key: 'ArrowRight' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
+      wrapper.unmount();
+    });
+
+    it('Home selects the first segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '3' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('keydown', { key: 'Home' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
+      wrapper.unmount();
+    });
+
+    it('End selects the last segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '1' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[0].trigger('keydown', { key: 'End' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['3']);
+      wrapper.unmount();
+    });
+  });
 });

package/src/components/segmentedcontrol/MSegmentedControl.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="mc-segmented-control" :class="classObject" role="radiogroup">
+  <div
+    class="mc-segmented-control"
+    :class="classObject"
+    role="radiogroup"
+    v-bind="$attrs"
+  >
     <button
       v-for="(segment, index) in segments"
       :key="`segment-${index}`"
+      :ref="(el) => setButtonRef(el, index)"
       type="button"
       class="mc-segmented-control__segment"
       :class="{
@@ -13,7 +19,9 @@
       }"
       :aria-checked="isSegmentSelected(index, segment.id)"
       role="radio"
+      :tabindex="index === selectedIndex ? 0 : -1"
       @click="onClickSegment(index, segment.id)"
+      @keydown="onKeydown($event, index)"
     >
       {{ segment.label }}
     </button>
@@ -21,7 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  ref,
+  watch,
+  type ComponentPublicInstance,
+} from 'vue';
 /**
  * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
  */
@@ -71,6 +85,17 @@ const classObject = computed(() => {
 
 const modelValue = ref<string | number | undefined>(props.modelValue);
 
+const selectedIndex = computed(() => {
+  const index = props.segments.findIndex((segment, segmentIndex) => {
+    const value =
+      typeof props.modelValue === 'number' ? segmentIndex : segment.id;
+
+    return modelValue.value === value;
+  });
+
+  return index >= 0 ? index : 0;
+});
+
 watch(
   () => props.modelValue,
   (newVal) => {
@@ -93,6 +118,40 @@ const isSegmentSelected = (index: number, id?: string) => {
   return modelValue.value === value;
 };
 
+const buttonRefs = ref<(HTMLButtonElement | null)[]>([]);
+
+function setButtonRef(
+  el: Element | ComponentPublicInstance | null,
+  index: number,
+) {
+  buttonRefs.value[index] = el as HTMLButtonElement | null;
+}
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  let nextIndex: number | null = null;
+
+  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+    event.preventDefault();
+    nextIndex = (index + 1) % props.segments.length;
+  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    nextIndex = (index - 1 + props.segments.length) % props.segments.length;
+  } else if (event.key === 'Home') {
+    event.preventDefault();
+    nextIndex = 0;
+  } else if (event.key === 'End') {
+    event.preventDefault();
+    nextIndex = props.segments.length - 1;
+  }
+
+  if (nextIndex !== null) {
+    onClickSegment(nextIndex, props.segments[nextIndex].id);
+    nextTick(() => buttonRefs.value[nextIndex!]?.focus());
+  }
+}
+
+defineOptions({ inheritAttrs: false });
+
 const emit = defineEmits<{
   /**
    * Emits when the selected segment changes, updating the modelValue prop.

package/src/components/starrating/MStarRating.spec.ts

@@ -4,20 +4,6 @@ import { nextTick } from 'vue';
 import MStarRating from './MStarRating.vue';
 import { StarFilled24, StarHalf24 } from '@mozaic-ds/icons-vue';
 
-function mockRect(el: Element, { left = 0, width = 100 } = {}) {
-  Object.defineProperty(el, 'getBoundingClientRect', {
-    value: () => ({
-      left,
-      width,
-      top: 0,
-      bottom: 0,
-      right: left + width,
-      height: 0,
-    }),
-    configurable: true,
-  });
-}
-
 describe('MStarRating', () => {
   it('renders 5 stars by default', () => {
     const wrapper = shallowMount(MStarRating, { props: { modelValue: 0 } });
@@ -39,8 +25,7 @@ describe('MStarRating', () => {
     });
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const first = stars[0];
-    mockRect(first.element, { left: 0, width: 100 });
-    await first.trigger('mousemove', { clientX: 10 });
+    await first.trigger('pointermove', { pointerType: 'mouse' });
     expect(wrapper.findComponent(StarHalf24).exists()).toBe(false);
   });
 
@@ -60,8 +45,7 @@ describe('MStarRating', () => {
     });
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const first = stars[0];
-    mockRect(first.element, { left: 0, width: 100 });
-    await first.trigger('click', { clientX: 10 });
+    await first.trigger('click');
     const emitted = wrapper.emitted('update:modelValue') || [];
     expect(emitted.length).toBe(1);
     expect(emitted[0][0]).toBe(1);
@@ -109,9 +93,8 @@ describe('MStarRating', () => {
 
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const first = stars[0];
-    mockRect(first.element, { left: 0, width: 100 });
 
-    await first.trigger('mousemove', { clientX: 10 });
+    await first.trigger('pointermove', { pointerType: 'mouse' });
     await nextTick();
 
     // aria-label should reflect hovered value (0.5) not modelValue (2)
@@ -124,6 +107,21 @@ describe('MStarRating', () => {
     expect(root.attributes('aria-label')).toContain('2');
   });
 
+  it('ignores non-mouse pointermove events for hover state', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 3, size: 'm', readonly: false },
+    });
+
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    const first = stars[0];
+    const root = wrapper.find('[role="slider"]');
+
+    await first.trigger('pointermove', { pointerType: 'touch' });
+    await nextTick();
+
+    expect(root.attributes('aria-label')).toContain('3');
+  });
+
   it('resets hover to null on blur (aria-label falls back to modelValue)', async () => {
     const wrapper = shallowMount(MStarRating, {
       props: { modelValue: 3, size: 'm', readonly: false },
@@ -131,12 +129,11 @@ describe('MStarRating', () => {
 
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const secondStar = stars[1];
-    mockRect(secondStar.element, { left: 0, width: 100 });
 
     const root = wrapper.find('[role="slider"]');
 
     await root.trigger('focus');
-    await secondStar.trigger('mousemove', { clientX: 10 });
+    await secondStar.trigger('pointermove', { pointerType: 'mouse' });
     await nextTick();
     expect(root.attributes('aria-label')).toContain('2');
 

package/src/components/starrating/MStarRating.vue

@@ -40,7 +40,7 @@
         v-on="
           !isReadonly
             ? {
-                mousemove: () => onHover(index),
+                pointermove: (event: PointerEvent) => onHover(event, index),
                 click: () => onClick(index),
               }
             : {}
@@ -152,7 +152,8 @@ function getStarComponent(index: number) {
   }
 }
 
-function onHover(index: number) {
+function onHover(event: PointerEvent, index: number) {
+  if (event.pointerType !== 'mouse') return;
   hover.value = index + 1;
 }
 

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.