aloha-vue 1.2.4 → 1.2.5

package/docs/src/views/PageWizard/PageWizard.js

@@ -7,6 +7,7 @@ import PageWizardButtons from "./PageWizardButtons/PageWizardButtons.vue";
 import PageWizardButtonsDisabled from "./PageWizardButtonsDisabled/PageWizardButtonsDisabled.vue";
 import PageWizardButtonsHide from "./PageWizardButtonsHide/PageWizardButtonsHide.vue";
 import PageWizardDemo from "./PageWizardDemo/PageWizardDemo.vue";
+import PageWizardHasFocusJump from "./PageWizardHasFocusJump/PageWizardHasFocusJump.vue";
 import PageWizardIsButtonsLoading from "./PageWizardIsButtonsLoading/PageWizardIsButtonsLoading.vue";
 import PageWizardIsControlOutside from "./PageWizardIsControlOutside/PageWizardIsControlOutside.vue";
 import PageWizardIsStepNumberVisible from "./PageWizardIsStepNumberVisible/PageWizardIsStepNumberVisible.vue";
@@ -40,6 +41,7 @@ export default {
     PageWizardButtonsDisabled,
     PageWizardButtonsHide,
     PageWizardDemo,
+    PageWizardHasFocusJump,
     PageWizardIsButtonsLoading,
     PageWizardIsControlOutside,
     PageWizardIsStepNumberVisible,

package/docs/src/views/PageWizard/PageWizard.pug

@@ -35,6 +35,8 @@ aloha-page(
 
     page-wizard-key-id
 
+    page-wizard-has-focus-jump
+
     page-wizard-is-control-outside
 
     page-wizard-slot-toolbar

package/docs/src/views/PageWizard/PageWizardHasFocusJump/PageWizardHasFocusJump.js

@@ -0,0 +1,66 @@
+import {
+  ref,
+} from "vue";
+
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import ASwitch from "../../../../../src/ui/ASwitch/ASwitch";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import AWizard from "../../../../../src/AWizard/AWizard";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageWizardHasFocusJump",
+  components: {
+    AlohaExample,
+    ASwitch,
+    ATranslation,
+    AWizard,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const hasFocusJump = ref(false);
+    const wizardSteps = [
+      {
+        slot: "step1",
+        label: "_A_WIZARD_STEP_1_",
+        title: "_A_WIZARD_STEP_1_",
+      },
+      {
+        slot: "step2",
+        label: "_A_WIZARD_STEP_2_",
+        title: "_A_WIZARD_STEP_2_",
+      },
+      {
+        slot: "step3",
+        label: "_A_WIZARD_STEP_3_",
+        title: "_A_WIZARD_STEP_3_",
+      },
+      {
+        slot: "step4",
+        label: "_A_WIZARD_STEP_4_",
+        title: "_A_WIZARD_STEP_4_",
+      },
+    ];
+    const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent`;
+
+    return {
+      codeHtml,
+      codeJs,
+      hasFocusJump,
+      text,
+      wizardSteps,
+    };
+  },
+};

package/docs/src/views/PageWizard/PageWizardHasFocusJump/PageWizardHasFocusJump.pug

@@ -0,0 +1,52 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_WIZARD_GROUP_HAS_FOCUS_JUMP_HEADER_"
+  description="_A_WIZARD_GROUP_HAS_FOCUS_JUMP_DESCRIPTION_"
+  :props="['has-focus-jump']"
+)
+  .a_columns.a_columns_count_12
+    .a_column.a_column_6.a_columns_count_12_touch.a_mb_5
+      a-switch(
+        v-model="hasFocusJump"
+        label="has-focus-jump"
+      )
+  a-wizard(
+    :steps="wizardSteps"
+    :has-focus-jump="hasFocusJump"
+  )
+    template(
+      v-slot:step1
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_1_"
+      )
+      p {{ text }}
+
+    template(
+      v-slot:step2
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_2_"
+      )
+      p {{ text }}
+
+    template(
+      v-slot:step3
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_3_"
+      )
+      p {{ text }}
+
+    template(
+      v-slot:step4
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_4_"
+      )
+      p {{ text }}

package/docs/src/views/PageWizard/PageWizardHasFocusJump/PageWizardHasFocusJump.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageWizardHasFocusJump.pug"></template>
+<script src="./PageWizardHasFocusJump.js"></script>

package/docs/src/views/PageWizard/PageWizardHasFocusJump/compositionAPI/HtmlAPI.js

@@ -0,0 +1,59 @@
+export default function HtmlAPI() {
+  const codeHtml = `<div
+  class="a_columns a_columns_count_12"
+>
+  <div
+    class="a_column.a_column_6 a_columns_count_12_touch a_mb_5"
+  >
+    <a-switch
+      v-model="hasFocusJump"
+      label="has-focus-jump"
+    ></a-switch>
+  </div>
+</div>
+<a-wizard
+  :steps="wizardSteps"
+  :has-focus-jump="hasFocusJump"
+>
+  <template
+    v-slot:step1
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_1_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+  <template
+    v-slot:step2
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_2_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+  <template
+    v-slot:step3
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_3_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+  <template
+    v-slot:step4
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_4_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+</a-wizard>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageWizard/PageWizardHasFocusJump/compositionAPI/JsAPI.js

@@ -0,0 +1,57 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ASwitch from "aloha-vue/src/ui/ASwitch/ASwitch";
+import ATranslation from "aloha-vue/src/ATranslation/ATranslation";
+import AWizard from "aloha-vue/src/AWizard/AWizard";
+    
+export default {
+  name: "PageWizardHasFocusJump",
+  components: {
+    ASwitch,
+    ATranslation,
+    AWizard,
+  },
+  setup() {
+    const hasFocusJump = ref(false);
+    const wizardSteps = [
+      {
+        slot: "step1",
+        label: "_A_MODAL_WIZARD_STEP_1_",
+        title: "_A_MODAL_WIZARD_STEP_1_",
+      },
+      {
+        slot: "step2",
+        label: "_A_MODAL_WIZARD_STEP_2_",
+        title: "_A_MODAL_WIZARD_STEP_2_",
+      },
+      {
+        slot: "step3",
+        label: "_A_MODAL_WIZARD_STEP_3_",
+        title: "_A_MODAL_WIZARD_STEP_3_",
+      },
+      {
+        slot: "step4",
+        label: "_A_MODAL_WIZARD_STEP_4_",
+        title: "_A_MODAL_WIZARD_STEP_4_",
+      },
+    ];
+    const text = \`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent\`;
+
+    return {
+      hasFocusJump,
+      text,
+      wizardSteps,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageWizard/compositionAPI/PropsAPI.js

@@ -91,6 +91,20 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "has-focus-jump",
+      description: "_A_WIZARD_PROPS_HAS_FOCUS_JUMP_DESCRIPTION_",
+      type: "Boolean",
+      default: true,
+      required: false,
+    },
+    {
+      name: "id",
+      description: "_A_WIZARD_PROPS_ID_DESCRIPTION_",
+      type: "String",
+      default: "() => uniqueId(\"a_wizard_\")",
+      required: false,
+    },
     {
       name: "is-back-button-disabled",
       description: "_A_WIZARD_PROPS_IS_BACK_BUTTON_DISABLED_DESCRIPTION_",

package/docs/src/views/PageWizard/compositionAPI/TranslateAPI.js

@@ -1,5 +1,6 @@
 export default function TranslateAPI() {
   const dataTranslate = [
+    "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
     "_A_WIZARD_NEXT_",
     "_A_WIZARD_PREVIOUS_",
     "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_",

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AWizard/AWizard.js

@@ -14,6 +14,10 @@ import LocalAPI from "./compositionAPI/LocalAPI";
 import StepsAPI from "./compositionAPI/StepsAPI";
 import TeleportAPI from "./compositionAPI/TeleportAPI";
 
+import {
+  uniqueId,
+} from "lodash-es";
+
 export default {
   name: "AWizard",
   props: {
@@ -82,6 +86,16 @@ export default {
       required: false,
       default: undefined,
     },
+    hasFocusJump: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId("a_wizard_"),
+    },
     isBackButtonDisabled: {
       type: Boolean,
       required: false,
@@ -193,13 +207,20 @@ export default {
       classWizard,
     } = ClassAPI(props);
 
+    const {
+      setFocusToActiveStep,
+      wizardTabsRef,
+    } = FocusAPI(props);
+
     const {
       initStepActive,
       stepActiveComputed,
       stepActiveLocal,
       stepsVisitedComputed,
       stepsVisitedLocal,
-    } = LocalAPI(props);
+    } = LocalAPI(props, {
+      setFocusToActiveStep,
+    });
 
     const {
       goOneStepBack,
@@ -211,12 +232,6 @@ export default {
       stepsVisitedLocal,
     });
 
-    const {
-      tabContentRef,
-    } = FocusAPI({
-      stepActiveComputed,
-    });
-
     const {
       stepActiveNumber,
       stepsCount,
@@ -242,9 +257,9 @@ export default {
       stepsCount,
       stepsProgressbarTextTranslated,
       stepsVisitedComputed,
-      tabContentRef,
       toolbarBottomTeleportSelector,
       useTeleportToolbarBottom,
+      wizardTabsRef,
     };
   },
   render() {
@@ -276,7 +291,9 @@ export default {
     }, this.$slots);
 
     return h("div", {
+      id: this.id,
       class: this.classWizard,
+      role: "application",
     }, [
       h("ul", {
         class: "a_wizard__steps",
@@ -290,6 +307,7 @@ export default {
         this.steps.map((step, stepIndex) => {
           return h(AWizardStep, {
             key: this.keyId ? step[this.keyId] : stepIndex,
+            id: this.id,
             step,
             stepIndex,
             stepActiveComputed: this.stepActiveComputed,
@@ -305,12 +323,13 @@ export default {
       ]),
       this.isToolbarTop && TOOLBAR,
       h("div", {
-        ref: "tabContentRef",
         class: "a_wizard__tab_content",
-        tabindex: -1,
       }, [
         this.steps.map((step, stepIndex) => {
           return h(AWizardTab, {
+            key: this.keyId ? step[this.keyId] : stepIndex,
+            id: this.id,
+            extra: this.extra,
             step,
             stepIndex,
             stepActiveComputed: this.stepActiveComputed,

package/src/AWizard/AWizardStep/AWizardStep.js

@@ -6,6 +6,7 @@ import ATranslation from "../../ATranslation/ATranslation";
 
 import ActiveAPI from "./compositionAPI/ActiveAPI";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
+import ContentIdAPI from "../AWizardTab/compositionAPI/ContentIdAPI";
 import DisabledAPI from "./compositionAPI/DisabledAPI";
 import EventsAPI from "./compositionAPI/EventsAPI";
 import LinkClassAPI from "./compositionAPI/LinkClassAPI";
@@ -14,43 +15,47 @@ import NumberAPI from "./compositionAPI/NumberAPI";
 export default {
   name: "AWizardStep",
   props: {
-    step: {
+    extra: {
       type: Object,
       required: true,
     },
-    stepIndex: {
-      type: Number,
+    id: {
+      type: String,
       required: true,
     },
-    stepActiveComputed: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    isStepNumberVisible: {
+    isBackButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isForwardStepButtonDisabled: {
+    isBackStepButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isBackStepButtonDisabled: {
+    isForwardButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isForwardButtonDisabled: {
+    isForwardStepButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isBackButtonDisabled: {
+    isStepNumberVisible: {
       type: Boolean,
       required: true,
     },
-    extra: {
+    step: {
       type: Object,
       required: true,
     },
+    stepActiveComputed: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    stepIndex: {
+      type: Number,
+      required: true,
+    },
   },
   emits: [
     "onStepClick",
@@ -91,8 +96,13 @@ export default {
       isStepActive,
     });
 
+    const {
+      contentId,
+    } = ContentIdAPI(props);
+
     return {
       ariaCurrentAttributes,
+      contentId,
       isStepActive,
       isStepDisabled,
       linkClass,
@@ -108,6 +118,7 @@ export default {
       "li",
       {
         class: "a_wizard__step",
+        role: "presentation",
       },
       [
         h("a", {
@@ -115,6 +126,7 @@ export default {
           role: "button",
           tabindex: this.tabindex,
           ariaDisabled: this.isStepDisabled,
+          "aria-controls": this.contentId,
           onClick: this.onClick,
           onKeydown: this.onKeydown,
           ...this.ariaCurrentAttributes,

package/src/AWizard/AWizardTab/AWizardTab.js

@@ -2,12 +2,24 @@ import {
   h,
 } from "vue";
 
+import ATranslation from "../../ATranslation/ATranslation";
+
 import ActiveAPI from "./compositionAPI/ActiveAPI";
+import FocusIdAPI from "./compositionAPI/FocusIdAPI";
 import VisibilityAPI from "./compositionAPI/VisibilityAPI";
+import ContentIdAPI from "./compositionAPI/ContentIdAPI";
 
 export default {
   name: "AWizardTab",
   props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    extra: {
+      type: Object,
+      required: true,
+    },
     step: {
       type: Object,
       required: true,
@@ -39,20 +51,54 @@ export default {
       isStepActive,
     });
 
+    const {
+      focusId,
+    } = FocusIdAPI(props);
+
+    const {
+      contentId,
+    } = ContentIdAPI(props);
+
     return {
+      contentId,
+      focusId,
       isStepRender,
       styleStep,
     };
   },
   render() {
-    return this.isStepRender && h("div", {
-      class: "a_wizard__tab_pane",
-      style: this.styleStep,
+    return h("div", {
+      id: this.contentId,
     }, [
-      this.$slots[this.step.slot] && this.$slots[this.step.slot]({
-        step: this.step,
-        stepIndex: this.stepIndex,
-      }),
+      this.isStepRender && h("div", {
+        class: "a_wizard__tab_pane",
+        style: this.styleStep,
+      }, [
+        h("div", {
+          id: this.focusId,
+          class: "a_sr_only",
+          tabindex: "-1",
+        }, [
+          h(ATranslation, {
+            tag: "span",
+            text: "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
+            extra: {
+              stepNumber: this.stepIndex + 1,
+            },
+          }),
+          (!this.step.slotLabel || this.$slots[this.step.slotLabel]) &&
+          h(ATranslation, {
+            tag: "span",
+            html: this.step.label,
+            class: "a_wizard__step__text",
+            extra: this.extra,
+          }),
+        ]),
+        this.$slots[this.step.slot] && this.$slots[this.step.slot]({
+          step: this.step,
+          stepIndex: this.stepIndex,
+        }),
+      ]),
     ]);
   },
 };

package/src/AWizard/AWizardTab/compositionAPI/ContentIdAPI.js

@@ -0,0 +1,17 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ContentIdAPI(props) {
+  const id = toRef(props, "id");
+  const stepIndex = toRef(props, "stepIndex");
+
+  const contentId = computed(() => {
+    return `${ id.value }_${ stepIndex.value }_content`;
+  });
+
+  return {
+    contentId,
+  };
+}

package/src/AWizard/AWizardTab/compositionAPI/FocusIdAPI.js

@@ -0,0 +1,17 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function FocusIdAPI(props) {
+  const id = toRef(props, "id");
+  const stepIndex = toRef(props, "stepIndex");
+
+  const focusId = computed(() => {
+    return `${ id.value }_${ stepIndex.value }_focus`;
+  });
+
+  return {
+    focusId,
+  };
+}

package/src/AWizard/compositionAPI/FocusAPI.js

@@ -1,20 +1,31 @@
 import {
   ref,
-  watch,
+  toRef,
 } from "vue";
 
-export default function FocusAPI({
-  stepActiveComputed,
-}) {
-  const tabContentRef = ref(undefined);
+import {
+  setFocusToElement,
+} from "../../utils/utilsDOM";
+
+export default function FocusAPI(props) {
+  const hasFocusJump = toRef(props, "hasFocusJump");
+  const id = toRef(props, "id");
 
-  watch(stepActiveComputed, () => {
-    setTimeout(() => {
-      tabContentRef.value && tabContentRef.value.focus();
-    });
-  });
+  const wizardTabsRef = ref([]);
+
+  const setFocusToActiveStep = ({ stepActive }) => {
+    if (hasFocusJump.value) {
+      setTimeout(() => {
+        const FOCUS_ID_SELECTOR = `#${ id.value }_${ stepActive }_focus`;
+        setFocusToElement({
+          selector: FOCUS_ID_SELECTOR,
+        });
+      });
+    }
+  };
 
   return {
-    tabContentRef,
+    setFocusToActiveStep,
+    wizardTabsRef,
   };
 }

