@mozaic-ds/vue 2.17.0 → 2.19.0

package/src/components/carousel/MCarousel.spec.ts

@@ -1,17 +1,28 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  afterAll,
+  beforeEach,
+} from 'vitest';
 import MCarousel from './MCarousel.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+const observerInstances: MockIntersectionObserver[] = [];
+
 class MockIntersectionObserver {
   callback: any;
   options: any;
   constructor(callback: any, options?: any) {
     this.callback = callback;
     this.options = options;
+    observerInstances.push(this);
   }
   observe = vi.fn();
   unobserve = vi.fn();
@@ -21,6 +32,10 @@ class MockIntersectionObserver {
 describe('MCarousel component', () => {
   let originalObserver: any;
 
+  beforeEach(() => {
+    observerInstances.length = 0;
+  });
+
   beforeAll(() => {
     originalObserver = global.IntersectionObserver;
     global.IntersectionObserver = MockIntersectionObserver as any;
@@ -132,6 +147,15 @@ describe('MCarousel component', () => {
     const container = wrapper.find('.mc-carousel');
     expect(container.attributes('role')).toBe('group');
     expect(container.attributes('aria-roledescription')).toBe('carousel');
-    expect(container.attributes('aria-labelledby')).toBe('mc-carousel__title');
+    // aria-labelledby should point to the headings wrapper (dynamic id)
+    const labelledby = container.attributes('aria-labelledby');
+    expect(labelledby).toBeDefined();
+    expect(wrapper.find(`#${labelledby}`).exists()).toBe(true);
+  });
+
+  it('slide container has aria-live="polite"', () => {
+    const wrapper = mountCarousel();
+    const content = wrapper.find('.mc-carousel__content');
+    expect(content.attributes('aria-live')).toBe('polite');
   });
 });

package/src/components/carousel/MCarousel.vue

@@ -3,10 +3,10 @@
     class="mc-carousel"
     role="group"
     aria-roledescription="carousel"
-    aria-labelledby="mc-carousel__title"
+    :aria-labelledby="titleId"
   >
     <div class="mc-carousel__header">
-      <div class="mc-carousel__headings">
+      <div :id="titleId" class="mc-carousel__headings">
         <slot name="header" />
       </div>
       <div class="mc-carousel__controls">
@@ -34,7 +34,12 @@
         </MIconButton>
       </div>
     </div>
-    <div class="mc-carousel__content" ref="contentContainer">
+    <div
+      class="mc-carousel__content"
+      ref="contentContainer"
+      aria-live="polite"
+      aria-atomic="false"
+    >
       <template
         v-for="(child, index) in $slots.default?.()"
         :key="`carousel-slide-${index}`"
@@ -46,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, type VNode } from 'vue';
+import { computed, onMounted, ref, useId, type VNode } from 'vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 /**
@@ -80,6 +85,7 @@ defineSlots<{
   header: VNode;
 }>();
 
+const titleId = useId();
 const activeIndex = ref<number>(0);
 const contentContainer = ref<HTMLElement | null>(null);
 

package/src/components/checklistmenu/MCheckListMenu.spec.ts

@@ -6,7 +6,7 @@ import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
 
 const StubMBuiltInMenu = {
   name: 'MBuiltInMenu',
-  props: ['modelValue', 'items', 'outlined'],
+  props: ['modelValue', 'items', 'outlined', 'label'],
   emits: ['update:modelValue'],
   template: '<div />',
 };
@@ -60,6 +60,17 @@ describe('MCheckListMenu', () => {
     expect(builtIn.props('outlined')).toBe(true);
   });
 
+  it('forwards label prop to MBuiltInMenu', () => {
+    const items = [{ label: 'A', checked: false }];
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, label: 'Checklist navigation' },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    expect(builtIn.props('label')).toBe('Checklist navigation');
+  });
+
   it('emits update:modelValue when inner menu updates modelValue', async () => {
     const items = [{ label: 'X', checked: false }];
     const wrapper = mount(MCheckListMenu, {

package/src/components/checklistmenu/MCheckListMenu.vue

@@ -3,6 +3,7 @@
     v-model="currentMenuItem"
     :items="menuItems"
     :outlined="props.outlined"
+    :label="props.label"
   />
 </template>
 
@@ -31,6 +32,11 @@ const props = defineProps<{
    * When enabled, adds a visible border around the wrapper to highlight or separate its content.
    */
   outlined?: boolean;
+  /**
+   * Accessible label for the navigation landmark. Should describe the purpose
+   * of this menu to distinguish it from other navigations on the page.
+   */
+  label?: string;
 }>();
 
 const emit = defineEmits<{

package/src/components/checklistmenu/README.md

@@ -10,6 +10,8 @@ A check-list menu is a structured vertical list where each item represents a dis
 | `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
 | `items*` | Defines the menu items, each of which sets a checked state and act as a button, link, or router-link. | `CheckListMenuItem[]` | - |
 | `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+| `label` | Accessible label for the navigation landmark. Should describe the purpose
+of this menu to distinguish it from other navigations on the page. | `string` | - |
 
 ## Events
 

package/src/components/combobox/MCombobox.vue

@@ -65,6 +65,7 @@
     <MOptionListbox
       ref="listbox"
       v-model="selection"
+      @update:model-value="onSelectionUpdate"
       :id
       :open="isOpen"
       :multiple
@@ -267,6 +268,12 @@ function close() {
   document.removeEventListener('click', handleClickOutside);
 }
 
+function onSelectionUpdate() {
+  if (!props.multiple) {
+    close();
+  }
+}
+
 function toggleListbox() {
   return isOpen.value ? close() : open();
 }

package/src/components/datatable/datatable.mdx

@@ -36,7 +36,8 @@ Then to use the component, you can proceed as follows:
   dark
   code={`
 <script setup>
-  import { MButton } from '@mozaic-ds/vue';
+  import '@mozaic-ds/datatable-vue/style.css';
+  import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 </script>
 
 <template>
@@ -59,4 +60,4 @@ Then to use the component, you can proceed as follows:
 </template>
 `} />
 
-To see more examples of usage, please refer to the [stories](https://adeo.github.io/mozaic-vue/?path=/docs/datatable-mdatatable-default--docs) of the component.
+To see more examples of usage, please refer to the other stories of the component.

package/src/components/drawer/MDrawer.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MDrawer from '@/components/drawer/MDrawer.vue';
 
@@ -11,7 +11,7 @@ const stubs = {
   },
   MOverlay: {
     name: 'MOverlay',
-    template: `<div class="overlay" @click="$emit('click')"><slot/></div>`,
+    template: `<div class="overlay" @click="$emit('click', $event)"><slot/></div>`,
   },
 };
 
@@ -211,11 +211,39 @@ describe('MDrawer component', () => {
       global: { stubs },
     });
 
-    await wrapper.find('section.mc-drawer').trigger('keydown.esc');
+    await wrapper
+      .find('section.mc-drawer')
+      .trigger('keydown', { key: 'Escape' });
     expect(wrapper.emitted('update:open')).toBeTruthy();
     expect(wrapper.emitted('update:open')!.at(-1)).toEqual([false]);
   });
 
+  it('stops Escape propagation after closing', async () => {
+    const onDocumentKeydown = vi.fn();
+    document.addEventListener('keydown', onDocumentKeydown);
+
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      attachTo: document.body,
+      global: { stubs },
+    });
+
+    wrapper
+      .find('section.mc-drawer')
+      .element.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+      );
+
+    expect(wrapper.emitted('update:open')!.at(-1)).toEqual([false]);
+    expect(onDocumentKeydown).not.toHaveBeenCalled();
+
+    document.removeEventListener('keydown', onDocumentKeydown);
+    wrapper.unmount();
+  });
+
   it('locks and unlocks scroll when scroll=false and open changes', async () => {
     const wrapper = mount(MDrawer, {
       props: {
@@ -252,6 +280,77 @@ describe('MDrawer component', () => {
     expect(document.body.style.overflow).toBe('');
   });
 
+  it('sets inert on section when closed', async () => {
+    const wrapper = mount(MDrawer, {
+      props: { open: false, title: 'Test' },
+      global: { stubs },
+    });
+    // JSDOM renders :inert="true" as "true" — not.toBeUndefined() is the correct check
+    expect(
+      wrapper.find('section.mc-drawer').attributes('inert'),
+    ).not.toBeUndefined();
+
+    await wrapper.setProps({ open: true });
+    expect(
+      wrapper.find('section.mc-drawer').attributes('inert'),
+    ).toBeUndefined();
+  });
+
+  it('does not render aria-modal when closed', async () => {
+    const wrapper = mount(MDrawer, {
+      props: { open: false, title: 'Test' },
+      global: { stubs },
+    });
+    expect(
+      wrapper.find('section.mc-drawer').attributes('aria-modal'),
+    ).toBeUndefined();
+
+    await wrapper.setProps({ open: true });
+    expect(wrapper.find('section.mc-drawer').attributes('aria-modal')).toBe(
+      'true',
+    );
+  });
+
+  it('traps focus forward: Tab from last focusable wraps to first', async () => {
+    const wrapper = mount(MDrawer, {
+      props: { open: true, title: 'Test', back: true },
+      attachTo: document.body,
+      global: { stubs },
+    });
+
+    const buttons = wrapper.findAll('button');
+    const lastEl = buttons[buttons.length - 1].element as HTMLElement;
+    lastEl.focus();
+
+    await wrapper
+      .find('section.mc-drawer')
+      .trigger('keydown', { key: 'Tab', shiftKey: false });
+
+    // focus should wrap to the first focusable button (back button)
+    expect(document.activeElement).toBe(buttons[0].element);
+    wrapper.unmount();
+  });
+
+  it('traps focus backward: Shift+Tab from first focusable wraps to last', async () => {
+    const wrapper = mount(MDrawer, {
+      props: { open: true, title: 'Test', back: true },
+      attachTo: document.body,
+      global: { stubs },
+    });
+
+    const buttons = wrapper.findAll('button');
+    const firstEl = buttons[0].element as HTMLElement;
+    firstEl.focus();
+
+    await wrapper
+      .find('section.mc-drawer')
+      .trigger('keydown', { key: 'Tab', shiftKey: true });
+
+    // focus should wrap to the last focusable button (close button)
+    expect(document.activeElement).toBe(buttons[buttons.length - 1].element);
+    wrapper.unmount();
+  });
+
   it('emits update:open on mount reflecting initial state', () => {
     const wrapper = mount(MDrawer, {
       props: {

package/src/components/drawer/MDrawer.vue

@@ -1,20 +1,27 @@
 <template>
   <MOverlay
     :is-visible="open"
-    dialogLabel="drawerTitle"
+    :dialogLabel="`drawerTitle-${id}`"
     @click="onClickOverlay"
   >
     <section
+      ref="sectionRef"
       class="mc-drawer"
       :class="classObject"
       role="dialog"
-      aria-labelledby="drawerTitle"
-      :aria-modal="open ? 'true' : 'false'"
+      :aria-labelledby="`drawerTitle-${id}`"
       tabindex="-1"
-      :aria-hidden="!open"
-      v-bind="$attrs"
-      @keydown.esc="onClose"
-      @click.stop
+      v-bind="{
+        ...$attrs,
+        ...(open
+          ? {
+              onKeydown: handleKeydown,
+              'aria-modal': 'true',
+            }
+          : {
+              inert: 'true',
+            }),
+      }"
     >
       <div class="mc-drawer__dialog" role="document">
         <div class="mc-drawer__header">
@@ -26,13 +33,13 @@
             @click="emit('back')"
           >
             <template #icon>
-              <ArrowBack24 aria-hidden="true" />
+              <ArrowBack24 />
             </template>
           </MIconButton>
           <h2
             class="mc-drawer__title"
             tabindex="-1"
-            id="drawerTitle"
+            :id="`drawerTitle-${id}`"
             ref="titleRef"
           >
             {{ title }}
@@ -44,12 +51,12 @@
             @click="onClose"
           >
             <template #icon>
-              <Cross24 aria-hidden="true" />
+              <Cross24 />
             </template>
           </MIconButton>
         </div>
         <div class="mc-drawer__body">
-          <div class="mc-drawer__content" tabindex="0">
+          <div class="mc-drawer__content">
             <h2 v-if="contentTitle" class="mc-drawer__content__title">
               {{ contentTitle }}
             </h2>
@@ -65,7 +72,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, type VNode, ref, onMounted, onUnmounted } from 'vue';
+import {
+  computed,
+  watch,
+  type VNode,
+  ref,
+  onMounted,
+  onUnmounted,
+  useId,
+} from 'vue';
 import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
@@ -123,6 +138,8 @@ defineSlots<{
   footer?: VNode;
 }>();
 
+const id = useId();
+
 const classObject = computed(() => {
   return {
     'is-open': props.open,
@@ -133,6 +150,45 @@ const classObject = computed(() => {
 });
 
 const titleRef = ref<HTMLElement | null>(null);
+const sectionRef = ref<HTMLElement | null>(null);
+
+function getFocusableElements(): HTMLElement[] {
+  if (!sectionRef.value) return [];
+  return Array.from(
+    sectionRef.value.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+    return;
+  }
+  if (e.key === 'Tab') {
+    const focusable = getFocusableElements();
+    if (!focusable.length) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }
+}
 const isClient =
   typeof window !== 'undefined' && typeof document !== 'undefined';
 
@@ -169,8 +225,11 @@ onUnmounted(() => {
   unlockScroll();
 });
 
-const onClickOverlay = () => {
-  if (props.closeOnOverlay) {
+const onClickOverlay = (event: MouseEvent) => {
+  if (
+    props.closeOnOverlay &&
+    !sectionRef.value?.contains(event.target as Node)
+  ) {
     onClose();
   }
 };

package/src/components/field/MField.vue

@@ -20,6 +20,7 @@
       class="mc-field__validation-message"
       :id="messageId"
       :class="classObjectValidation"
+      :role="isInvalid ? 'alert' : 'status'"
     >
       <MLoader v-if="isLoading" size="xs"></MLoader>
       {{ message }}

package/src/components/fileuploader/MFileUploader.vue

@@ -9,12 +9,12 @@
       <input
         ref="fileInput"
         type="file"
-        aria-label="File input"
+        aria-hidden="true"
+        tabindex="-1"
         :accept="props.accept"
         :multiple="props.multiple"
         class="mc-file-uploader__hidden-input"
         :disabled="props.disabled"
-        :aria-disabled="props.disabled"
         @change="onChange"
       />
 

package/src/components/fileuploaderitem/MFileUploaderItem.vue

@@ -40,13 +40,7 @@
       <template v-if="isStacked">
         <MDivider />
         <div class="mc-file-uploader-item__actions-container">
-          <MButton
-            ghost
-            size="s"
-            icon-position="left"
-            aria-label="Delete file"
-            @click="emit('delete')"
-          >
+          <MButton ghost size="s" icon-position="left" @click="emit('delete')">
             {{ props.deleteButtonLabel }}
 
             <template #icon>
@@ -78,6 +72,7 @@
     <span
       v-if="!valid && (props.errorMessage || slots.errorMessage)"
       class="mc-file-uploader-item__error-message"
+      role="alert"
     >
       <slot name="errorMessage">
         {{ props.errorMessage }}

package/src/components/iconbutton/MIconButton.spec.ts

@@ -92,6 +92,21 @@ describe('MButton component', () => {
     expect(button.attributes('type')).toBe('button');
   });
 
+  it('sets aria-busy when isLoading is true', () => {
+    const wrapper = mount(MIconButton, {
+      props: { isLoading: true },
+      slots: { icon: [ChevronRight24] },
+    });
+    expect(wrapper.find('button').attributes('aria-busy')).toBe('true');
+  });
+
+  it('does not set aria-busy when not loading', () => {
+    const wrapper = mount(MIconButton, {
+      slots: { icon: [ChevronRight24] },
+    });
+    expect(wrapper.find('button').attributes('aria-busy')).toBeUndefined();
+  });
+
   it('can have type="submit" when the type prop is "submit"', () => {
     const wrapper = mount(MIconButton, {
       props: {

package/src/components/iconbutton/MIconButton.vue

@@ -4,6 +4,7 @@
     :class="classObject"
     :disabled="disabled"
     :type="type"
+    :aria-busy="isLoading || undefined"
   >
     <span
       v-if="isLoading"

package/src/components/kpiitem/MKpiItem.spec.ts

@@ -67,5 +67,18 @@ describe('MKpiItem component', () => {
 
       expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
     });
+
+    it.each([
+      ['increasing'],
+      ['decreasing'],
+      ['stable'],
+    ] as const)('gives the trend icon an accessible label for "%s"', (trend) => {
+      const wrapper = mount(KpiItem, {
+        props: { value: '123', trend },
+      });
+      const icon = wrapper.find('.mc-kpi__icon');
+      expect(icon.attributes('role')).toBe('img');
+      expect(icon.attributes('aria-label')).toBe(trend);
+    });
   });
 });

package/src/components/kpiitem/MKpiItem.vue

@@ -15,7 +15,7 @@
           {{ information }}
         </span>
 
-        <component v-if="trend" :is="getIconComponent" class="mc-kpi__icon" />
+        <component v-if="trend" :is="getIconComponent" class="mc-kpi__icon" role="img" :aria-label="trend" />
       </div>
     </div>
   </div>