Page Comparison

“Edit this page” | Paragon documentation site

Adam Stankiewicz

[proposal] “Edit this page” on Paragon docs site to encourage contributions to the documentation from consumers.

Current state: “Leave feedback”

Image Added

Proposed state: “Leave feedback” | “Edit this page”

Image Added

[decision] Yes, let’s do it. Adam Stankiewicz to file issue and triage.

Design Tokens ADR

Adam Stankiewicz

[inform] Design Tokens ADR merged! 🎉

https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst

1 minute

edge case for autosuggest

Brian Smith

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.

5 mins

Form.Control input mask

Vladyslav Zadorozhnii

Is input mask valuable thing in Paragon?
http://sanniassin.github.io/react-input-mask/demo.html

• [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.

[decision] Max Frank to file an issue.