Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Time

Item

Presenter

Notes

5-10 mins

Notifications UI

Adam Stankiewicz

Web-based 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”

  • 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?

✅ Action items

  •  

⤴ Decisions

...