Red border not showing for error/invalid fields

[evadecker]

Describe the bug
When a field has an error/invalid state, its border should be red.

To Reproduce
Steps to reproduce the behavior:

1. Go to any form with required fields (like sign in)
2. Attempt to submit the form without data
3. View the error state for the field
4. No red border is displayed

Expected behavior
A red border should display.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Additional context
Invalid styles are set for fields, but something about the current composition of components in React Aria is preventing those styles from applying. Figure out what is wrong.

[belhajManel]

After some investigation, I discovered that the issue with the invalid state showing a purple border instead of a red one is caused by the focusRing utility overriding the invalid styles.

Root Cause:

• The focusRing utility applies a purple outline when the field is focused (isFocusVisible: true).
• This behavior conflicts with the isInvalid state styles defined in fieldBorderStyles, resulting in the purple outline taking precedence over the red border.

I'll try to dig deeper into this issue.

[evadecker]

After some investigation, I discovered that the issue with the invalid state showing a purple border instead of a red one is caused by the focusRing utility overriding the invalid styles.

Root Cause:

• The focusRing utility applies a purple outline when the field is focused (isFocusVisible: true).

• This behavior conflicts with the isInvalid state styles defined in fieldBorderStyles, resulting in the purple outline taking precedence over the red border.

I'll try to dig deeper into this issue.

Thanks for investigating @belhajManel! Both the border and outline should be able to apply, so I wonder what's going wrong... 🤔