package/src/AWizard/compositionAPI/LocalAPI.js

@@ -2,17 +2,21 @@ import {
   computed,
   ref,
   toRef,
+  watch,
 } from "vue";
 
 import {
   isNil,
 } from "lodash-es";
 
-export default function LocalAPI(props) {
+export default function LocalAPI(props, {
+  setFocusToActiveStep = () => {},
+}) {
   const stepActive = toRef(props, "stepActive");
   const stepsVisited = toRef(props, "stepsVisited");
   const isControlOutside = toRef(props, "isControlOutside");
 
+  const isWatchActive = ref(false);
   const stepActiveLocal = ref(0);
   const stepsVisitedLocal = ref({
     0: true,
@@ -27,17 +31,25 @@ export default function LocalAPI(props) {
   });
 
   const initStepActive = () => {
-    if (isControlOutside.value) {
-      return;
-    }
-    if (!isNil(stepActive.value)) {
-      stepActiveLocal.value = stepActive.value;
-      stepsVisitedLocal.value = {
-        [stepActive.value]: true,
-      };
+    if (!isControlOutside.value) {
+      if (!isNil(stepActive.value)) {
+        stepActiveLocal.value = stepActive.value;
+        stepsVisitedLocal.value = {
+          [stepActive.value]: true,
+        };
+      }
     }
+    setTimeout(() => {
+      isWatchActive.value = true;
+    });
   };
 
+  watch(stepActiveComputed, newValue => {
+    if (isWatchActive.value) {
+      setFocusToActiveStep({ stepActive: newValue });
+    }
+  });
+
   return {
     initStepActive,
     stepActiveComputed,

package/src/AWizard/i18n/ar.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "التالي",
   "_A_WIZARD_PREVIOUS_": "سابق",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "{{ stepActiveLabel }}: {{ stepsCount }} من {{ stepActive }} خطوة"

package/src/AWizard/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "Schritt {{ stepNumber }}:",
   "_A_WIZARD_NEXT_": "Nächste",
   "_A_WIZARD_PREVIOUS_": "Vorherige",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Schritt {{ stepActive }} von {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "Step {{ stepNumber }}:",
   "_A_WIZARD_NEXT_": "Next",
   "_A_WIZARD_PREVIOUS_": "Previous",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Step {{ stepActive }} of {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/es.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Próximo",
   "_A_WIZARD_PREVIOUS_": "Previo",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "escenario {{ stepActive }} de {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/fr.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Suivant",
   "_A_WIZARD_PREVIOUS_": "Précédent",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Etape {{ stepActive }} de {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/hr.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Dalje",
   "_A_WIZARD_PREVIOUS_": "Natrag",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Korak {{ stepActive }} od {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/it.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Prossimo",
   "_A_WIZARD_PREVIOUS_": "Precedente",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "palcoscenico {{ stepActive }} Di {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/ru.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "Шаг {{ stepNumber }}:",
   "_A_WIZARD_NEXT_": "Следующий",
   "_A_WIZARD_PREVIOUS_": "Предыдущий",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Шаг {{ stepActive }} из {{ stepsCount }}: {{ stepActiveLabel }}"