fix(FormField): resolve minor accessibility and rendering issues (#4515)

Co-authored-by: Romain Hamel <rom.hml@gmail.com>

src/runtime/components/FormField.vue

@@ -121,7 +121,7 @@ provide(formFieldInjectionKey, computed(() => ({
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

src/runtime/composables/useFormField.ts

@@ -89,10 +89,15 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
         .filter(type => formField?.value?.[type])
         .map(type => `${formField?.value.ariaId}-${type}`) || []
 
-      return {
-        'aria-describedby': descriptiveAttrs.join(' '),
+      const attrs: Record<string, any> = {
         'aria-invalid': !!formField?.value.error
       }
+
+      if (descriptiveAttrs.length > 0) {
+        attrs['aria-describedby'] = descriptiveAttrs.join(' ')
+      }
+
+      return attrs
     })
   }
 }