2023-09-27 Meeting notes

10-15 minutes

Chip updates

@Adam Stankiewicz

(on behalf of @Jennifer Gregory)

Coming back for (final?) review of Chip component Figma spec:

Paragon Design System

If decided as ready for dev, implementation issue for Raccoon Gang:

• `Chip` implementation updates · Issue #2645 · openedx/paragon

Decision: ready for dev! Jeff/Jenn may clarify hover (selected) state, but not blocking. Will implement as is.

10 mins

Contrast checker and Accessibility page

@Vladyslav Zadorozhnii

Resource for a11y color contrast validation · Issue #2647 · openedx/paragon
WebAIM: Contrast Checker

Challenge: often difficult for consumers of Paragon to easily test color contrasts outside of design specific tools.

Q: Is this a useful contribution to Paragon docs site (maybe the A11y page)?

• Should we include our own custom tool or just link to existing tools?

  • Might not be worth building our own.

  • Decision: Instead, we will create new Contrast Checker page under the “Tools” section with a link to the above existing contrast checker.

5 mins

Form.Autosuggest attributes PR

@Mena Hassan

• feat: add attributes to input and wrapper component by httpsmenahassan · Pull Request #2570 · openedx/paragon

• after changing from using the element’s index to a unique UUID, this PR is now live!

• also added some React Testing Library test coverage

5 mins

Label association

@Vladyslav Zadorozhnii

@Anastasiia Abyzova (Deactivated)

Open

• What are next steps?

  • Form.Autosuggest Accessibility - Label Association · Issue #2436 · openedx/paragon

  • [paragon-openedx.netlify.app] Feedback (on /components/form/form-label/) · Issue #2665 · openedx/paragon

  • Form.Group investigation

    • Programmatically fgenewrates a control id to use between nested label and input control.

    • Allows custom controlId.

• Regarding deprecation of floating labels, we seem to agree this a direction we want to go in. We’re unsure who final decider is, but should be driven through the 2U design group.

• [concern] Might added design work with certain use cases to find alternatives to display labels vs. floating labels.

@praviola

https://www.figma.com/file/fdWLivj6C12NVbwlUTYvWi/Search-results?type=design&node-id=514-22645&mode=design&t=6ABxC3V1YIIuGU6W-0

Notes

• Similar pattern to other use cases (including a searchable Dropdown)

• Implementation will live in prospectus but if its a generic/standalone solution might be able to port it over to Paragon in a later iteration.