@mozaic-ds/vue 2.18.0 → 2.19.1

package/src/components/quantityselector/MQuantitySelector.figma.ts

@@ -33,18 +33,18 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MQuantitySelector } from '@mozaic-ds/vue';
-      </script>
+          import { MQuantitySelector } from '@mozaic-ds/vue';
+        </script>
 
-      <MQuantitySelector
-        id="quantity-selector-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        :model-value="1"
-        :min="0"
-        :max="10"
-      ></MQuantitySelector>`,
+        <MQuantitySelector
+          id="quantity-selector-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          :model-value="1"
+          :min="0"
+          :max="10"
+        ></MQuantitySelector>`,
   },
 );

package/src/components/radio/MRadio.figma.ts

@@ -26,15 +26,15 @@ figma.connect(
     },
     example: ({ modelValue, disabled, isInvalid }) =>
       html`<script setup>
-        import { MRadio } from '@mozaic-ds/vue';
-      </script>
+          import { MRadio } from '@mozaic-ds/vue';
+        </script>
 
-      <MRadio
-        id="radio-id"
-        label="Radio button Label"
-        :model-value=${modelValue}
-        disabled=${disabled}
-        :is-invalid=${isInvalid}
-      ></MRadio>`,
+        <MRadio
+          id="radio-id"
+          label="Radio button Label"
+          :model-value=${modelValue}
+          disabled=${disabled}
+          :is-invalid=${isInvalid}
+        ></MRadio>`,
   },
 );

package/src/components/radiogroup/MRadioGroup.figma.ts

@@ -15,16 +15,16 @@ figma.connect(
     },
     example: ({ inline }) =>
       html`<script setup>
-        import { MRadioGroup } from '@mozaic-ds/vue';
-      </script>
+          import { MRadioGroup } from '@mozaic-ds/vue';
+        </script>
 
-      <MRadioGroup
-        name="group"
-        :options="[
+        <MRadioGroup
+          name="group"
+          :options="[
           { id: '1', label: 'Option 1', value: '1' },
           { id: '2', label: 'Option 2', value: '2' },
         ]"
-        inline=${inline}
-      />`,
+          inline=${inline}
+        />`,
   },
 );

package/src/components/segmentedcontrol/MSegmentedControl.figma.ts

@@ -20,14 +20,14 @@ figma.connect(
     },
     example: ({ size, full }) =>
       html`<script setup>
-        import { MSegmentedControl } from '@mozaic-ds/vue';
-      </script>
+          import { MSegmentedControl } from '@mozaic-ds/vue';
+        </script>
 
-      <MSegmentedControl
-        size=${size}
-        full=${full}
-        :segments="[{ id: 'label1', label: 'Label' }, { id: 'label2', label: 'Label' }]"
-        model-value="label1"
-      ></MSegmentedControl>`,
+        <MSegmentedControl
+          size=${size}
+          full=${full}
+          :segments="[{ id: 'label1', label: 'Label' }, { id: 'label2', label: 'Label' }]"
+          model-value="label1"
+        ></MSegmentedControl>`,
   },
 );

package/src/components/select/MSelect.figma.ts

@@ -33,17 +33,17 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MSelect } from '@mozaic-ds/vue';
-      </script>
+          import { MSelect } from '@mozaic-ds/vue';
+        </script>
 
-      <MSelect
-        id="select-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        placeholder="Choose an option"
-        :options="[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]"
-      ></MSelect>`,
+        <MSelect
+          id="select-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          placeholder="Choose an option"
+          :options="[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]"
+        ></MSelect>`,
   },
 );

package/src/components/sidebar/MSidebar.figma.ts

@@ -15,14 +15,14 @@ figma.connect(
     },
     example: ({ modelValue }) =>
       html`<script setup>
