2023-07-19 Meeting notes

 Date

Jul 19, 2023

 Participants

  • @Adam Stankiewicz

 Goals

  •  

 Discussion topics

Time

Item

Presenter

Notes

Time

Item

Presenter

Notes

 

“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”

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



[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?
react-input-mask by sanniassin


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

 Action items

 Decisions