@mozaic-ds/vue 2.17.0 → 2.18.0

package/src/components/accordionlistitem/MAccordionListItem.spec.ts

@@ -82,15 +82,34 @@ describe('MAccordionListItem', () => {
     expect(button.attributes('aria-expanded')).toBe('true');
   });
 
-  it('sets aria-hidden correctly for content', async () => {
+  it('sets inert correctly for content', async () => {
     const { wrapper, state } = mountItem({ id: 'item-1', title: 'Title' }, []);
 
     const content = wrapper.find('.mc-accordion__content');
-    expect(content.attributes('aria-hidden')).toBe('true');
+    expect(content.attributes('inert')).not.toBeUndefined();
 
     state.value.push('item-1');
     await wrapper.vm.$nextTick();
-    expect(content.attributes('aria-hidden')).toBe('false');
+    expect(content.attributes('inert')).toBeUndefined();
+  });
+
+  it('renders heading with default level h2', () => {
+    const { wrapper } = mountItem({ id: '1', title: 'Title' });
+    expect(wrapper.find('h2.mc-accordion__title').exists()).toBe(true);
+  });
+
+  it('renders heading with custom headingLevel prop', () => {
+    const wrapper = mount(MAccordionListItem, {
+      props: { id: '1', title: 'Title', tag: 'h3' },
+      global: {
+        provide: {
+          [AccordionStateKey as symbol]: ref([]),
+          [AccordionToggleFnKey as symbol]: vi.fn(),
+        },
+      },
+    });
+    expect(wrapper.find('h3.mc-accordion__title').exists()).toBe(true);
+    expect(wrapper.find('h2').exists()).toBe(false);
   });
 
   it('calls toggleItem when button is clicked', async () => {

package/src/components/accordionlistitem/MAccordionListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mc-accordion__item">
     <div class="mc-accordion__header">
-      <h2 class="mc-accordion__title">
+      <component :is="tag" class="mc-accordion__title">
         <button
           :id="`accordion-${id}`"
           class="mc-accordion__trigger"
@@ -19,12 +19,12 @@
             </span>
           </div>
         </button>
-      </h2>
+      </component>
     </div>
     <div
       :id="`content-${id}`"
       class="mc-accordion__content"
-      :aria-hidden="!open"
+      :inert="!open || undefined"
       :aria-labelledby="`accordion-${id}`"
       role="region"
     >
@@ -49,31 +49,41 @@ import {
   AccordionToggleFnKey,
 } from '../accordionlist/m-accordion-list.const';
 
-const props = defineProps<{
-  /**
-   * A unique identifier for the accordion item.
-   * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
-   * ensuring accessibility and tracking the open/closed state.
-   * If no ID is provided, a unique one is generated automatically.
-   */
-  id: string;
-  /**
-   * The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content.
-   */
-  title: string;
-  /**
-   * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
-   */
-  subtitle?: string;
-  /**
-   * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
-   */
-  content?: string;
-  /**
-   * Icon component to display before the item title.
-   */
-  icon?: Component;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the accordion item.
+     * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
+     * ensuring accessibility and tracking the open/closed state.
+     * If no ID is provided, a unique one is generated automatically.
+     */
+    id: string;
+    /**
+     * The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content.
+     */
+    title: string;
+    /**
+     * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
+     */
+    subtitle?: string;
+    /**
+     * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
+     */
+    content?: string;
+    /**
+     * Icon component to display before the item title.
+     */
+    icon?: Component;
+    /**
+     * Heading level for the accordion trigger (h2–h6). Adjust to match the
+     * heading hierarchy of the page where the accordion is used.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  }>(),
+  {
+    tag: 'h2',
+  },
+);
 
 defineSlots<{
   /**

package/src/components/builtinmenu/MBuiltInMenu.spec.ts

@@ -86,7 +86,9 @@ describe('MBuiltInMenu', () => {
     });
     const lis = wrapper.findAll('li');
     const selectedItem = lis[2];
-    expect(selectedItem.attributes('aria-current')).toBe('true');
+    // aria-current is on the interactive element, not the <li> container
+    const interactiveEl = selectedItem.find('button, a');
+    expect(interactiveEl.attributes('aria-current')).toBe('true');
     expect(selectedItem.classes()).toContain(
       'mc-built-in-menu__item--selected',
     );
@@ -108,4 +110,31 @@ describe('MBuiltInMenu', () => {
       'mc-built-in-menu--outlined',
     );
   });
+
+  it('uses default aria-label "Menu" on nav when label prop is not provided', () => {
+    const wrapper = mount(MBuiltInMenu, { props: { items } });
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Menu');
+  });
+
+  it('uses custom label prop as aria-label on nav', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, label: 'Settings navigation' },
+    });
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Settings navigation');
+  });
+
+  it('sets aria-hidden on ChevronRight and item icons', () => {
+    const wrapper = mount(MBuiltInMenu, { props: { items } });
+    // All SVG icons inside items should be aria-hidden
+    const ariaHiddenIcons = wrapper.findAll('[aria-hidden="true"]');
+    expect(ariaHiddenIcons.length).toBeGreaterThan(0);
+  });
+
+  it('does not put aria-current on the <li>, only on the interactive element', () => {
+    const wrapper = mount(MBuiltInMenu, { props: { items, modelValue: 0 } });
+    const li = wrapper.findAll('li')[0];
+    expect(li.attributes('aria-current')).toBeUndefined();
+    const interactive = li.find('button, a');
+    expect(interactive.attributes('aria-current')).toBe('true');
+  });
 });

package/src/components/builtinmenu/MBuiltInMenu.vue

@@ -4,7 +4,7 @@
       'mc-built-in-menu': true,
       'mc-built-in-menu--outlined': props.outlined,
     }"
-    aria-label="menu"
+    :aria-label="props.label"
   >
     <ul class="mc-built-in-menu__list">
       <li
@@ -14,7 +14,6 @@
           'mc-built-in-menu__item': true,
           'mc-built-in-menu__item--selected': currentMenuItem === index,
         }"
-        v-bind="currentMenuItem === index ? { 'aria-current': true } : {}"
       >
         <component
           :is="getItemTag(item)"
@@ -23,17 +22,19 @@
             'mc-built-in-menu__link': isLink(item),
           }"
           v-bind="isLink(item) ? getLinkAttrs(item) : {}"
+          :aria-current="currentMenuItem === index ? true : undefined"
           @click="currentMenuItem = index"
         >
           <component
             v-if="item.icon"
             :is="item.icon"
             class="mc-built-in-menu__icon"
+            aria-hidden="true"
           />
 
           <span class="mc-built-in-menu__label">{{ item.label }}</span>
 
-          <ChevronRight20 class="mc-built-in-menu__icon" />
+          <ChevronRight20 class="mc-built-in-menu__icon" aria-hidden="true" />
         </component>
       </li>
     </ul>
@@ -56,20 +57,28 @@ export type MenuItem = {
   target?: '_self' | '_blank' | '_parent' | '_top';
 };
 
-const props = defineProps<{
-  /**
-   * 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.
-   */
-  modelValue?: number;
-  /**
-   * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
-   */
-  items: MenuItem[];
-  /**
-   * When enabled, adds a visible border around the wrapper to highlight or separate its content.
-   */
-  outlined?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 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.
+     */
+    modelValue?: number;
+    /**
+     * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
+     */
+    items: MenuItem[];
+    /**
+     * 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;
+  }>(),
+  { label: 'Menu' },
+);
 
 const emit = defineEmits<{
   /**

package/src/components/builtinmenu/README.md

@@ -10,6 +10,8 @@ A built-in menu is a structured list of navigational or interactive options, typ
 | `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 can include an icon and act as a button, link, or router-link. | `MenuItem[]` | - |
 | `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` | `"Menu"` |
 
 ## Events
 

package/src/components/callout/MCallout.spec.ts

@@ -97,4 +97,39 @@ describe('MCallout.vue', () => {
 
     expect(wrapper.find('.mc-callout__footer').exists()).toBe(false);
   });
+
+  it('renders title with default tag prop (h2)', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc' },
+    });
+    expect(wrapper.find('h2.mc-callout__title').exists()).toBe(true);
+  });
+
+  it('renders title with custom tag prop', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc', tag: 'h3' },
+    });
+    expect(wrapper.find('h3.mc-callout__title').exists()).toBe(true);
+    expect(wrapper.find('h2').exists()).toBe(false);
+  });
+
+  it('has aria-labelledby pointing to the title', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc' },
+    });
+    const section = wrapper.find('section');
+    const titleId = wrapper.find('.mc-callout__title').attributes('id');
+    expect(titleId).toBeDefined();
+    expect(section.attributes('aria-labelledby')).toBe(titleId);
+  });
+
+  it('sets aria-hidden on the icon wrapper', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc' },
+      slots: { icon: '<svg class="icon" />' },
+    });
+    expect(wrapper.find('.mc-callout__icon').attributes('aria-hidden')).toBe(
+      'true',
+    );
+  });
 });

package/src/components/callout/MCallout.vue

@@ -1,10 +1,20 @@
 <template>
-  <section class="mc-callout" role="status" :class="classObject">
-    <div class="mc-callout__icon">
+  <section
+    class="mc-callout"
+    role="status"
+    :class="classObject"
+    :aria-labelledby="`callout-title-${id}`"
+  >
+    <div class="mc-callout__icon" aria-hidden="true">
       <slot name="icon" />
     </div>
     <div class="mc-callout__content">
-      <h2 class="mc-callout__title">{{ title }}</h2>
+      <component
+        :is="props.tag"
+        :id="`callout-title-${id}`"
+        class="mc-callout__title"
+        >{{ title }}</component
+      >
 
       <p class="mc-callout__message">
         {{ description }}
@@ -18,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type VNode } from 'vue';
+import { computed, useId, type VNode } from 'vue';
 /**
  * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
  */
@@ -36,12 +46,20 @@ const props = withDefaults(
      * Allows to define the callout appearance.
      */
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
+    /**
+     * Heading level for the callout title (h2–h6). Adjust to match the
+     * heading hierarchy of the page where the callout is used.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   }>(),
   {
     appearance: 'standard',
+    tag: 'h2',
   },
 );
 
+const id = useId();
+
 defineSlots<{
   /**
    * Use this slot to insert an icon.

package/src/components/callout/README.md

@@ -10,6 +10,8 @@ A callout is used to highlight additional information that can assist users with
 | `title*` | Title of the callout. | `string` | - |
 | `description*` | Description of the callout. | `string` | - |
 | `appearance` | Allows to define the callout appearance. | `"standard"` `"inverse"` `"accent"` `"tips"` | `"standard"` |
+| `tag` | Heading level for the callout title (h2–h6). Adjust to match the
+heading hierarchy of the page where the callout is used. | `"h2"` `"h1"` `"h3"` `"h4"` `"h5"` `"h6"` | `"h2"` |
 
 ## Slots
 

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/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/navigationindicator/MNavigationIndicator.spec.ts

@@ -77,24 +77,6 @@ describe('MNavigationIndicator.vue', () => {
     expect(emitted![0][0]).toBe(1);
   });
 
-  it('emits update:modelValue when Enter is pressed on a step', async () => {
-    const wrapper = mount(MNavigationIndicator, {
-      props: { steps: 3, modelValue: 0 },
-      global: {
-        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
-      },
-    });
-
-    const stepButtons = wrapper.findAll(
-      '.mc-navigation-indicator__list .mc-navigation-indicator__button',
-    );
-    await stepButtons[2].trigger('keydown', { key: 'Enter' });
-
-    const emitted = wrapper.emitted('update:modelValue');
-    expect(emitted).toBeTruthy();
-    expect(emitted![0][0]).toBe(2);
-  });
-
   it('does not emit update:modelValue when a wrong key is pressed', async () => {
     const wrapper = mount(MNavigationIndicator, {
       props: { steps: 3, modelValue: 0 },
@@ -149,4 +131,79 @@ describe('MNavigationIndicator.vue', () => {
     expect(button.text()).toContain('Pause');
     expect(wrapper.find('[data-testid="pause-icon"]').exists()).toBe(true);
   });
+
+  it('renders a navigation landmark with an aria-label', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 0 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const navigation = wrapper.find('nav[aria-label="Navigation steps"]');
+    expect(navigation.exists()).toBe(true);
+    expect(navigation.attributes('aria-label')).toBe('Navigation steps');
+  });
+
+  it('player icon button has aria-label reflecting action state', () => {
+    const wrapperPause = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'pause' },
+      global: { stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 } },
+    });
+    expect(
+      wrapperPause
+        .find('[data-testid="m-icon-button"]')
+        .attributes('aria-label'),
+    ).toBe('Pause');
+
+    const wrapperResume = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'resume' },
+      global: { stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 } },
+    });
+    expect(
+      wrapperResume
+        .find('[data-testid="m-icon-button"]')
+        .attributes('aria-label'),
+    ).toBe('Resume');
+  });
+
+  it('gives each step button an action-oriented aria-label', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 1 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const buttons = wrapper.findAll('.mc-navigation-indicator__button');
+    expect(buttons[0].attributes('aria-label')).toBe('Go to step 1 of 3');
+    expect(buttons[1].attributes('aria-label')).toBe('Current step, 2 of 3');
+    expect(buttons[2].attributes('aria-label')).toBe('Go to step 3 of 3');
+  });
+
+  it('sets aria-current="step" only on the active step button', () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 3, modelValue: 1 },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    const buttons = wrapper.findAll('.mc-navigation-indicator__button');
+    expect(buttons[1].attributes('aria-current')).toBe('step');
+    expect(buttons[0].attributes('aria-current')).not.toBe('step');
+    expect(buttons[2].attributes('aria-current')).not.toBe('step');
+  });
+
+  it('emits "action" when the player button is clicked', async () => {
+    const wrapper = mount(MNavigationIndicator, {
+      props: { steps: 2, modelValue: 0, action: 'resume' },
+      global: {
+        stubs: { MButton, MIconButton, PauseCircle24, PlayCircle24 },
+      },
+    });
+
+    await wrapper.find('[data-testid="m-icon-button"]').trigger('click');
+    expect(wrapper.emitted('action')).toBeTruthy();
+  });
 });

package/src/components/navigationindicator/MNavigationIndicator.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="mc-navigation-indicator"
-    role="navigation"
-    aria-label="Navigations steps"
-  >
+  <nav class="mc-navigation-indicator" aria-label="Navigation steps">
     <ul class="mc-navigation-indicator__list">
       <li
         v-for="(_step, index) in steps"
@@ -11,14 +7,14 @@
         class="mc-navigation-indicator__item"
       >
         <button
+          type="button"
           :class="{
             'mc-navigation-indicator__button': true,
             'mc-navigation-indicator__button--active': active === index,
           }"
-          aria-label="Navigation step button"
+          :aria-label="getStepAriaLabel(index)"
           :aria-current="active === index && 'step'"
           @click="setActiveStep(index)"
-          @keydown="onKeydown($event, index)"
         ></button>
       </li>
     </ul>
@@ -43,14 +39,14 @@
         size="s"
         ghost
         @click="emit('action')"
-        aria-label="Control button"
+        :aria-label="props.action === 'pause' ? 'Pause' : 'Resume'"
       >
         <template #icon>
           <component :is="actionIcon" />
         </template>
       </MIconButton>
     </template>
-  </div>
+  </nav>
 </template>
 
 <script setup lang="ts">
@@ -120,10 +116,12 @@ function setActiveStep(step: number) {
   active.value = step;
 }
 
-function onKeydown(event: KeyboardEvent, step: number) {
-  if (event.key === 'Enter') {
-    setActiveStep(step);
+function getStepAriaLabel(step: number) {
+  if (active.value === step) {
+    return `Current step, ${step + 1} of ${props.steps}`;
   }
+
+  return `Go to step ${step + 1} of ${props.steps}`;
 }
 </script>
 

package/src/components/optionListbox/MOptionListbox.vue

@@ -137,7 +137,22 @@ import {
   Less20,
   Check20,
 } from '@mozaic-ds/icons-vue';
-import { debounce } from 'lodash';
+
+function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: unknown, ...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn.apply(this, args);
+    }, wait);
+  };
+}
 
 /**
  * An Option Listbox is a customizable, accessible listbox component designed to power dropdowns and comboboxes with advanced selection capabilities. It supports single or multiple selection, optional search, grouped options with section headers, and full keyboard navigation.