-        import { MSidebar } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebar } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebar :model-value=${modelValue}>
-        <template #header>Header</template>
-        <template #shortcuts>Shortcuts</template>
-        <template #nav>Nav items</template>
-        <template #footer>Footer</template>
-      </MSidebar>`,
+        <MSidebar :model-value=${modelValue}>
+          <template #header>Header</template>
+          <template #shortcuts>Shortcuts</template>
+          <template #nav>Nav items</template>
+          <template #footer>Footer</template>
+        </MSidebar>`,
   },
 );

package/src/components/sidebar/MSidebar.vue

@@ -28,6 +28,7 @@
     <MIconButton
       class="mc-sidebar__close-button"
       ghost
+      appearance="inverse"
       aria-label="Sidebar close button"
       @click="emit('close')"
     >

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

@@ -9,11 +9,14 @@ figma.connect(
   {
     example: () =>
       html`<script setup>
-        import { MSidebarExpandableItem, MSidebarNavItem } from '@mozaic-ds/vue';
-      </script>
+          import {
+            MSidebarExpandableItem,
+            MSidebarNavItem,
+          } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarExpandableItem label="Section" menu-label="Section">
-        <MSidebarNavItem label="Sub item" />
-      </MSidebarExpandableItem>`,
+        <MSidebarExpandableItem label="Section" menu-label="Section">
+          <MSidebarNavItem label="Sub item" />
+        </MSidebarExpandableItem>`,
   },
 );

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' },

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue

@@ -24,6 +24,7 @@
       aria-haspopup="listbox"
       :aria-expanded="floatingItemIsDisplayed"
       :aria-controls="`listbox-${id}`"
+      :aria-label="props.label"
       @mouseenter="showFloatingItem"
       @focus="showFloatingItem"
       @keydown="onTriggerKeydown"

package/src/components/sidebarfooter/MSidebarFooter.figma.ts

@@ -13,9 +13,13 @@ figma.connect(
     },
     example: ({ expendable }) =>
       html`<script setup>
-        import { MSidebarFooter } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarFooter } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarFooter title="User name" subtitle="user@example.com" :expendable=${expendable} />`,
+        <MSidebarFooter
+          title="User name"
+          subtitle="user@example.com"
+          :expendable=${expendable}
+        />`,
   },
 );

package/src/components/sidebarheader/MSidebarHeader.figma.ts

@@ -10,9 +10,9 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MSidebarHeader } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarHeader } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarHeader title="App name" logo="/logo.png" />`,
+        <MSidebarHeader title="App name" logo="/logo.png" />`,
   },
 );

package/src/components/sidebarnavitem/MSidebarNavItem.figma.ts

@@ -15,9 +15,9 @@ figma.connect(
     },
     example: ({ active }) =>
       html`<script setup>
-        import { MSidebarNavItem } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarNavItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarNavItem label="Menu item" active=${active} />`,
+        <MSidebarNavItem label="Menu item" active=${active} />`,
   },
 );

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.figma.ts

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

package/src/components/starrating/MStarRating.figma.ts

@@ -23,13 +23,13 @@ figma.connect(
     },
     example: ({ text, size }) =>
       html`<script setup>
-        import { MStarRating } from '@mozaic-ds/vue';
-      </script>
+          import { MStarRating } from '@mozaic-ds/vue';
+        </script>
 
-      <MStarRating
-        :model-value="3.5"
-        size=${size}
-        text=${text}
-      ></MStarRating>`,
+        <MStarRating
+          :model-value="3.5"
+          size=${size}
+          text=${text}
+        ></MStarRating>`,
   },
 );

package/src/components/statusbadge/MStatusBadge.figma.ts

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

package/src/components/statusdot/MStatusDot.figma.ts

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

package/src/components/statusmessage/MStatusMessage.figma.ts

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

package/src/components/statusnotification/MStatusNotification.figma.ts

@@ -17,13 +17,13 @@ figma.connect(
     },
     example: ({ status }) =>
       html`<script setup>
-        import { MStatusNotification } from '@mozaic-ds/vue';
-      </script>
+          import { MStatusNotification } from '@mozaic-ds/vue';
+        </script>
 
-      <MStatusNotification
-        title="Notification title"
-        description="Notification description"
-        status=${status}
-      ></MStatusNotification>`,
+        <MStatusNotification
+          title="Notification title"
+          description="Notification description"
+          status=${status}
+        ></MStatusNotification>`,
   },
 );

package/src/components/stepperbottombar/MStepperBottomBar.figma.ts

@@ -12,9 +12,9 @@ figma.connect(
     },
     example: ({ cancel }) =>
       html`<script setup>
