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

Co-authored-by: Romain Hamel <[email protected]>

Author: ThiloHettmer

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
     })
   }
 }

test/components/FormField.spec.ts

@@ -157,5 +157,25 @@ describe('FormField', () => {
       const attr = wrapper.find('[aria-invalid=true]')
       expect(attr.exists()).toBe(true)
     })
+
+    test('renders id for aria describedby when help prop is provided', async () => {
+      const wrapper = await renderFormField({
+        props: { help: 'somehelp' },
+        inputComponent
+      })
+
+      const attr = wrapper.find('[id=v-0-0-help]')
+      expect(attr.exists()).toBe(true)
+    })
+
+    test('renders no id for aria describedby when no help prop is provided', async () => {
+      const wrapper = await renderFormField({
+        props: { label: 'Username', description: 'Enter your username' },
+        inputComponent
+      })
+
+      const attr = wrapper.find('[id=v-0-0-help]')
+      expect(attr.exists()).toBe(false)
+    })
   })
 })

test/components/__snapshots__/Form-vue.spec.ts.snap

@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div class="mt-2 text-muted">Username must be unique</div>
+    <div id="v-0-0-help" class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
 `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div class="mt-2 text-muted">Help slot</div>
+    <div id="v-0-0-help" class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
 `;

test/components/__snapshots__/Form.spec.ts.snap

@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div class="mt-2 text-muted">Username must be unique</div>
+    <div id="v-0-0-help" class="mt-2 text-muted">Username must be unique</div>
   </div>
 </div>"
 `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <div class="mt-2 text-muted">Help slot</div>
+    <div id="v-0-0-help" class="mt-2 text-muted">Help slot</div>
   </div>
 </div>"
 `;