slack comment For a non-required field where freeform text is not allowed, if a user tabs out after entering freeform text should it be in an error state? My gut feeling is yes.
Notes:
[Jeff] “If in error state, there should be a message explaining the nature of the error. Don't make them guess.”
[Ben] Is this a search error? Input wasn’t valid, no matching found autosuggest result.
[Jeff] Possible concern:
User’s input is a valid, but the autosuggest item wasn't chosen.
Possible validation message: “Failed to make a selection”
If there’s only 1 option, force the selection.
May want to be an exact match on this case. Could lead to confusion, may be better off to force a selection.
[Jeff] In this case, should we suggest a list of similar, matching options in this case?
Example use case: USPS for an address.
[Matthew] Possible concern around making this a blanket decision for all cases depending on the context.
Disparity between invalid and “effectively blank”.
[Ben] autosuggest is almost a form inside of a form, where there probably should be validation message.
[Matthew] Do we have an example where this might come up?
Add tags to a search: “Don’t have tags, can still do the search”. Is this an accurate case study?
[Jeff] hard UX space, hard to nail down.
May not be necessary to move forward; should we file issue and defer?
[Jeff] Brian Smith 's suggestion makes sense, but the “suggestion list” can be separate/deferred.
[Brian] may not be best as part of Form.AutoSuggest itself.
[Ben] maybe include a hook on blur for consumers to do something custom, per MFE.
[Brian + Adam] Yes
Likely shouldn’t treat this as an actual validation error (like top-level error validation), blocking form validation. It’s more like a hint.
Implications for aria-invalid
Likely not necessary for non-required fields, but should have an appropriate label.
[Adam] Form.Control.Feedback may not support a “hint” state that differs from isValid or isInvalid.
[Matthew] 3 options
Alert pattern distinct from error messages
Don't do anything, text vanish / blank out
Block form submission and treat as a normal error.
[Brian/Jeff] leaning towards this.
Need very explicit/helpful text.
Split out the cases:
clear the input
No valid options matched the text.
make a selection
Valid options matched but no selection made.
[decision] We will treat as a normal error for now, and then defer/ticket out the “hint” pattern from a design perspective.
Ben Warzeski (Deactivated) to file placeholder design ticket, and share in PWG Slack channel and ping Gabe/design for feedback.
[Jeff] Great if it works as expected. Has seen some places where it doesn’t work well.
How does this interact with the input types? (e.g., tel)
Considered enough of a PITA for users where it’s a WCAG concern.
Input masking itself, its a concern for WGAC but can be good usability practice.
[Adam] It appears this is a standalone component InputMask, how well can it integrate with Form.Control in Paragon today?
[decision] We will prioritize some technical discovery about this issue. Vladyslav Zadorozhnii to file an issue and we will inject into an upcoming sprint.
