@mozaic-ds/vue 2.18.0 → 2.19.0

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/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.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.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.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/textinput/MTextInput.vue

@@ -35,7 +35,7 @@
           class="mc-controls-options__icon"
           aria-hidden="true"
         />
-        <span class="mc-controls-options__label">{clearLabel}</span>
+        <span class="mc-controls-options__label">{{ clearLabel }}</span>
       </button>
     </div>
   </div>
@@ -71,6 +71,7 @@ const props = withDefaults(
      */
     inputType?:
       | 'date'
+      | 'datetime-local'
       | 'email'
       | 'number'
       | 'password'
@@ -145,7 +146,6 @@ const emit = defineEmits<{
 }>();
 
 function focus() {
-  console.log(textInput.value);
   textInput.value?.focus();
 }
 

package/src/components/toggle/MToggle.vue

@@ -13,7 +13,7 @@
           emit('update:modelValue', ($event.target as HTMLInputElement).checked)
         "
       />
-      <span v-if="label" :for="id" class="mc-toggle__label">
+      <span v-if="label" class="mc-toggle__label">
         {{ label }}
       </span>
     </label>