Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
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.
5 mins
SelectableBox.Set
@Max Frank
Adding aria-labelledby to the SelectableBox.Set in order to associate a label with the wrapping element
[Jeff] Yes. Let’s make sure we update the component docs examples, too!
[Adam] Consider prop spreading.
[decision] We will add support for this! @Max Frank to implement.
CardGrid
@Max Frank
Expand/collapse for CardGrid to expand the number of cards shown in the grid.
A11y concerns?
[Jeff] P3 a11y request. Consistent with WCAG spec to include the aria controls. Great if we have capacity.
