@mozaic-ds/vue 2.17.0 → 2.19.0

package/src/components/modal/MModal.spec.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from 'vitest';
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import MModal from './MModal.vue';
 
@@ -77,17 +78,17 @@ describe('MModal component', () => {
     expect(wrapper.find('.link-slot').exists()).toBe(true);
   });
 
-  it('has aria-hidden set correctly based on open prop', async () => {
+  it('has inert attribute set correctly based on open prop', async () => {
     const wrapper = mount(MModal, {
       props: { open: false, title: 'Title' },
       global: { stubs },
     });
 
-    expect(wrapper.find('.mc-modal').attributes('aria-hidden')).toBe('true');
+    expect(wrapper.find('.mc-modal').attributes('inert')).toBeDefined();
 
     await wrapper.setProps({ open: true });
 
-    expect(wrapper.find('.mc-modal').attributes('aria-hidden')).toBe('false');
+    expect(wrapper.find('.mc-modal').attributes('inert')).toBeUndefined();
   });
 
   it('adds "is-open" class when open is true', async () => {
@@ -160,4 +161,115 @@ describe('MModal component', () => {
     expect(document.body.style.overflow).toBe('');
     expect(document.documentElement.style.overflow).toBe('');
   });
+
+  it('has role="dialog" on the modal element', () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title' },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-modal').attributes('role')).toBe('dialog');
+  });
+
+  it('sets aria-modal based on open prop', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title' },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-modal').attributes('aria-modal')).toBe('false');
+
+    await wrapper.setProps({ open: true });
+
+    expect(wrapper.find('.mc-modal').attributes('aria-modal')).toBe('true');
+  });
+
+  it('links aria-labelledby to the title element', () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Accessible Title' },
+      global: { stubs },
+    });
+
+    const modal = wrapper.find('.mc-modal');
+    const labelledBy = modal.attributes('aria-labelledby');
+    expect(labelledBy).toMatch(/^modalTitle-/);
+
+    const title = wrapper.find(`#${labelledBy}`);
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('Accessible Title');
+  });
+
+  it('closes when Escape key is pressed', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title' },
+      global: { stubs },
+    });
+
+    await wrapper.find('.mc-modal').trigger('keydown', { key: 'Escape' });
+
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual([false]);
+  });
+
+  it('moves focus to the modal when opened', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title' },
+      global: { stubs },
+      attachTo: document.body,
+    });
+
+    await wrapper.setProps({ open: true });
+    await nextTick();
+
+    expect(document.activeElement).toBe(wrapper.find('.mc-modal').element);
+
+    wrapper.unmount();
+  });
+
+  it('traps focus from last to first element on Tab', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closable: true },
+      slots: {
+        default: '<button data-test="last-focusable">Last</button>',
+      },
+      global: { stubs },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+
+    const closeButton = wrapper.find('button.mc-modal__close');
+    const lastFocusable = wrapper.find('[data-test="last-focusable"]');
+
+    (lastFocusable.element as HTMLButtonElement).focus();
+    await lastFocusable.trigger('keydown', { key: 'Tab' });
+
+    expect(document.activeElement).toBe(closeButton.element);
+
+    wrapper.unmount();
+  });
+
+  it('traps focus from first to last element on Shift+Tab', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closable: true },
+      slots: {
+        default: '<button data-test="last-focusable">Last</button>',
+      },
+      global: { stubs },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+
+    const closeButton = wrapper.find('button.mc-modal__close');
+    const lastFocusable = wrapper.find('[data-test="last-focusable"]');
+
+    (closeButton.element as HTMLButtonElement).focus();
+    await closeButton.trigger('keydown', { key: 'Tab', shiftKey: true });
+
+    expect(document.activeElement).toBe(lastFocusable.element);
+
+    wrapper.unmount();
+  });
 });

package/src/components/modal/MModal.vue

@@ -1,23 +1,38 @@
 <template>
-  <MOverlay :is-visible="open" dialogLabel="modalTitle" @click="onClickOverlay">
+  <MOverlay
+    :is-visible="open"
+    :dialogLabel="`modalTitle-${id}`"
+    @click="onClickOverlay"
+  >
     <section
+      ref="modalRef"
       class="mc-modal"
       :class="classObject"
       role="dialog"
-      aria-labelledby="modalTitle"
-      :aria-modal="open ? 'true' : 'false'"
+      :aria-labelledby="`modalTitle-${id}`"
       tabindex="-1"
-      :aria-hidden="!open"
-      v-bind="$attrs"
-      @keydown.esc="onClose"
-      @click.stop
+      v-bind="{
+        ...$attrs,
+        ...(open
+          ? {
+              'aria-modal': 'true',
+              onKeydown: onKeydown,
+              onClick: (event: MouseEvent) => {
+                event.stopPropagation();
+              },
+            }
+          : {
+              'aria-modal': 'false',
+              inert: true,
+            }),
+      }"
     >
       <div class="mc-modal__dialog" role="document">
         <header class="mc-modal__header">
           <span v-if="$slots.icon" class="mc-modal__icon">
             <slot name="icon" />
           </span>
-          <h2 class="mc-modal__title" id="modalTitle">
+          <h2 v-if="title" class="mc-modal__title" :id="`modalTitle-${id}`">
             {{ title }}
           </h2>
           <MIconButton