-        import { MStepperBottomBar } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperBottomBar } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperBottomBar cancel=${cancel} :steps="3" />`,
+        <MStepperBottomBar cancel=${cancel} :steps="3" />`,
   },
 );

package/src/components/steppercompact/MStepperCompact.figma.ts

@@ -13,9 +13,14 @@ figma.connect(
     },
     example: ({ label, description }) =>
       html`<script setup>
-        import { MStepperCompact } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperCompact } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperCompact label=${label} :description=${description} :value="1" :max-steps="4"></MStepperCompact>`,
+        <MStepperCompact
+          label=${label}
+          :description=${description}
+          :value="1"
+          :max-steps="4"
+        ></MStepperCompact>`,
   },
 );

package/src/components/steppercompact/MStepperCompact.spec.ts

@@ -50,6 +50,15 @@ describe('MStepperCompact component', () => {
     expect(progressbar.props('contentValue')).toBe('3 / 7');
   });
 
+  it('passes a dynamic aria-label reflecting current step to MCircularProgressbar', () => {
+    const wrapper = mount(MStepperCompact, {
+      props: { label: 'Step', value: 2, maxSteps: 5 },
+    });
+
+    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });
+    expect(progressbar.attributes('aria-label')).toBe('Step 2 / 5');
+  });
+
   it('passes correct props to MCircularProgressbar', () => {
     const wrapper = mount(MStepperCompact, {
       props: {

package/src/components/steppercompact/MStepperCompact.vue

@@ -2,7 +2,7 @@
   <div class="mc-stepper-compact">
     <div class="mc-circular-progressbar mc-stepper-compact__progress">
       <MCircularProgressbar
-        aria-label="Progress bar"
+        :aria-label="`Step ${props.value} / ${props.maxSteps}`"
         type="content"
         size="m"
         :value="progressValue"

package/src/components/stepperinline/MStepperInline.figma.ts

@@ -15,9 +15,12 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MStepperInline } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperInline } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperInline :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperInline>`,
+        <MStepperInline
+          :current-step="1"
+          :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"
+        ></MStepperInline>`,
   },
 );

package/src/components/stepperinline/MStepperInline.spec.ts

@@ -9,6 +9,17 @@ describe('MStepperInline', () => {
     { id: '3', label: 'Step 3' },
   ];
 
+  it('sets aria-current="step" on the current step item', () => {
+    const wrapper = mount(MStepperInline, {
+      props: { currentStep: '2', steps: defaultSteps },
+    });
+
+    const items = wrapper.findAll('.mc-stepper-inline__item');
+    expect(items[1].attributes('aria-current')).toBe('step');
+    expect(items[0].attributes('aria-current')).toBeUndefined();
+    expect(items[2].attributes('aria-current')).toBeUndefined();
+  });
+
   it('renders correctly with default props', () => {
     const wrapper = mount(MStepperInline, {
       props: {

package/src/components/stepperinline/MStepperInline.stories.ts

@@ -46,7 +46,11 @@ export const AditionnalInfo: Story = {
         label: 'Delivery address',
         additionalInfo: 'Additional information',
       },
-      { id: 'step3', label: 'Payment', additionalInfo: 'Additional information' },
+      {
+        id: 'step3',
+        label: 'Payment',
+        additionalInfo: 'Additional information',
+      },
       {
         id: 'step4',
         label: 'Order confirmation',

package/src/components/stepperinline/MStepperInline.vue

@@ -7,11 +7,11 @@
         class="mc-stepper-inline__item"
         :class="{ 'is-completed': stepStates[i].completed }"
         :tabindex="stepStates[i].completed ? 0 : undefined"
+        :aria-current="stepStates[i].current ? 'step' : undefined"
       >
         <Check24
           class="mc-stepper-inline__icon mc-stepper-inline__icon--check"
           v-if="stepStates[i].completed"
-          aria-hidden="true"
         />
         <span
           v-else

package/src/components/stepperstacked/MStepperStacked.figma.ts

@@ -15,9 +15,12 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MStepperStacked } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperStacked } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperStacked :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperStacked>`,
+        <MStepperStacked
+          :current-step="1"
+          :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"
+        ></MStepperStacked>`,
   },
 );

package/src/components/stepperstacked/MStepperStacked.spec.ts

@@ -9,6 +9,19 @@ const defaultSteps = [
 ];
 
 describe('MStepperStacked', () => {
+  describe('Accessibility', () => {
+    it('sets aria-current="step" on the current step item', () => {
+      const wrapper = mount(MStepperStacked, {
+        props: { steps: defaultSteps, currentStep: '2' },
+      });
+
+      const items = wrapper.findAll('.mc-stepper-stacked__item');
+      expect(items[1].attributes('aria-current')).toBe('step');
+      expect(items[0].attributes('aria-current')).toBeUndefined();
+      expect(items[2].attributes('aria-current')).toBeUndefined();
+    });
+  });
+
   describe('Basic rendering', () => {
     it('renders as many li elements as there are steps', () => {
       const wrapper = mount(MStepperStacked, {

package/src/components/stepperstacked/MStepperStacked.vue

@@ -8,6 +8,7 @@
           'mc-stepper-stacked__item': true,
           'has-additional': step.additionalInfo,
         }"
+        :aria-current="stepStates[index].current ? 'step' : undefined"
       >
         <div class="mc-stepper-stacked__indicator">
           <Check24

package/src/components/tabs/MTabs.figma.ts

@@ -16,18 +16,18 @@ figma.connect(
     },
     example: ({ divider, centered }) =>
       html`<script setup>
