@mozaic-ds/vue 2.18.0 → 2.19.1

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.figma.ts

@@ -16,9 +16,13 @@ figma.connect(
     },
     example: ({ player }) =>
       html`<script setup>
-        import { MNavigationIndicator } from '@mozaic-ds/vue';
-      </script>
+          import { MNavigationIndicator } from '@mozaic-ds/vue';
+        </script>
 
-      <MNavigationIndicator :steps="6" :model-value="0" player=${player}></MNavigationIndicator>`,
+        <MNavigationIndicator
+          :steps="6"
+          :model-value="0"
+          player=${player}
+        ></MNavigationIndicator>`,
   },
 );

package/src/components/numberbadge/MNumberBadge.figma.ts

@@ -23,9 +23,13 @@ figma.connect(
     },
     example: ({ label, appearance, size }) =>
       html`<script setup>
-        import { MNumberBadge } from '@mozaic-ds/vue';
-      </script>
+          import { MNumberBadge } from '@mozaic-ds/vue';
+        </script>
 
-      <MNumberBadge :label=${label} appearance=${appearance} size=${size}></MNumberBadge>`,
+        <MNumberBadge
+          :label=${label}
+          appearance=${appearance}
+          size=${size}
+        ></MNumberBadge>`,
   },
 );

package/src/components/optionListbox/MOptionListbox.figma.ts

@@ -21,16 +21,16 @@ figma.connect(
     },
     example: ({ search, actions }) =>
       html`<script setup>
-        import { MOptionListbox } from '@mozaic-ds/vue';
-      </script>
+          import { MOptionListbox } from '@mozaic-ds/vue';
+        </script>
 
-      <MOptionListbox
-        id="option-listbox"
-        v-model="selected"
-        multiple
-        search=${search}
-        actions=${actions}
-        :options="[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]"
-      />`,
+        <MOptionListbox
+          id="option-listbox"
+          v-model="selected"
+          multiple
+          search=${search}
+          actions=${actions}
+          :options="[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]"
+        />`,
   },
 );

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

@@ -10,11 +10,11 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MOverlay } from '@mozaic-ds/vue';
-      </script>
+          import { MOverlay } from '@mozaic-ds/vue';
+        </script>
 
-      <MOverlay is-visible dialog-label="Overlay">
-        <p>Overlay content</p>
-      </MOverlay>`,
+        <MOverlay is-visible dialog-label="Overlay">
+          <p>Overlay content</p>
+        </MOverlay>`,
   },
 );

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/pageheader/MPageHeader.figma.ts

@@ -13,9 +13,9 @@ figma.connect(
     },
     example: ({ title, shadow }) =>
       html`<script setup>
-        import { MPageHeader } from '@mozaic-ds/vue';
-      </script>
+          import { MPageHeader } from '@mozaic-ds/vue';
+        </script>
 
-      <MPageHeader title=${title} shadow=${shadow} />`,
+        <MPageHeader title=${title} shadow=${shadow} />`,
   },
 );

package/src/components/pagination/MPagination.figma.ts

@@ -15,20 +15,20 @@ figma.connect(
     },
     example: ({ compact }) =>
       html`<script setup>
-        import { MPagination } from '@mozaic-ds/vue';
-      </script>
+          import { MPagination } from '@mozaic-ds/vue';
+        </script>
 
-      <MPagination
-        id="pagination-id"
-        :model-value="1"
-        :compact=${compact}
-        :options="[
+        <MPagination
+          id="pagination-id"
+          :model-value="1"
+          :compact=${compact}
+          :options="[
           { text: 'Page 1 of 99', value: 1 },
           { text: 'Page 2 of 99', value: 2 },
           { text: 'Page 99 of 99', value: 99 },
         ]"
-        select-label="Select page"
-        aria-label="pagination"
-      ></MPagination>`,
+          select-label="Select page"
+          aria-label="pagination"
+        ></MPagination>`,
   },
 );

package/src/components/passwordinput/MPasswordInput.figma.ts

@@ -16,15 +16,15 @@ figma.connect(
     },
     example: ({ isInvalid, isClearable }) =>
       html`<script setup>
-        import { MPasswordInput } from '@mozaic-ds/vue';
-      </script>
+          import { MPasswordInput } from '@mozaic-ds/vue';
+        </script>
 
-      <MPasswordInput
-        id="password-input-id"
-        :is-invalid=${isInvalid}
-        :is-clearable=${isClearable}
-        placeholder="Enter your password"
-        model-value=""
-      ></MPasswordInput>`,
+        <MPasswordInput
+          id="password-input-id"
+          :is-invalid=${isInvalid}
+          :is-clearable=${isClearable}
+          placeholder="Enter your password"
+          model-value=""
+        ></MPasswordInput>`,
   },
 );

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

@@ -33,15 +33,15 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MPhoneNumber } from '@mozaic-ds/vue';
-      </script>
+          import { MPhoneNumber } from '@mozaic-ds/vue';
+        </script>
 
-      <MPhoneNumber
-        id="phone-number-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-      ></MPhoneNumber>`,
+        <MPhoneNumber
+          id="phone-number-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+        ></MPhoneNumber>`,
   },
 );

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,31 @@
       class="mc-phone-number-input__select-wrapper"
       :class="selectWrapperClass"
     >
-      <select
-        id="selectComponentId"
-        v-model="selectedCountry"
-        name="selectComponentName"
+      <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">

package/src/components/pincode/MPincode.figma.ts

@@ -27,15 +27,15 @@ figma.connect(
     },
     example: ({ disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MPincode } from '@mozaic-ds/vue';
-      </script>
+          import { MPincode } from '@mozaic-ds/vue';
+        </script>
 
-      <MPincode
-        id="pincode-id"
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        aria-label="Enter your code"
-      ></MPincode>`,
+        <MPincode
+          id="pincode-id"
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          aria-label="Enter your code"
+        ></MPincode>`,
   },
 );

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

@@ -22,21 +22,21 @@ figma.connect(
     },
     example: ({ appearance, size, pointer, closable }) =>
       html`<script setup>
-        import { MPopover, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MPopover, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MPopover
-        id="popover-id"
-        title="Popover title"
-        description="Popover description"
-        :pointer=${pointer}
-        :closable=${closable}
-        appearance=${appearance}
-        size=${size}
-      >
-        <template #activator="{ id }">
-          <MButton :popovertarget="id">Open</MButton>
-        </template>
-      </MPopover>`,
+        <MPopover
+          id="popover-id"
+          title="Popover title"
+          description="Popover description"
+          :pointer=${pointer}
+          :closable=${closable}
+          appearance=${appearance}
+          size=${size}
+        >
+          <template #activator="{ id }">
+            <MButton :popovertarget="id">Open</MButton>
+          </template>
+        </MPopover>`,
   },
 );