@@ -48,7 +63,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch, type VNode } from 'vue';
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  nextTick,
+  type VNode,
+  useId,
+} from 'vue';
 import { Cross24 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
@@ -64,7 +88,7 @@ const props = withDefaults(
     /**
      * Title of the modal.
      */
-    title: string;
+    title?: string;
     /**
      * Description of the modal.
      */
@@ -107,6 +131,19 @@ defineSlots<{
   footer?: VNode;
 }>();
 
+const id = useId();
+
+const modalRef = ref<HTMLElement | null>(null);
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
 const classObject = computed(() => {
   return {
     'is-open': props.open,
@@ -131,12 +168,16 @@ const unlockScroll = () => {
 onMounted(() => {
   watch(
     () => props.open,
-    (isOpen) => {
+    async (isOpen) => {
       emit('update:open', isOpen);
       if (props.scroll === false) {
         if (isOpen) lockScroll();
         else unlockScroll();
       }
+      if (isOpen) {
+        await nextTick();
+        modalRef.value?.focus();
+      }
     },
     { immediate: true },
   );
@@ -156,6 +197,45 @@ const onClose = () => {
   emit('update:open', false);
 };
 
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    onClose();
+    return;
+  }
+
+  if (event.key !== 'Tab' || !props.open || !isClient) return;
+
+  const modalElement = modalRef.value;
+  if (!modalElement) return;
+
+  const focusableElements = Array.from(
+    modalElement.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+  ).filter((element) => !element.hasAttribute('disabled'));
+
+  if (!focusableElements.length) {
+    event.preventDefault();
+    modalElement.focus();
+    return;
+  }
+
+  const firstFocusable = focusableElements[0];
+  const lastFocusable = focusableElements[focusableElements.length - 1];
+  const activeElement = document.activeElement as HTMLElement | null;
+
+  if (event.shiftKey) {
+    if (activeElement === firstFocusable || activeElement === modalElement) {
+      event.preventDefault();
+      lastFocusable.focus();
+    }
+    return;
+  }
+
+  if (activeElement === lastFocusable || activeElement === modalElement) {
+    event.preventDefault();
+    firstFocusable.focus();
+  }
+};
+
 const emit = defineEmits<{
   /**
    * Emits when the modal display changes, updating the modelValue prop.

package/src/components/modal/README.md

@@ -8,7 +8,7 @@ A modal is a dialog window that appears on top of the main content, requiring us
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `open` | if `true`, display the modal. | `boolean` | - |
-| `title*` | Title of the modal. | `string` | - |
+| `title` | Title of the modal. | `string` | - |
 | `description` | Description of the modal. | `string` | - |
 | `closable` | if `true`, display the close button. | `boolean` | `true` |
 | `scroll` | if `false`, lock the scroll when open. | `boolean` | `true` |

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.

package/src/components/overlay/MOverlay.spec.ts

@@ -32,7 +32,7 @@ describe('MOverlay.vue', () => {
     });
 
     expect(
-      wrapper.find('div[role="dialog"]').attributes('aria-labelledby'),
+      wrapper.find('div[aria-labelledby]').attributes('aria-labelledby'),
     ).toBe(label);
   });
 

package/src/components/overlay/MOverlay.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mc-overlay" :class="{ 'is-visible': isVisible }">
-    <div role="dialog" tabindex="-1" :aria-labelledby="dialogLabel">
+    <div tabindex="-1" :aria-labelledby="dialogLabel">
       <slot />
     </div>
   </div>

package/src/components/phonenumber/MPhoneNumber.spec.ts

@@ -67,7 +67,9 @@ describe('MPhoneNumber', () => {
   describe('Country Selection', () => {
     it('should render country selector and flag by default', () => {
       expect(
-        wrapper.find('select.mc-phone-number-input__select').exists(),
+        wrapper
+          .find('.mc-phone-number-input__select .mc-select__control')
+          .exists(),
       ).toBe(true);
       expect(wrapper.find('.mc-phone-number-input__flag').exists()).toBe(true);
     });
@@ -197,7 +199,9 @@ describe('MPhoneNumber', () => {
       wrapper = mount(MPhoneNumber, {
         props: { ...defaultProps, size: 's' },
       });
-      expect(wrapper.find('select').classes()).toContain('mc-select--s');
+      expect(
+        wrapper.find('.mc-phone-number-input__select').classes(),
+      ).toContain('mc-select--s');
       expect(wrapper.find('.mc-phone-number-input__input').classes()).toContain(
         'mc-text-input--s',
       );

package/src/components/phonenumber/MPhoneNumber.vue

@@ -4,25 +4,29 @@
       class="mc-phone-number-input__select-wrapper"
       :class="selectWrapperClass"
     >
-      <select
-        id="selectComponentId"
-        v-model="selectedCountry"
-        name="selectComponentName"
-        class="mc-select mc-phone-number-input__select"
+      <div 
+      class="mc-select mc-phone-number-input__select"
         :class="sizeSelectClass"
-        :disabled="isDisabled"
-        :readonly="isReadOnly"
       >
-        <option value="" selected hidden></option>
-        <option
-          v-for="country in countries"
-          :key="country"
-          :value="country"
-          :data-flag="country.toLowerCase()"
+        <select
+          id="selectComponentId"
+          class="mc-select__control"
+          v-model="selectedCountry"
+          name="selectComponentName"
+          :disabled="isDisabled"
+          :readonly="isReadOnly"
         >
-          {{ getCountryName(country) }} (+{{ getCountryCallingCode(country) }})
-        </option>
-      </select>
+          <option value="" selected hidden></option>
+          <option
+            v-for="country in countries"
+            :key="country"
+            :value="country"
+            :data-flag="country.toLowerCase()"
+          >
+            {{ getCountryName(country) }} (+{{ getCountryCallingCode(country) }})
+          </option>
+        </select>
+      </div>
 
       <div class="mc-phone-number-input__select-display">
         <div class="mc-phone-number-input__flag">