Page Comparison

5-10 mins

Notifications UI

Adam Stankiewicz

Web-based Notifications notifications UI: Tabs

Figma

The notification bubble shown above differs from what exists in the implemented Tabs component today (docs):

[curious] Will/should there be a Paragon proposal to update the Tabs component’s notification?

5-10 min

CardGrid new prop

Max Frank

To accommodate the ability to forward props to the Row that is wrapped inside this component.

Here is a GH issue for more detail: https://github.com/openedx/paragon/issues/2478

This will enable us to make expandable CardGrids more accessible: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

Questions for the group:

1. Should this prod just forward an ID or do we want to support forwarding a list of props to the Row?

2. What should the prop be called?

Notes:

• Use case: “only show the first 3 cards, hide the remaining cards until user clicks a button.”

• [Ben] rowProps to keep it flexible/forward-looking.

• Document example of forwarding rowProps on the docs site.

• [Adam] Is this a pattern to specific to just this one application or could it be more broadly applicable as a pattern (native part of CardGrid)?

5 min

Potential breaking change to Paragon

Max Frank

PR to add support for aria-labellebylabelledby and props-forwarding to the SelectableBoxSet component:
https://github.com/openedx/paragon/pull/2461

There is a discussion going on in the PR about how this is a breaking change because the label is actually required for this component to pass accessibility checks (Jeff or other a11y specialists feel free to jump in on this).

What I need from the group:

• PR is ready for another pass of review

• I will most likely need some guidance in regards to how we handle breaking changes. I can see how to format the commit message, but am wondering if there is any other protocol to follow? Any docs I can look at?

• [Adam] Was it possible to do a conditional prop?

  • Yes, using requiredWhenNot prop type helper.

• Breaking change because one of these props is required

• Channels

  • Paragon Working Group

  • Frontend Working Group

  • #edx-fedx (internal 2U)

  • #tech-dev-edx (internal 2U)

5 mins

Accessibility information for components on the Paragon docs site

Vladyslav Zadorozhnii

I think it is interesting to know what accessibility standards are used for specific component. Also it allows to revisit components accessibility.

Solution: Put accessibility information in the table at the bottom of a component page. Maybe provide separate Accessibility page with basic information.

• [idea] Table explaining the aria-* attributes, etc. with the reason(s) why.

• Extend the “Edit this page”

  • Adam Stankiewicz to file the ticket to add the “Edit this page” issue.

  • Edit the a11y table.

• [Jeff] “Need to know certain things to use components properly”

  • Example: https://designsystem.digital.gov/components/button/

• Proposal:

  • For each component, fill a11y info out on wiki page and collaborate with PWG / Jeff Witt and then carry over to docs site.

  • Accessibility (a11y) Documentation (use this as a starting point).

  • Could live alongside Confluence space for a11y.

• [Ben] This also would help for testing with React Testing Library (e.g., getByRole). Would be nice to have these documented.

• [Ben] Should Paragon provide component mocks for testing?

  • Some consumers may not want to render Paragon components in tests.

• Vlad to collaborate with Jeff over Slack. Jeff can meet to start working through these.

A11y issues with Carousel?

Side-scrolling for mobile screens?