[All EUI form controls] Browser validity messages should automatically populate EuiFormRow `error`s

[cee-chen]

Original request: https://github.com/elastic/eui/issues/6747

Problem

EuiFieldNumber currently shows an icon when :invalid as determined by browsers (e.g. below min, above max, outside step, etc.) but does not offer any additional messaging aside from that. This is particularly problematic for browsers such as Safari which do not expose the validity message whatsoever, even in a mouseover tooltip. This is also problematic for screen reader users, who do not have access to the browser validity messages whatsoever.

Solution

Desired end behavior (but a holistic approach/solution): https://codesandbox.io/s/hungry-cerf-m14fpn?file=/demo.js

Architecturally, we'll want to solve this at a DRYer level:

1. We should pull browser validity detection out from being EuiFieldNumber and instead make it reusable logic that lives within EuiValidatableControl
   • Multiple components will benefit from browser validition - min and max length also apply to text inputs, other inputs can have native browser regexs, e.g. email/password fields
2. We should create a BrowserValidity context that comes from a parent wrapping <EuiFormRow> that allows children to pass back up errors to be displayed (e.g. setBrowserErrors).
   • These errors should be concatenated with any consumer-set errors (as opposed to overriding them) by default.
   • We should add a showBrowserErrors flag (that defaults to true, but can be turned off with false) that allows hiding browser errors entirely (in case consumers want to control/provide their own errors).
   • We should provide an onBrowserInvalid callback to consumers as well for extra flexibility.
3. For standalone inputs outside EuiFormRow, we may want to consider detecting that the setBrowserErrors API doesn't exist, and fall back to displaying a tooltip around the invalid icon.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.