Page Comparison

5-10 min

a11y documentation

Matthew Lepage

Discussion started on 8/9 (cont.)

TL;DR; getting a11y focused docs into the Paragon documentation website.

• component usage (best component for the job)

• best practice for consuming specific components

• note: Will need to explore how to fit in a11y docs into component template pages' design.

  • Revisit this UI mockhttps://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-Design-System?type=design&node-id=27497-70654&mode=design&t=SFW9m7YAXTF6Uh5C-4

• Where do designers get their info from?

  • Docs site?

  • Figma?

• Plan to bring to UX team for further discussion, too.

• [Adam] We will get the “Edit this page” CTA in place, too to accelerate this work.

10 mins

dropdown item behavior (tab vs arrow key preference)

Mena Hassan

converted this PR from last week back to a draft because we realized it caused some issues re: navigating through dropdown items.

How do we want to handle keyboard navigation within the dropdown menu? When navigating with a keyboard, would we prefer to be able to use the arrow keys to flip through options or tab through all the options instead?

Notes:

• keyboard behavior should match aria role and it is possibly arrow keys

• edx.org search autosuggest has both

• Jeff will follow up with Mena for a better answer later today.

5 min

dropdown behavior

Cindy Nguyen

https://github.com/openedx/paragon/pull/2547

<5 min

[Inform] New major version of Paragon 🎉

Max Frank

Breaking change in Paragon

As of v21.0.0, it will now be required to use aria-label if not using aria-labelledby for the SelectableBoxSet component.

• Addresses an accessibility requirement

  • If you use this component in any of your applications, you will begin to see an error once the app has been updated to the latest version, or perhaps you may have been informed already by Jeff.

• Sets up "props forwarding"

  • Any additional props passed to SelectableBoxSet will be forwarded to the wrapper element inside the component.

  • This will effectively let developers attach any attributes they desire to the component's wrapper element.

Notes:

• Jeff; any instance using fieldset instead of legend?

  • May want to sync around when it makes sense to use fieldset.

Chip

Design considerations

Chip from multiselect, figma, and edX.org are different. Chip is really designed for multiselect menu, but doesnt really support other use cases

When a chip is dismissble, is the click target the entire chip or just the icon?

Is a clickable chip that looks like primary outline button just be a tiny version of the button component instead?

Look at other design systems, GitHub label component is a good example.

A11y

To avoid horizontal scrolling of cards, suggest showing 4 and the rest with “show all” disclosure pattern

• The keyboard-only a11y concern is many tab-stops preventing navigation past the list of cards.

• What are the implications for CardCarousel, if any?

  • This pattern feels distinct from CardCarousel.

    • Update usage guidance of card carousel “only use if there is a known and finite number of cards”.

      • Adam Stankiewicz to file an issue and prioritize accordingly.

• Should the “Show all” UI interaction be a re-usable Paragon component?

  • E.g., an option on CardGrid?

  • How opinionated/flexible should this be?

• https://github.com/openedx/paragon/issues/2478

Adam Stankiewicz send Jeff a link to Card being used a hyperlink with an onClick handler instead of an actual hyperlink (in an Enterprise MFE).

Should be explicitly documented in docs site.