@mozaic-ds/vue 2.17.0 → 2.19.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/sidebarexpandableitem/MSidebarExpandableItem.spec.ts

@@ -131,6 +131,18 @@ describe('MSidebarExpandableItem', () => {
     expect(onListboxKeydown).toHaveBeenCalled();
   });
 
+  it('collapsed trigger button has aria-label equal to label prop', () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'Products', menuLabel: 'Products menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: false },
+      },
+    });
+
+    const button = wrapper.find('button.mc-sidebar__trigger');
+    expect(button.attributes('aria-label')).toBe('Products');
+  });
+
   it('calls hideFloatingItem on mouseleave and blur on the listbox', async () => {
     const wrapper = mount(MSidebarExpandableItem, {
       props: { label: 'Item', menuLabel: 'Menu' },

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue

@@ -24,6 +24,7 @@
       aria-haspopup="listbox"
       :aria-expanded="floatingItemIsDisplayed"
       :aria-controls="`listbox-${id}`"
+      :aria-label="props.label"
       @mouseenter="showFloatingItem"
       @focus="showFloatingItem"
       @keydown="onTriggerKeydown"

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/steppercompact/MStepperCompact.spec.ts

@@ -50,6 +50,15 @@ describe('MStepperCompact component', () => {
     expect(progressbar.props('contentValue')).toBe('3 / 7');
   });
 
+  it('passes a dynamic aria-label reflecting current step to MCircularProgressbar', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: { label: 'Step', value: 2, maxSteps: 5 },
+    });
+
+    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });
+    expect(progressbar.attributes('aria-label')).toBe('Step 2 / 5');
+  });
+
   it('passes correct props to MCircularProgressbar', () => {
     const wrapper = mount(MStepperCompact, {
       props: {

package/src/components/steppercompact/MStepperCompact.vue

@@ -2,7 +2,7 @@
   <div class="mc-stepper-compact">
     <div class="mc-circular-progressbar mc-stepper-compact__progress">
       <MCircularProgressbar
-        aria-label="Progress bar"
+        :aria-label="`Step ${props.value} / ${props.maxSteps}`"
         type="content"
         size="m"
         :value="progressValue"

package/src/components/stepperinline/MStepperInline.spec.ts

@@ -9,6 +9,17 @@ describe('MStepperInline', () => {
     { id: '3', label: 'Step 3' },
   ];
 
+  it('sets aria-current="step" on the current step item', () => {
+    const wrapper = mount(MStepperInline, {
+      props: { currentStep: '2', steps: defaultSteps },
+    });
+
+    const items = wrapper.findAll('.mc-stepper-inline__item');
+    expect(items[1].attributes('aria-current')).toBe('step');
+    expect(items[0].attributes('aria-current')).toBeUndefined();
+    expect(items[2].attributes('aria-current')).toBeUndefined();
+  });
+
   it('renders correctly with default props', () => {
     const wrapper = mount(MStepperInline, {
       props: {

package/src/components/stepperinline/MStepperInline.vue

@@ -7,11 +7,11 @@
         class="mc-stepper-inline__item"
         :class="{ 'is-completed': stepStates[i].completed }"
         :tabindex="stepStates[i].completed ? 0 : undefined"
+        :aria-current="stepStates[i].current ? 'step' : undefined"
       >
         <Check24
           class="mc-stepper-inline__icon mc-stepper-inline__icon--check"
           v-if="stepStates[i].completed"
-          aria-hidden="true"
         />
         <span
           v-else

package/src/components/stepperstacked/MStepperStacked.spec.ts

@@ -9,6 +9,19 @@ const defaultSteps = [
 ];
 
 describe('MStepperStacked', () => {
+  describe('Accessibility', () => {
+    it('sets aria-current="step" on the current step item', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '2' },
+      });
+
+      const items = wrapper.findAll('.mc-stepper-stacked__item');
+      expect(items[1].attributes('aria-current')).toBe('step');
+      expect(items[0].attributes('aria-current')).toBeUndefined();
+      expect(items[2].attributes('aria-current')).toBeUndefined();
+    });
+  });
+
   describe('Basic rendering', () => {
     it('renders as many li elements as there are steps', () => {
       const wrapper = mount(MStepperStacked, {

package/src/components/stepperstacked/MStepperStacked.vue

@@ -8,6 +8,7 @@
           'mc-stepper-stacked__item': true,
           'has-additional': step.additionalInfo,
         }"
+        :aria-current="stepStates[index].current ? 'step' : undefined"
       >
         <div class="mc-stepper-stacked__indicator">
           <Check24