[BUG] - Inputs has no roles by default.

[SalahAdDin]

Describe the bug

We created hour website using this elegant library.

There is time to test the forms we created, but it is hard to get all errors since they has no defines roles. We used the same line we used with MUI based websites, but it didn't work here.

Also, for the error labels, they don't include a role too, in MUI we handled this by passing the role with JSX node: helperText={error ? <span role="alert">{error.message}</span> : null} It is not possible on here since helperText is not string property, not a node.

Your Example Website or App

You can check it here: https://codesandbox.io/s/thirsty-gwen-tlfiix

Steps to Reproduce the Bug or Issue

1. Run tests.

Expected behavior

Helper text should have a role by default, or a easy way to get them.

Screenshots or Videos

Actually, these problems come to the place we have to follow bad practices to test errors on inputs.

Operating System Version

5.15.28-1 Manjaro Linux x86_64

Browser

Other (Testing Library)

[danielsimao]

@jrgarciadev, have you ever considered encapsulating the logic for the label and helperText in a external component, such as TextField or FormField. In that component, you could gather a nit way to allow customisation on the label and helperText. Including all in the Input component, seems like too much. What do you think?

[jrgarciadev]

Hey @danielsimao yes I have considered that, I would like to implement something like the @react-aria/spectrum has https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum/label/src, it would be great to have those components alongside the Radio, Checkbox and Input components

[jrgarciadev]

Hey please upgrade to V2 since V1 will no receive more updates.

[SalahAdDin]

@jrgarciadev did you solve this issue?

[jrgarciadev]

Hey @SalahAdDin yes please upgrade to v2, the Input component is now based on react-aria hooks https://react-spectrum.adobe.com/react-aria/useTextField.html#usetextfield