aloha-vue 1.2.251 → 1.2.253

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

@@ -21,6 +21,13 @@ export default function PropsAPI() {
       default: `""`,
       required: false,
     },
+    {
+      name: "body-html-class",
+      description: "_A_MODAL_PROPS_BODY_HTML_CLASS_DESCRIPTION_",
+      type: "String / Array / Object",
+      default: undefined,
+      required: false,
+    },
     {
       name: "close",
       description: "_A_MODAL_PROPS_CLOSE_DESCRIPTION_",
@@ -56,6 +63,20 @@ export default function PropsAPI() {
       default: "_A_MODAL_BTN_CANCEL_",
       required: false,
     },
+    {
+      name: "close-button-text-screen-reader-footer",
+      description: "_A_MODAL_PROPS_CLOSE_BUTTON_TEXT_SCREEN_READER_FOOTER_DESCRIPTION_",
+      type: "String",
+      default: "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_",
+      required: false,
+    },
+    {
+      name: "close-button-text-screen-reader-header",
+      description: "_A_MODAL_PROPS_CLOSE_BUTTON_TEXT_SCREEN_READER_HEADER_DESCRIPTION_",
+      type: "String",
+      default: "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_",
+      required: false,
+    },
     {
       name: "disabled",
       description: "_A_MODAL_PROPS_DISABLED_DESCRIPTION_",
@@ -77,6 +98,13 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "focus-start-id",
+      description: "_A_MODAL_PROPS_FOCUS_START_ID_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
     {
       name: "header-tag",
       description: "_A_MODAL_PROPS_HEADER_TAG_DESCRIPTION_",
@@ -98,6 +126,13 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "hide-header",
+      description: "_A_MODAL_PROPS_HIDE_HEADER_DESCRIPTION_",
+      type: "Boolean",
+      default: undefined,
+      required: false,
+    },
     {
       name: "id",
       description: "_A_MODAL_PROPS_ID_DESCRIPTION_",
@@ -196,6 +231,13 @@ export default function PropsAPI() {
       default: "_A_MODAL_BTN_SAVE_",
       required: false,
     },
+    {
+      name: "save-button-text-screen-reader",
+      description: "_A_MODAL_PROPS_SAVE_BUTTON_TEXT_SCREEN_READER_DESCRIPTION_",
+      type: "String",
+      default: "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_",
+      required: false,
+    },
     {
       name: "selector-close",
       description: "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_",
@@ -211,8 +253,8 @@ export default function PropsAPI() {
       required: false,
     },
     {
-      name: "show-close-button",
-      description: "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_",
+      name: "show-close-button-header",
+      description: "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_",
       type: "Boolean",
       default: true,
       required: false,
@@ -238,6 +280,13 @@ export default function PropsAPI() {
       default: true,
       required: false,
     },
+    {
+      name: "use-focus-on-start",
+      description: "_A_MODAL_PROPS_USE_FOCUS_ON_START_DESCRIPTION_",
+      type: "Boolean",
+      default: true,
+      required: false,
+    },
     {
       name: "z-index",
       description: "_A_MODAL_PROPS_Z_INDEX_DESCRIPTION_",

package/docs/src/views/PageModal/i18n/ar.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "الوظيفة التي تمكن من الحفظ في العرض المودال.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "محدد التركيز لضمان عدم فقدان التركيز في المستعرض عند إغلاق العرض المودال.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "معرف أو معرفات للتركيز لضمان عدم فقدان التركيز في المستعرض عند إغلاق العرض المودال.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "يحدد ما إذا كان سيتم عرض زر الإغلاق (\"x\") في رأس نافذة المودال.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "يحدد ما إذا كان سيتم عرض زر الإغلاق (\"x\") في رأس نافذة المودال.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "حجم العرض المودال (صغير، كبير، كبير جداً، كبير جداً جداً، كامل الشاشة).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "يضيف حدث النقر مع stopPropagation إلى العنصر الأب لنافذة المودال لمنع الحدث من الانتشار.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "يُحدد ما إذا كان يمكن لمفتاح الإفلات (Escape) إغلاق العرض المودال.",

package/docs/src/views/PageModal/i18n/de.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "Die Funktion, die das Speichern im Modal ermöglicht.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "Der Fokus-Selektor, um sicherzustellen, dass der Fokus im Browser nicht verloren geht, wenn das Modal geschlossen wird.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "Die ID oder IDs für den Fokus, um sicherzustellen, dass der Fokus im Browser nicht verloren geht, wenn das Modal geschlossen wird.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Legt fest, ob die Schaltfläche zum Schließen (\"x\") im Kopfbereich des Modalfensters angezeigt werden soll.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Legt fest, ob die Schaltfläche zum Schließen (\"x\") im Kopfbereich des Modalfensters angezeigt werden soll.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "Die Größe des Modals (small, large, xl, xxl, fullscreen).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Fügt dem Elternelement des Modalfensters ein Klickereignis mit stopPropagation hinzu, um zu verhindern, dass das Ereignis weiter propagiert wird.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Legt fest, ob die Escape-Taste das Modal schließen kann.",

package/docs/src/views/PageModal/i18n/en.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "The function that enables saving in the modal.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "The focus selector to ensure that focus is not lost in the browser when the modal is closed.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "The ID or IDs for focus to ensure that focus is not lost in the browser when the modal is closed.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Determines whether to display the close button (\"x\") in the header of the modal window.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Determines whether to display the close button (\"x\") in the header of the modal window.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "The size of the modal (small, large, xl, xxl, fullscreen).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Adds a click event with stopPropagation to the modal window's parent element to prevent the event from propagating further.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Specifies whether the Escape key can close the modal.",

package/docs/src/views/PageModal/i18n/es.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "La función que permite guardar en la ventana modal.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "El selector de enfoque para asegurar que no se pierda el enfoque en el navegador al cerrar la ventana modal.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "El ID o IDs para el enfoque para asegurar que no se pierda el enfoque en el navegador al cerrar la ventana modal.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Determina si se debe mostrar el botón de cerrar (\"x\") en el encabezado de la ventana modal.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Determina si se debe mostrar el botón de cerrar (\"x\") en el encabezado de la ventana modal.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "El tamaño de la ventana modal (pequeño, grande, xl, xxl, pantalla completa).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Añade un evento de clic con stopPropagation al elemento padre de la ventana modal para evitar que el evento se propague más.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Especifica si la tecla Escape puede cerrar la ventana modal.",

package/docs/src/views/PageModal/i18n/fr.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "La fonction qui permet de sauvegarder dans la fenêtre modale.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "Le sélecteur de focus pour s'assurer que le focus n'est pas perdu dans le navigateur lors de la fermeture de la fenêtre modale.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "L'ID ou les ID pour le focus afin de s'assurer que le focus n'est pas perdu dans le navigateur lors de la fermeture de la fenêtre modale.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Détermine s'il faut afficher le bouton de fermeture (\"x\") dans l'en-tête de la fenêtre modale.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Détermine s'il faut afficher le bouton de fermeture (\"x\") dans l'en-tête de la fenêtre modale.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "La taille de la fenêtre modale (petite, grande, xl, xxl, plein écran).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Ajoute un événement de clic avec stopPropagation à l'élément parent de la fenêtre modale pour empêcher la propagation de l'événement.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Spécifie si la touche Échap peut fermer la fenêtre modale.",

package/docs/src/views/PageModal/i18n/hr.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "Funkcija koja omogućuje spremanje u modalu.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "Selektor fokusa kako bi se osiguralo da se fokus ne izgubli u pregledniku nakon zatvaranja modalnog prozora.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "Jedan više ili ID-jeva za fokus kako bi se osiguralo da fokus nije izgubljen u pregledniku kada se modalni prozor zatvori.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Određuje treba li prikazati gumb za zatvaranje (\"x\") u zaglavlju prozora modala.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Određuje treba li prikazati gumb za zatvaranje (\"x\") u zaglavlju prozora modala.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "Veličina modalnog prozora (small, large, xl, xxl, fullscreen).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Dodaje događaj klika sa stopPropagation na roditeljski element prozora modala kako bi se spriječilo daljnje širenje događaja.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Određuje može li tipka Esc zatvoriti modalni prozor.",

package/docs/src/views/PageModal/i18n/it.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "La funzione che consente di salvare nella finestra modale.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "Il selettore di focus per assicurare che il focus non venga perso nel browser quando viene chiusa la finestra modale.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "L'ID o gli ID per il focus per assicurare che il focus non venga perso nel browser quando viene chiusa la finestra modale.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Determina se visualizzare il pulsante di chiusura (\"x\") nell'intestazione della finestra modale.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Determina se visualizzare il pulsante di chiusura (\"x\") nell'intestazione della finestra modale.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "Le dimensioni della finestra modale (piccola, grande, xl, xxl, schermo intero).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Aggiunge un evento di clic con stopPropagation all'elemento padre della finestra modale per impedire che l'evento si propaghi ulteriormente.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Specifica se il tasto Esc può chiudere la finestra modale.",

package/docs/src/views/PageModal/i18n/ru.json

@@ -48,7 +48,7 @@
   "_A_MODAL_PROPS_SAVE_DESCRIPTION_": "Функция, позволяющая сохранить в модальном окне.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_": "Селектор фокуса для предотвращения потери фокуса в браузере после закрытия модального окна.",
   "_A_MODAL_PROPS_SELECTOR_CLOSE_IDS_DESCRIPTION_": "Идентификатор или идентификаторы для установки фокуса и предотвращения потери фокуса в браузере после закрытия модального окна.",
-  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_": "Определяет, следует ли отображать кнопку закрытия (\"x\") в заголовке модального окна.",
+  "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_": "Определяет, следует ли отображать кнопку закрытия (\"x\") в заголовке модального окна.",
   "_A_MODAL_PROPS_SIZE_DESCRIPTION_": "Размер модального окна (small, large, xl, xxl, fullscreen).",
   "_A_MODAL_PROPS_STOP_DESCRIPTION_": "Добавляет событие клика с stopPropagation к родительскому элементу модального окна, чтобы предотвратить дальнейшее распространение события.",
   "_A_MODAL_PROPS_USE_ESCAPE_DESCRIPTION_": "Определяет, может ли клавиша Escape закрыть модальное окно.",

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

@@ -50,6 +50,20 @@ export default function PropsAPI() {
       default: "_A_MODAL_BTN_CANCEL_",
       required: false,
     },
+    {
+      name: "close-button-text-screen-reader-footer",
+      description: "_A_MODAL_PROPS_CLOSE_BUTTON_TEXT_SCREEN_READER_FOOTER_DESCRIPTION_",
+      type: "String",
+      default: "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_",
+      required: false,
+    },
+    {
+      name: "close-button-text-screen-reader-header",
+      description: "_A_MODAL_PROPS_CLOSE_BUTTON_TEXT_SCREEN_READER_HEADER_DESCRIPTION_",
+      type: "String",
+      default: "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_",
+      required: false,
+    },
     {
       name: "disabled",
       description: "_A_MODAL_PROPS_DISABLED_DESCRIPTION_",
@@ -71,6 +85,13 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "focus-start-id",
+      description: "_A_MODAL_PROPS_FOCUS_START_ID_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
     {
       name: "header-tag",
       description: "_A_MODAL_PROPS_HEADER_TAG_DESCRIPTION_",
@@ -85,6 +106,13 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "hide-header",
+      description: "_A_MODAL_PROPS_HIDE_HEADER_DESCRIPTION_",
+      type: "Boolean",
+      default: undefined,
+      required: false,
+    },
     {
       name: "is-close-button-hide",
       description: "_A_MODAL_PROPS_IS_CLOSE_BUTTON_HIDE_DESCRIPTION_",
@@ -162,6 +190,13 @@ export default function PropsAPI() {
       default: "_A_MODAL_BTN_SAVE_",
       required: false,
     },
+    {
+      name: "save-button-text-screen-reader",
+      description: "_A_MODAL_PROPS_SAVE_BUTTON_TEXT_SCREEN_READER_DESCRIPTION_",
+      type: "String",
+      default: "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_",
+      required: false,
+    },
     {
       name: "selector-close",
       description: "_A_MODAL_PROPS_SELECTOR_CLOSE_DESCRIPTION_",
@@ -177,8 +212,8 @@ export default function PropsAPI() {
       required: false,
     },
     {
-      name: "show-close-button",
-      description: "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_DESCRIPTION_",
+      name: "show-close-button-header",
+      description: "_A_MODAL_PROPS_SHOW_CLOSE_BUTTON_HEADER_DESCRIPTION_",
       type: "Boolean",
       default: true,
       required: false,
@@ -204,6 +239,13 @@ export default function PropsAPI() {
       default: true,
       required: false,
     },
+    {
+      name: "use-focus-on-start",
+      description: "_A_MODAL_PROPS_USE_FOCUS_ON_START_DESCRIPTION_",
+      type: "Boolean",
+      default: true,
+      required: false,
+    },
     {
       name: "z-index",
       description: "_A_MODAL_PROPS_Z_INDEX_DESCRIPTION_",

package/package.json

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

package/src/AModal/AModal.js

@@ -8,7 +8,7 @@ import {
   watch,
 } from "vue";
 
-import AButton from "../AButton/AButton";
+import AElement from "../AElement/AElement";
 import ALoading from "../ALoading/ALoading";
 import ATranslation from "../ATranslation/ATranslation";
 
@@ -30,6 +30,7 @@ import {
   uniqueId,
 } from "lodash-es";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
+import BodyHtmlAPI from "./compositionAPI/BodyHtmlAPI";
 
 // @vue/component
 export default {
@@ -50,6 +51,11 @@ export default {
       required: false,
       default: "",
     },
+    bodyHtmlClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: undefined,
+    },
     close: {
       type: Function,
       required: true,
@@ -74,6 +80,16 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.closeButtonText,
     },
+    closeButtonTextScreenReaderFooter: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.closeButtonTextScreenReaderFooter,
+    },
+    closeButtonTextScreenReaderHeader: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.closeButtonTextScreenReaderHeader,
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -89,6 +105,11 @@ export default {
       required: false,
       default: undefined,
     },
+    focusStartId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     headerTag: {
       type: String,
       required: false,
@@ -103,6 +124,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+    },
     id: {
       type: String,
       required: false,
@@ -171,6 +196,11 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.saveButtonText,
     },
+    saveButtonTextScreenReader: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.saveButtonTextScreenReader,
+    },
     selectorClose: {
       type: [String, Array],
       required: false,
@@ -181,7 +211,7 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.selectorCloseIds,
     },
-    showCloseButton: {
+    showCloseButtonHeader: {
       type: Boolean,
       required: false,
       default: true,
@@ -200,6 +230,11 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.useEscape,
     },
+    useFocusOnStart: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     zIndex: {
       type: Number,
       required: false,
@@ -209,12 +244,17 @@ export default {
   setup(props) {
     const isModalHidden = toRef(props, "isModalHidden");
 
+    const {
+      bodyHtmlId,
+    } = BodyHtmlAPI(props);
+
     const {
       destroyEventBusCloseFromOutside,
       initEventBusCloseFromOutside,
     } = CloseFromOutsideAPI(props);
 
     const {
+      headerId,
       stylesBackdrop,
       stylesZIndexModal,
     } = AttributesAPI(props);
@@ -230,7 +270,7 @@ export default {
     const {
       modalRef,
       modalWrapperRef,
-      setFocusToModal,
+      setFocusByShowModal,
       trapFocus,
     } = FocusAPI(props);
 
@@ -253,7 +293,7 @@ export default {
     const {
       showModal,
     } = ShowModalAPI(props, {
-      setFocusToModal,
+      setFocusByShowModal,
       setListenerForKeydown,
     });
 
@@ -291,11 +331,12 @@ export default {
     });
 
     return {
+      bodyHtmlId,
       clickWrapperStoppPropagationEventMap,
       disabledLocal,
+      headerId,
       modalRef,
       modalWrapperRef,
-      setFocusToModal,
       sizeClass,
       stylesBackdrop,
       stylesZIndexModal,
@@ -320,25 +361,29 @@ export default {
             class: "a_modal_footer_actions",
           }, [
             this.$slots.modalFooterPrepend && this.$slots.modalFooterPrepend(),
-            (!this.isSaveButtonHide && this.save) && h(AButton, {
+            (!this.isSaveButtonHide && this.save) && h(AElement, {
               id: this.saveButtonId,
               alwaysTranslate: this.alwaysTranslate,
               class: this.saveButtonClass,
               disabled: this.disabledLocal || this.disabledSave,
               extra: this.extra,
               html: this.saveButtonText,
+              textAriaHidden: true,
+              textScreenReader: this.saveButtonTextScreenReader,
               type: "button",
               ...this.saveButtonAttributes,
               onClick: this.save,
             }),
-            !this.isCloseButtonHide && h(AButton, {
+            !this.isCloseButtonHide && h(AElement, {
               id: this.closeButtonId,
               alwaysTranslate: this.alwaysTranslate,
-              type: "button",
               class: this.closeButtonClass,
               disabled: this.disabledLocal,
-              html: this.closeButtonText,
               extra: this.extra,
+              html: this.closeButtonText,
+              textAriaHidden: true,
+              textScreenReader: this.closeButtonTextScreenReaderFooter,
+              type: "button",
               ...this.closeButtonAttributes,
               onClick: () => this.close(true),
             }),
@@ -363,9 +408,10 @@ export default {
             a_modal_confirm: this.isConfirm,
             a_modal_show: !this.isModalHidden
           }],
-          tabindex: -1,
           role: "dialog",
           ariaModal: true,
+          "aria-labelledby": this.headerId,
+          "aria-describedby": this.bodyHtmlId,
           style: [
             this.modalStyle,
             this.stylesZIndexModal,
@@ -383,30 +429,44 @@ export default {
                 },
               ],
             }, [
-              h("div", {
-                ref: "modal_header",
-                class: "a_modal_header",
-              }, [
-                this.$slots.modalHeader && this.$slots.modalHeader(),
-                this.headerText && h(this.headerTag, {
-                  class: "a_modal_title",
+              !this.hideHeader ?
+                h("div", {
+                  ref: "modal_header",
+                  class: "a_modal_header",
                 }, [
-                  h(ATranslation, {
-                    alwaysTranslate: this.alwaysTranslate,
-                    tag: "span",
-                    html: this.headerText,
-                    extra: this.extra,
-                  }),
-                ]),
-                this.showCloseButton ? h(AButton, {
-                  alwaysTranslate: this.alwaysTranslate,
-                  class: "a_btn_close",
-                  disabled: this.disabledLocal,
-                  textScreenReader: this.closeButtonText,
-                  title: this.closeButtonText,
-                  onClick: () => this.close(true),
-                }) : "",
-              ]),
+                  h("div", {
+                    id: this.headerId,
+                  }, [
+                  this.$slots.modalHeader ?
+                    this.$slots.modalHeader() :
+                    "",
+                  this.headerText ?
+                    h(this.headerTag, {
+                      class: "a_modal_title",
+                    }, [
+                      h(ATranslation, {
+                        alwaysTranslate: this.alwaysTranslate,
+                        tag: "span",
+                        html: this.headerText,
+                        extra: this.extra,
+                      }),
+                    ]) :
+                    "",
+                  ]),
+
+                  this.showCloseButtonHeader ?
+                    h(AElement, {
+                      alwaysTranslate: this.alwaysTranslate,
+                      class: "a_btn_close",
+                      disabled: this.disabledLocal,
+                      textScreenReader: this.closeButtonTextScreenReaderHeader,
+                      title: this.closeButtonTextScreenReaderHeader,
+                      type: "button",
+                      onClick: () => this.close(true),
+                    }) :
+                    "",
+                ]) :
+                "",
               h("div", {
                 ref: "modal_body",
                 class: "a_modal_body",
@@ -415,12 +475,14 @@ export default {
                   ref: "modal_body",
                   class: "a_modal_body__content",
                 }, [
-                  this.$slots.modalBody && this.$slots.modalBody(),
                   this.bodyHtml && h(ATranslation, {
+                    id: this.bodyHtmlId,
                     alwaysTranslate: this.alwaysTranslate,
+                    class: this.bodyHtmlClass,
                     html: this.bodyHtml,
                     extra: this.extra,
                   }),
+                  this.$slots.modalBody && this.$slots.modalBody(),
                 ]),
                 this.isFooterSticky ?
                   FOOTER :

package/src/AModal/compositionAPI/AttributesAPI.js

@@ -5,6 +5,8 @@ import {
 
 export default function AttributesAPI(props) {
   const backdropZIndex = toRef(props, "backdropZIndex");
+  const hideHeader = toRef(props, "hideHeader");
+  const id = toRef(props, "id");
   const zIndex = toRef(props, "zIndex");
 
   const stylesZIndexModal = computed(() => {
@@ -27,7 +29,16 @@ export default function AttributesAPI(props) {
     return STYLES;
   });
 
+  const headerId = computed(() => {
+    if (hideHeader.value) {
+      return undefined;
+    }
+
+    return `${ id.value }_header`;
+  });
+
   return {
+    headerId,
     stylesBackdrop,
     stylesZIndexModal,
   };

package/src/AModal/compositionAPI/BodyHtmlAPI.js

@@ -0,0 +1,21 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function BodyHtmlAPI(props) {
+  const bodyHtml = toRef(props, "bodyHtml");
+  const id = toRef(props, "id");
+
+  const bodyHtmlId = computed(() => {
+    if (!bodyHtml.value) {
+      return undefined;
+    }
+
+    return `${ id.value }_body_html`;
+  });
+
+  return {
+    bodyHtmlId,
+  };
+}

package/src/AModal/compositionAPI/FocusAPI.js

@@ -1,19 +1,45 @@
 import {
-  ref,
+  ref, toRef,
 } from "vue";
 
 import {
   focusableSelector,
 } from "../../const/AFocusableElements";
 
-export default function FocusAPI() {
+export default function FocusAPI(props) {
+  const focusStartId = toRef(props, "focusStartId");
+  const useFocusOnStart = toRef(props, "focusStartId");
+
   const modalRef = ref(undefined);
   const modalWrapperRef = ref(undefined);
 
-  const setFocusToModal = () => {
+  const setFocusToElementWithFocusStartId = () => {
+    const element = document.getElementById(focusStartId.value);
+
+    if (element) {
+      element.focus();
+    }
+  };
+
+  const setFocusToFirstElement = () => {
+    const FOCUSABLE_ELEMENTS = modalWrapperRef.value?.querySelectorAll(focusableSelector) || [];
+    if (FOCUSABLE_ELEMENTS.length === 0) {
+      return;
+    }
+
+    FOCUSABLE_ELEMENTS[0].focus();
+  };
+
+  const setFocusByShowModal = () => {
     setTimeout(() => {
-      if (modalRef.value) {
-        modalRef.value.focus();
+      if (useFocusOnStart.value) {
+        return;
+      }
+
+      if (focusStartId.value) {
+        setFocusToElementWithFocusStartId();
+      } else {
+        setFocusToFirstElement();
       }
     });
   };
@@ -28,15 +54,12 @@ export default function FocusAPI() {
     const LAST_FOCUSABLE_ELEMENT = FOCUSABLE_ELEMENTS[FOCUSABLE_ELEMENTS.length - 1];
     if (EVENT.shiftKey) { // Shift + Tab
       if (document.activeElement === FIRST_FOCUSABLE_ELEMENT) {
-        setFocusToModal();
-        EVENT.preventDefault();
-      } else if (document.activeElement === modalRef.value) { // Focus in .modal
         LAST_FOCUSABLE_ELEMENT.focus();
         EVENT.preventDefault();
       }
     } else { // Tab
       if (document.activeElement === LAST_FOCUSABLE_ELEMENT) {
-        setFocusToModal();
+        FIRST_FOCUSABLE_ELEMENT.focus();
         EVENT.preventDefault();
       }
     }
@@ -45,7 +68,7 @@ export default function FocusAPI() {
   return {
     modalRef,
     modalWrapperRef,
-    setFocusToModal,
+    setFocusByShowModal,
     trapFocus,
   };
 }

package/src/AModal/compositionAPI/ShowModalAPI.js

@@ -3,7 +3,7 @@ import {
 } from "vue";
 
 export default function ShowModalAPI(props, {
-  setFocusToModal = () => {},
+  setFocusByShowModal = () => {},
   setListenerForKeydown = () => {},
 }) {
   const isModalHidden = toRef(props, "isModalHidden");
@@ -13,7 +13,7 @@ export default function ShowModalAPI(props, {
       return;
     }
     document.body.classList.add("a_modal_open");
-    setFocusToModal();
+    setFocusByShowModal();
     setListenerForKeydown();
   };
 

package/src/AModal/i18n/ar.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "قطع",
-  "_A_MODAL_BTN_SAVE_": "حفظ"
+  "_A_MODAL_BTN_SAVE_": "حفظ",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "إغلاق النافذة المنبثقة (موجودة في الرأس)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "إغلاق النافذة المنبثقة (موجودة في التذييل)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "حفظ البيانات في النافذة المنبثقة"
 }

package/src/AModal/i18n/de.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "Abbrechen",
-  "_A_MODAL_BTN_SAVE_": "Speichern"
+  "_A_MODAL_BTN_SAVE_": "Speichern",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Modales Fenster schließen (im Header angeordnet)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Modales Fenster schließen (im Footer angeordnet)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Daten im modalen Fenster speichern"
 }

package/src/AModal/i18n/en.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "cancel",
-  "_A_MODAL_BTN_SAVE_": "save"
+  "_A_MODAL_BTN_SAVE_": "save",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Close modal window (located in the header)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Close modal window (located in the footer)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Save data in the modal window"
 }

package/src/AModal/i18n/es.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "Interrumpir",
-  "_A_MODAL_BTN_SAVE_": "Guardar"
+  "_A_MODAL_BTN_SAVE_": "Guardar",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Cerrar ventana modal (ubicada en el encabezado)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Cerrar ventana modal (ubicada en el pie de página)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Guardar los datos en la ventana modal"
 }

package/src/AModal/i18n/fr.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "Interrompre",
-  "_A_MODAL_BTN_SAVE_": "Enregistrer"
+  "_A_MODAL_BTN_SAVE_": "Enregistrer",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Fermer la fenêtre modale (située dans l'en-tête)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Fermer la fenêtre modale (située dans le pied de page)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Enregistrer les données dans la fenêtre modale"
 }

package/src/AModal/i18n/hr.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "Odustani",
-  "_A_MODAL_BTN_SAVE_": "Spremi"
+  "_A_MODAL_BTN_SAVE_": "Spremi",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Zatvori modalni prozor (smještena u zaglavlju)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Zatvori modalni prozor (smještena u podnožju)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Spremi podatke u modalnom prozoru"
 }

package/src/AModal/i18n/it.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "Interrompere",
-  "_A_MODAL_BTN_SAVE_": "Salva"
+  "_A_MODAL_BTN_SAVE_": "Salva",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Chiudi finestra modale (situata nell'intestazione)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Chiudi finestra modale (situata nel piè di pagina)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Salva i dati nella finestra modale"
 }

package/src/AModal/i18n/ru.json

@@ -1,4 +1,7 @@
 {
   "_A_MODAL_BTN_CANCEL_": "Прервать",
-  "_A_MODAL_BTN_SAVE_": "Сохранить"
+  "_A_MODAL_BTN_SAVE_": "Сохранить",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_": "Закрыть модальное окно (расположена в хедере)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_": "Закрыть модальное окно (расположена в футере)",
+  "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_": "Сохранить данные в модальном окне"
 }

package/src/AModalConfirm/AModalConfirm.js

@@ -30,7 +30,7 @@ export default {
         isModalHidden: isModalHidden.value,
         isConfirm: true,
         ...confirmOptions.value,
-        showCloseButton: false,
+        showCloseButtonHeader: false,
         close: closeConfirm,
       };
     });

package/src/AModalForm/AModalForm.js

@@ -6,6 +6,7 @@ import AForm from "../ui/AForm/AForm";
 import AModal from "../AModal/AModal";
 import ATranslation from "../ATranslation/ATranslation";
 
+import BodyHtmlAPI from "../AModal/compositionAPI/BodyHtmlAPI";
 import DataFormAPI from "./compositionAPI/DataFormAPI";
 import UpdateModalAPI from "./compositionAPI/UpdateModalAPI";
 
@@ -35,6 +36,11 @@ export default {
       required: false,
       default: "",
     },
+    bodyHtmlClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: undefined,
+    },
     close: {
       type: Function,
       required: true,
@@ -54,6 +60,16 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.closeButtonText,
     },
+    closeButtonTextScreenReaderFooter: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.closeButtonTextScreenReaderFooter,
+    },
+    closeButtonTextScreenReaderHeader: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.closeButtonTextScreenReaderHeader,
+    },
     dataForm: {
       type: Array,
       required: false,
@@ -79,6 +95,11 @@ export default {
       required: false,
       default: undefined,
     },
+    focusStartId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     headerTag: {
       type: String,
       required: false,
@@ -89,6 +110,14 @@ export default {
       required: false,
       default: undefined,
     },
+    hideFooter: {
+      type: Boolean,
+      required: false,
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+    },
     id: {
       type: String,
       required: false,
@@ -177,6 +206,11 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.saveButtonText,
     },
+    saveButtonTextScreenReader: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.saveButtonTextScreenReader,
+    },
     selectorClose: {
       type: [String, Array],
       required: false,
@@ -211,6 +245,11 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.useEscape,
     },
+    useFocusOnStart: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     zIndex: {
       type: Number,
       required: false,
@@ -221,6 +260,10 @@ export default {
     "update:modelValue",
   ],
   setup(props, context) {
+    const {
+      bodyHtmlId,
+    } = BodyHtmlAPI(props);
+
     const {
       hasDataForm,
     } = DataFormAPI(props);
@@ -230,6 +273,7 @@ export default {
     } = UpdateModalAPI(context);
 
     return {
+      bodyHtmlId,
       hasDataForm,
       updateModelLocal,
     };
@@ -242,11 +286,16 @@ export default {
       closeButtonClass: this.closeButtonClass,
       closeButtonId: this.closeButtonId,
       closeButtonText: this.closeButtonText,
+      closeButtonTextScreenReaderFooter: this.closeButtonTextScreenReaderFooter,
+      closeButtonTextScreenReaderHeader: this.closeButtonTextScreenReaderHeader,
       disabled: this.disabled,
       disabledSave: this.disabledSave,
       extra: this.extra,
+      focusStartId: this.focusStartId,
       headerTag: this.headerTag,
       headerText: this.headerText,
+      hideFooter: this.hideFooter,
+      hideHeader: this.hideHeader,
       id: this.id,
       isCloseButtonHide: this.isCloseButtonHide,
       isConfirm: this.isConfirm,
@@ -260,16 +309,26 @@ export default {
       saveButtonClass: this.saveButtonClass,
       saveButtonId: this.saveButtonId,
       saveButtonText: this.saveButtonText,
+      saveButtonTextScreenReader: this.saveButtonTextScreenReader,
       selectorClose: this.selectorClose,
       selectorCloseIds: this.selectorCloseIds,
       size: this.size,
       stop: this.stop,
       useEscape: this.useEscape,
+      useFocusOnStart: this.useFocusOnStart,
       zIndex: this.zIndex,
+      "aria-describedby": this.bodyHtmlId,
     }, {
       ...this.$slots || {},
       modalBody: () => [
         this.$slots.modalBodyPrepend && this.$slots.modalBodyPrepend(),
+        this.bodyHtml && h(ATranslation, {
+          id: this.bodyHtmlId,
+          alwaysTranslate: this.alwaysTranslate,
+          class: this.bodyHtmlClass,
+          html: this.bodyHtml,
+          extra: this.extra,
+        }),
         this.hasDataForm && h(AForm, {
           alwaysTranslate: this.alwaysTranslate,
           modelValue: this.modelValue,
@@ -283,11 +342,6 @@ export default {
           isRender: this.isDataFormRender,
           "onUpdate:modelValue": this.updateModelLocal,
         }, this.$slots),
-        this.bodyHtml && h(ATranslation, {
-          alwaysTranslate: this.alwaysTranslate,
-          html: this.bodyHtml,
-          extra: this.extra,
-        }),
         this.$slots.modalBodyAppend && this.$slots.modalBodyAppend(),
       ],
     });

package/src/AModalWizard/AModalWizard.js

@@ -55,6 +55,16 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.closeButtonText,
     },
+    closeButtonTextScreenReaderFooter: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.closeButtonTextScreenReaderFooter,
+    },
+    closeButtonTextScreenReaderHeader: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.closeButtonTextScreenReaderHeader,
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -70,6 +80,11 @@ export default {
       required: false,
       default: undefined,
     },
+    focusStartId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     headerTag: {
       type: String,
       required: false,
@@ -80,6 +95,10 @@ export default {
       required: false,
       default: undefined,
     },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+    },
     isCloseButtonHide: {
       type: Boolean,
       required: false,
@@ -134,6 +153,11 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.saveButtonText,
     },
+    saveButtonTextScreenReader: {
+      type: String,
+      required: false,
+      default: () => modalPluginOptions.value.propsDefault.saveButtonTextScreenReader,
+    },
     selectorClose: {
       type: [String, Array],
       required: false,
@@ -144,7 +168,7 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.selectorCloseIds,
     },
-    showCloseButton: {
+    showCloseButtonHeader: {
       type: Boolean,
       required: false,
       default: true,
@@ -163,6 +187,11 @@ export default {
       required: false,
       default: () => modalPluginOptions.value.propsDefault.useEscape,
     },
+    useFocusOnStart: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     zIndex: {
       type: Number,
       required: false,
@@ -425,11 +454,15 @@ export default {
       closeButtonClass: this.closeButtonClass,
       closeButtonId: this.closeButtonId,
       closeButtonText: this.closeButtonText,
+      closeButtonTextScreenReaderFooter: this.closeButtonTextScreenReaderFooter,
+      closeButtonTextScreenReaderHeader: this.closeButtonTextScreenReaderHeader,
       disabled: this.disabled,
       disabledSave: this.disabledSave,
       extra: this.extra,
+      focusStartId: this.focusStartId,
       headerTag: this.headerTag,
       headerText: this.headerText,
+      hideHeader: this.hideHeader,
       id: this.id,
       isCloseButtonHide: this.isCloseButtonHide,
       isFooterSticky: this.isFooterSticky,
@@ -442,12 +475,14 @@ export default {
       saveButtonClass: this.saveButtonClass,
       saveButtonId: this.saveButtonId,
       saveButtonText: this.saveButtonText,
+      saveButtonTextScreenReader: this.saveButtonTextScreenReader,
       selectorClose: this.selectorClose,
       selectorCloseIds: this.selectorCloseIds,
-      showCloseButton: this.showCloseButton,
+      showCloseButtonHeader: this.showCloseButtonHeader,
       size: this.size,
       stop: this.stop,
       useEscape: this.useEscape,
+      useFocusOnStart: this.useFocusOnStart,
       zIndex: this.zIndex,
     }, {
       ...this.$slots || {},

package/src/plugins/AModalPlugin.js

@@ -6,18 +6,21 @@ export const modalPluginOptions = ref({
   propsDefault: {
     closeButtonClass: "a_btn a_btn_secondary",
     closeButtonText: "_A_MODAL_BTN_CANCEL_",
+    closeButtonTextScreenReaderFooter: "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_FOOTER_",
+    closeButtonTextScreenReaderHeader: "_A_MODAL_BTN_TEXT_SCREEN_READER_CLOSE_HEADER_",
     headerTag: "h2",
     idPrefix: undefined,
     isCloseButtonHide: false,
     isDataFormHide: false,
     isDataFormRender: true,
+    isFooterSticky: false,
     isRequired: false,
     isSaveButtonHide: false,
-    isFooterSticky: false,
     modalClass: undefined,
     modalStyle: undefined,
     saveButtonClass: "a_btn a_btn_primary",
     saveButtonText: "_A_MODAL_BTN_SAVE_",
+    saveButtonTextScreenReader: "_A_MODAL_BTN_TEXT_SCREEN_READER_SAVE_",
     selectorClose: undefined,
     selectorCloseIds: undefined,
     size: undefined,

package/src/styles/components/ui/ui.scss

@@ -151,6 +151,9 @@
   margin: 0;
   padding: 0;
 }
+.a_form_element_label_static {
+  font-weight: bolder;
+}
 
 .a_required {
   margin-bottom: 1rem;

package/src/ui/ALabel/ALabel.js

@@ -157,6 +157,9 @@ export default {
       class: [
         "a_form_element_label",
         this.labelClass,
+        this.isLabelFloat ?
+          "a_form_element_label_float" :
+          "a_form_element_label_static",
         {
           a_form_element_label_error: this.isError,
         },