srcdev-nuxt-forms 2.1.19 → 2.1.21

package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -16,6 +16,7 @@
       :class="[size, { error: fieldHasError }, { 'is-button': isButton }]"
       v-model="modelValue"
       ref="inputField"
+      :aria-checked="isChecked"
     />
   </div>
 </template>

package/components/forms/input-radio/variants/MultipleRadiobuttons.vue

@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="multiple-radiobuttons-fieldset" :class="[{ error: fieldHasError }]">
+  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[{ error: fieldHasError }]">
     <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
     <template v-if="hasDescription">
       <slot name="description"></slot>

package/composables/useZodValidation.ts

@@ -1,8 +1,8 @@
 import { ref, reactive, toRaw, type Ref } from 'vue';
 import { z, ZodError } from 'zod';
-import type { IFormFieldStateObj, ApiErrorResponse } from '../types/types.forms';
+import type { ApiErrorResponse } from '../types/types.forms';
 
-const useZodValidation = (formSchema: any) => {
+const useZodValidation = (formSchema: any, formRef: Ref<HTMLFormElement | null>) => {
   const zodFormControl = reactive({
     errorCount: 0,
     displayLoader: false,
@@ -83,6 +83,7 @@ const useZodValidation = (formSchema: any) => {
     zodFormControl.formIsValid = zodFormControl.errorCount === 0;
     zodFormControl.displayLoader = false;
     zodFormControl.submitAttempted = true;
+    scrollToFirstError();
     return zodErrorObj.value;
   };
 
@@ -108,6 +109,29 @@ const useZodValidation = (formSchema: any) => {
     return null;
   };
 
+  const scrollToFirstError = async () => {
+    await nextTick();
+    if (formRef.value) {
+      const firstErrorElement = formRef.value.querySelector('[aria-invalid=true]');
+      window.scrollTo({
+        top: firstErrorElement?.getBoundingClientRect().y,
+        left: 0,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  const scrollToFormHead = () => {
+    if (formRef.value) {
+      const formHead = formRef.value.getBoundingClientRect().top;
+      window.scrollTo({
+        top: formHead,
+        left: 0,
+        behavior: 'smooth',
+      });
+    }
+  };
+
   return {
     initZodForm,
     zodFormControl,
@@ -115,6 +139,8 @@ const useZodValidation = (formSchema: any) => {
     pushCustomErrors,
     doZodValidate,
     fieldMaxLength,
+    scrollToFirstError,
+    scrollToFormHead,
   };
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",