aefis-core-ui 2.1.12 → 2.1.13

package/dist/index.modern.js

@@ -14542,7 +14542,7 @@ const QontoStepIcon = props => {
   } = props;
   return /*#__PURE__*/jsx(QontoStepIconRoot, {
     ownerstate: {
-      active
+      active: active
     },
     className: props.className,
     children: props.completed ? /*#__PURE__*/jsx(CheckCircle, {
@@ -14563,18 +14563,36 @@ QontoStepIcon.propTypes = {
   completed: PropTypes.bool
 };
 const Header = props => {
-  const activeStep = props.allStepsCompleted ? props.data.length : props.activeStep;
-  return /*#__PURE__*/jsx(Stepper, {
-    activeStep: activeStep,
+  const currentActiveStep = props.allStepsCompleted ? props.data.length : props.activeStep;
+  const a11yProps = {
+    role: "list",
+    "aria-label": "progress"
+  };
+  const stepA11lyProps = (current, activeStep) => {
+    const a11y = {};
+    if (current === activeStep) {
+      a11y["aria-current"] = "step";
+    }
+    return a11y;
+  };
+  return /*#__PURE__*/jsx(Stepper, _extends({
+    component: "ol"
+  }, a11yProps, {
+    activeStep: currentActiveStep,
     alternativeLabel: true,
     connector: /*#__PURE__*/jsx(QontoConnector, {}),
-    children: props.data.map(step => /*#__PURE__*/jsx(Step, {
-      children: /*#__PURE__*/jsx(StepLabel, {
-        StepIconComponent: QontoStepIcon,
-        children: step.title
-      })
-    }, `wizardHeaderStep-${step.id}`))
-  });
+    sx: {
+      listStyle: "none"
+    },
+    children: props.data.map((step, index) => /*#__PURE__*/createElement(Step, _extends({}, stepA11lyProps(index, currentActiveStep), {
+      ariaCurrent: true,
+      component: "li",
+      key: `wizardHeaderStep-${step.id}`
+    }), /*#__PURE__*/jsx(StepLabel, {
+      StepIconComponent: QontoStepIcon,
+      children: step.title
+    })))
+  }));
 };
 Header.defaultProps = {
   allStepsCompleted: false