@mozaic-ds/vue 2.18.0 → 2.19.1

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

@@ -20,11 +20,15 @@ figma.connect(
     },
     example: ({ label, requirementText }) =>
       html`<script setup>
-        import { MField, MTextInput } from '@mozaic-ds/vue';
-      </script>
+          import { MField, MTextInput } from '@mozaic-ds/vue';
+        </script>
 
-      <MField id="field-id" label=${label} requirement-text=${requirementText}>
-        <MTextInput id="field-id" placeholder="Placeholder"></MTextInput>
-      </MField>`,
+        <MField
+          id="field-id"
+          label=${label}
+          requirement-text=${requirementText}
+        >
+          <MTextInput id="field-id" placeholder="Placeholder"></MTextInput>
+        </MField>`,
   },
 );

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

@@ -15,9 +15,9 @@ figma.connect(
     },
     example: ({ hasDragDrop }) =>
       html`<script setup>
-        import { MFileUploader } from '@mozaic-ds/vue';
-      </script>
+          import { MFileUploader } from '@mozaic-ds/vue';
+        </script>
 
-      <MFileUploader :model-value="[]" :has-drag-drop=${hasDragDrop} />`,
+        <MFileUploader :model-value="[]" :has-drag-drop=${hasDragDrop} />`,
   },
 );

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

@@ -19,9 +19,13 @@ figma.connect(
     },
     example: ({ format, valid }) =>
       html`<script setup>
-        import { MFileUploaderItem } from '@mozaic-ds/vue';
-      </script>
+          import { MFileUploaderItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MFileUploaderItem :file="{ name: 'document.pdf' }" format=${format} :valid=${valid} />`,
+        <MFileUploaderItem
+          :file="{ name: 'document.pdf' }"
+          format=${format}
+          :valid=${valid}
+        />`,
   },
 );

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/flag/MFlag.figma.ts

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

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

@@ -33,22 +33,22 @@ figma.connect(
     },
     example: ({ appearance, size, disabled, isLoading, outlined, ghost }) =>
       html`<script setup>
-        import { MIconButton } from '@mozaic-ds/vue';
-        import { ChevronRight24 } from '@mozaic-ds/icons-vue';
-      </script>
+          import { MIconButton } from '@mozaic-ds/vue';
+          import { ChevronRight24 } from '@mozaic-ds/icons-vue';
+        </script>
 
-      <MIconButton
-        appearance=${appearance}
-        size=${size}
-        disabled=${disabled}
-        :is-loading=${isLoading}
-        outlined=${outlined}
-        ghost=${ghost}
-        aria-label="Action"
-      >
-        <template #icon>
-          <ChevronRight24 />
-        </template>
-      </MIconButton>`,
+        <MIconButton
+          appearance=${appearance}
+          size=${size}
+          disabled=${disabled}
+          :is-loading=${isLoading}
+          outlined=${outlined}
+          ghost=${ghost}
+          aria-label="Action"
+        >
+          <template #icon>
+            <ChevronRight24 />
+          </template>
+        </MIconButton>`,
   },
 );

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

@@ -25,9 +25,14 @@ figma.connect(
     },
     example: ({ value, label, size, status }) =>
       html`<script setup>
-        import { MKpiItem } from '@mozaic-ds/vue';
-      </script>
+          import { MKpiItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MKpiItem value=${value} label=${label} size=${size} status=${status} />`,
+        <MKpiItem
+          value=${value}
+          label=${label}
+          size=${size}
+          status=${status}
+        />`,
   },
 );

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

@@ -67,5 +67,17 @@ 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,13 @@
           {{ 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>

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.figma.ts

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

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.figma.ts

@@ -18,9 +18,11 @@ figma.connect(
     },
     example: ({ value }) =>
       html`<script setup>
-        import { MLinearProgressbarPercentage } from '@mozaic-ds/vue';
-      </script>
+          import { MLinearProgressbarPercentage } from '@mozaic-ds/vue';
+        </script>
 
-      <MLinearProgressbarPercentage :value=${value}></MLinearProgressbarPercentage>`,
+        <MLinearProgressbarPercentage
+          :value=${value}
+        ></MLinearProgressbarPercentage>`,
   },
 );

package/src/components/link/MLink.figma.ts

@@ -22,11 +22,11 @@ figma.connect(
     },
     example: ({ label, size, appearance }) =>
       html`<script setup>
-        import { MLink } from '@mozaic-ds/vue';
-      </script>
+          import { MLink } from '@mozaic-ds/vue';
+        </script>
 
-      <MLink href="#" size=${size} appearance=${appearance}>
-        ${label}
-      </MLink>`,
+        <MLink href="#" size=${size} appearance=${appearance}>
+          ${label}
+        </MLink>`,
   },
 );

package/src/components/loader/MLoader.figma.ts

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

package/src/components/loadingoverlay/MLoadingOverlay.figma.ts

@@ -10,9 +10,9 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MLoadingOverlay } from '@mozaic-ds/vue';
-      </script>
+          import { MLoadingOverlay } from '@mozaic-ds/vue';
+        </script>
 
-      <MLoadingOverlay is-visible text="Loading..."></MLoadingOverlay>`,
+        <MLoadingOverlay is-visible text="Loading..."></MLoadingOverlay>`,
   },
 );

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

@@ -10,18 +10,18 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MModal, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MModal, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MModal
-        open
-        title="Modal title"
-        description="A modal is a dialog window allowing you to focus the user's attention."
-        closable
-      >
-        <template #footer>
-          <MButton>Confirm</MButton>
-        </template>
-      </MModal>`,
+        <MModal
+          open
+          title="Modal title"
+          description="A modal is a dialog window allowing you to focus the user's attention."
+          closable
+        >
+          <template #footer>
+            <MButton>Confirm</MButton>
+          </template>
+        </MModal>`,
   },
 );