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: