@mozaic-ds/vue 2.18.0 → 2.19.0

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>

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/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">

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.spec.ts

@@ -131,6 +131,18 @@ describe('MSidebarExpandableItem', () => {
     expect(onListboxKeydown).toHaveBeenCalled();
   });
 
+  it('collapsed trigger button has aria-label equal to label prop', () => {
+    const wrapper = mount(MSidebarExpandableItem, {
+      props: { label: 'Products', menuLabel: 'Products menu' },
+      global: {
+        provide: { [EXPANDED_SIDEBAR_KEY]: false },
+      },
+    });
+
+    const button = wrapper.find('button.mc-sidebar__trigger');
+    expect(button.attributes('aria-label')).toBe('Products');
+  });
+
   it('calls hideFloatingItem on mouseleave and blur on the listbox', async () => {
     const wrapper = mount(MSidebarExpandableItem, {
       props: { label: 'Item', menuLabel: 'Menu' },