Bug: Wrong accessibility tags applied to wrapping components when using `renderField` about remix-forms

[janhesters]

@danielweinmann

First of all, big thank you and your team for Remix Forms.

We've been using Remix Forms with our agency full time now, and we came about quite a few edge cases now that we use it extensively. However, it seems to be the best library of its kind out there. Thanks a ton for creating it! 🙏

Secondly, I cloned the repo on the weekend and tried to fix it, but didn't understand the code well enough. If you have the time, please guide me through the issue, and I will try to create a PR in my evening.

Also, if you can, I'd love to "scratch my own itch" and also address this issue in a PR, if you're okay with it and can provide some high level guidance for that, too.

[janhesters]

For now, one workaround is to create your own custom InputWrapper and prevent Remix Forms from passing the false props to the tags:

export const InputWrapper = ({
  className,
  children,
}: JSX.IntrinsicElements['div']) => <div className={className}>{children}</div>;

which can then be used like this in renderField:

<>
  <Label />

  <InputWrapper className="mt-2">
    <InputWrapper className="relative rounded-md shadow-sm">
      <SmartInput
        className={
          props.errors &&
          'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500 dark:text-red-600/100 dark:ring-red-400 dark:placeholder:text-red-400/70 dark:focus:ring-red-500/80'
        }
      />

      {props.errors && (
        <InputWrapper className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
          <ExclamationCircleIcon
            aria-hidden="true"
            className="h-5 w-5 text-red-500 dark:text-red-600"
          />
        </InputWrapper>
      )}
    </InputWrapper>

    <Errors />
  </InputWrapper>
</>

[danielweinmann]

Hey, @janhesters! Thank you for the perfect issue description 👌🏽

The behavior you described is part of what we're trying to figure out with #189. I'll keep that issue for the bigger-picture solution and use yours to fix your specific example.

• This happens because Remix Forms mistakenly thinks your div is an error component (which is what #189 is mostly about).

• But even if it thinks it's an error component, it shouldn't pass the id and role props if the field is valid. It's probably a bug on the logic inside this block.

I think this will be a quick fix, and I'll work on it later this week. Unless, of course, you'd like to send a PR :) just let me know, and I can guide you and review it.

[danielweinmann]

Thank you, @janhesters!

I don't understand exactly what's happening, but I'm pretty sure it's something between these lines of code.

I would create a test example with a failing test (just like I suggested in #53) and TDD my way to fixing this. Feel free to implement #53 first if you think the path is clearer.