srcdev-nuxt-forms 2.1.24 → 2.1.26

package/components/forms/form-errors/InputError.vue

@@ -5,7 +5,7 @@
         <div class="inner-icon">
           <Icon name="radix-icons:circle-backslash" class="icon" />
         </div>
-        <div class="message" :id="`${id}-error-message`">
+        <div class="message" :id>
           <ul v-if="isArray" class="message-list">
             <li v-for="(message, index) in errorMessage" :key="index" class="message-list-item">{{ message }}</li>
           </ul>

package/components/forms/form-errors/tests/InputError.spec.ts

@@ -7,7 +7,7 @@ import ComponentUnderTest from '../InputError.vue';
 let initialPropsData = {
   dataTestid: 'inputError',
   errorMessage: 'Hello World',
-  fieldHasError: true,
+  showError: true,
   id: 'testId',
   styleClassPassthrough: ['testClass'],
   compact: false,
@@ -37,7 +37,7 @@ describe('InputError Component', () => {
 
   it('is not displayed by default', async () => {
     const propData = {
-      fieldHasError: false,
+      showError: false,
     };
     wrapper = await wrapperFactory(propData);
 
@@ -46,7 +46,7 @@ describe('InputError Component', () => {
 
   it('is displays a single error message', async () => {
     const propData = {
-      fieldHasError: true,
+      showError: true,
     };
     wrapper = await wrapperFactory(propData);
 

package/components/forms/input-text/InputTextCore.vue

@@ -19,7 +19,7 @@
       v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
-      :aria-describedby="`${id}-error-message`"
+      :aria-describedby
       :pattern="inputPattern"
       :inputmode
       @focusin="updateFocus(true)"
@@ -35,7 +35,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasError, styleClassPassthrough, theme } = defineProps({
+const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasError, styleClassPassthrough, theme, ariaDescribedby } = defineProps({
   type: {
     // type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
     type: String,
@@ -86,6 +86,10 @@ const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasErr
       return propValidators.theme.includes(value);
     },
   },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
 });
 
 const slots = useSlots();

package/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
     <label :for="id" class="input-text-label body-normal-bold">{{ label }}</label>
-    <template v-if="hasDescription">
+
+    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
       <slot name="description"></slot>
-    </template>
+    </div>
 
     <InputTextCore
       v-model="modelValue"
@@ -21,6 +22,7 @@
       :styleClassPassthrough
       :theme
       inputmode="numeric"
+      :ariaDescribedby
     >
       <template v-if="hasLeftSlot" #left>
         <InputButtonCore
@@ -53,7 +55,7 @@
         </InputButtonCore>
       </template>
     </InputTextCore>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id :isDetached="true" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </div>
 </template>
 
@@ -118,7 +120,7 @@ const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, re
 });
 
 const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
@@ -126,6 +128,12 @@ const formTheme = computed(() => {
   return fieldHasError ? 'error' : theme;
 });
 
+const errorId = `${id}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
+
 const modelValue = defineModel();
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);

package/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -2,6 +2,10 @@
   <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
     <label :for="id" class="input-text-label body-normal-bold">{{ label }}</label>
 
+    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
+      <slot name="description"></slot>
+    </div>
+
     <InputTextCore
       v-model="modelValue"
       v-model:isDirty="isDirty"
@@ -18,6 +22,7 @@
       :required
       :styleClassPassthrough
       :theme
+      :ariaDescribedby
     >
       <template v-if="hasLeftSlot" #left>
         <slot name="left"></slot>
@@ -26,7 +31,7 @@
         <slot name="right"></slot>
       </template>
     </InputTextCore>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id :isDetached="false" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="`${id}-error-message`" :isDetached="false" />
   </div>
 </template>
 
@@ -90,6 +95,7 @@ const { type, inputmode, maxlength, id, name, placeholder, label, errorMessage,
 });
 
 const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
@@ -97,6 +103,12 @@ const formTheme = computed(() => {
   return fieldHasError ? 'error' : theme;
 });
 
+const errorId = `${id}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
+
 const modelValue = defineModel();
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.24",
+  "version": "2.1.26",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -23,22 +23,22 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "0.6.1",
-    "@nuxt/icon": "1.7.5",
-    "@nuxt/test-utils": "3.14.4",
+    "@iconify-json/material-symbols": "1.2.10",
+    "@nuxt/eslint-config": "0.7.2",
+    "@nuxt/icon": "1.9.1",
+    "@nuxt/test-utils": "3.15.1",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.15.0",
-    "happy-dom": "15.11.6",
+    "eslint": "9.16.0",
+    "happy-dom": "15.11.7",
     "nuxt": "3.14.1592",
     "release-it": "17.10.0",
-    "typescript": "5.6.3",
-    "vitest": "2.1.5",
+    "typescript": "5.7.2",
+    "vitest": "2.1.8",
     "vue": "3.5.13"
   },
   "dependencies": {
     "@iconify-json/carbon": "1.2.4",
     "@iconify-json/gridicons": "1.2.1",
-    "@iconify-json/material-symbols": "1.2.6",
     "@iconify-json/radix-icons": "1.2.1",
     "@iconify-json/ri": "1.2.3",
     "@nuxtjs/storybook": "8.3.2",
@@ -46,8 +46,8 @@
     "@storybook/addon-interactions": "8.4.6",
     "@storybook/addon-links": "8.4.6",
     "@storybook/vue3": "8.4.6",
-    "modern-normalize": "3.0.1",
     "http-proxy-middleware": "3.0.3",
+    "modern-normalize": "3.0.1",
     "zod": "3.23.8"
   },
   "release-it": {