[Form controls] Better indicators for invalid state

[cchaos]

At the moment, we just add a red underline. Let's consider adding an icon on the right side of the input as well. This is best for accessibility for those with color-blindness that find it hard to detect the difference between blue and red.

Also, we keep running into issues where the focused state (blue line) overrides the invalid state making it unclear that certain (mostly number) inputs are invalid as the user types.

Guidelines Example:

---

Components to update:

• EuiFieldNumber
• EuiFieldPassword
• EuiFieldSearch
• EuiFieldText
• EuiFilePicker
• EuiSelect
• EuiSuperSelect
• EuiTextarea
• EuiComboBox
• EuiDatePicker
• EuiDatePickerRange
• EuiSuperDatePicker
• EuiRange/EuiDualRange

[myasonik]

I definitely support adding more indicators to our forms about error states.

Currently, by only indicating errors through color, we fail to meet WCAG level A guidelines for accessibility guidelines (more at Use of Color guidelines).

[ryankeairns]

For current accessibility needs, EUI does provide styles for adding error/help text which we highly recommend: https://elastic.github.io/eui/#/forms/form-validation

[myasonik]

I think accessible by default (or, at least, closer to it) would be a good step forward. Leaving it up to the implementing developer as optionally accessible more often then not results in a lot of inaccessible usage.

But even with the error copy, the only thing that differentiates error copy and help copy is, again, color. So if you didn't notice the form changing color, noticing some new error copy is also probably pretty difficult.

Regardless of how the icon indicator shakes out, another options is requiring inline error copy (which could be improved to differentiate it better as well). This would also help with issues around long forms like in #1854.

[ryankeairns]

@myasonik Thanks for the feedback. To be clear, I was not suggesting what we have is enough, just pointing out that we have other things which can mitigate the current situation.

[cchaos]

As an addition to this, we should be able to continue to indicate invalid states when in focus. Per @mbondyra's comment in another issue:

EuiRangeInput doesn’t show invalid state (eg. out of the range or defined in isInvalid prop) as long as I have focus, and the red highlighting would only appear once I blur the input. I tried to play with it by passing directly isInvalid prop with condition, but it doesn’t change anything (demo here, applying the value -1 would be the showcase).

[ryankeairns]

FWIW, I just ran across this design on GitHub while creating labels:

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

This is a forever, yes.

[cchaos]

I've done most of the pre-work in #5738 and most of the simple controls. I'm removing myself as assignment and opening for anyone to tackle the other components.