-        import { MTabs } from '@mozaic-ds/vue';
-      </script>
+          import { MTabs } from '@mozaic-ds/vue';
+        </script>
 
-      <MTabs
-        :divider=${divider}
-        centered=${centered}
-        model-value="label1"
-        :tabs="[
+        <MTabs
+          :divider=${divider}
+          centered=${centered}
+          model-value="label1"
+          :tabs="[
           { id: 'label1', label: 'Label' },
           { id: 'label2', label: 'Label' },
           { id: 'label3', label: 'Label' },
         ]"
-      ></MTabs>`,
+        ></MTabs>`,
   },
 );

package/src/components/tag/MTag.figma.ts

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

package/src/components/textarea/MTextArea.figma.ts

@@ -15,14 +15,14 @@ figma.connect(
     },
     example: ({ isInvalid }) =>
       html`<script setup>
-        import { MTextArea } from '@mozaic-ds/vue';
-      </script>
+          import { MTextArea } from '@mozaic-ds/vue';
+        </script>
 
-      <MTextArea
-        id="textarea-id"
-        :is-invalid=${isInvalid}
-        placeholder="Placeholder"
-        model-value=""
-      ></MTextArea>`,
+        <MTextArea
+          id="textarea-id"
+          :is-invalid=${isInvalid}
+          placeholder="Placeholder"
+          model-value=""
+        ></MTextArea>`,
   },
 );

package/src/components/textinput/MTextInput.figma.ts

@@ -34,18 +34,18 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid, isClearable }) =>
       html`<script setup>
-        import { MTextInput } from '@mozaic-ds/vue';
-      </script>
+          import { MTextInput } from '@mozaic-ds/vue';
+        </script>
 
-      <MTextInput
-        id="text-input-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        :is-clearable=${isClearable}
-        placeholder="Placeholder"
-        model-value=""
-      ></MTextInput>`,
+        <MTextInput
+          id="text-input-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          :is-clearable=${isClearable}
+          placeholder="Placeholder"
+          model-value=""
+        ></MTextInput>`,
   },
 );