Add ability to merge aria-describedby attribute

[ghost]

👋, there!

I have the following input:

<div>
  <div>
    <Label htmlFor={fields.avatar.id}>Avatar URL</Label>
    <span id="email-optional">
      Optional
    </span>
  </div>
  <Input
    placeholder="https://example.com/avatar.jpg"
    aria-describedby="email-optional"
    {...conform.input(fields.avatar, {
      type: "url",
    })}
  />
  <ErrorList id={fields.avatar.id} errors={fields.avatar.errors} />
</div>

If there is an error, the aria-describedby prop will be overwritten to the error id, ignoring "email-option".

Can we have a way to merge set aria-* props, something like:

conform.input(fields.avatar, {
  type: "url",
  mergeAriaProps: {
   'aria-describedby': 'email-optional'
  }
})

Or instead of using aria-describedby for the error id, we could use aria-errormessage.

[edmundhung]

Hi @zelinka-marek,

Thanks for the idea. You can use the documentId provided by each field (similar to the id prop) like this:

<span id={fields.avatar.documentId}>
  {/* ... */}
</span>

then specify the description option when calling a conform helper:

<input
{...conform.input(fields.avatar, { type: 'url', description: true })}
/>

It will manage the aria-describedby attribute for you.

We are not using aria-error message here because of limited support from screen readers.

[ghost]

Ok, thanks @edmundhung!