`CardGrid` to forward props to child `Row` component

[MaxFrank13]

Improvements

The CardGrid component renders a list of cards inside a Bootstrap Row. In some cases, we may want to make this CardGrid expandable — meaning the majority of the cards will be hidden until a toggle button is hit.

If we want to support this behavior, we need to make it accessible by providing an id attribute to the Row that wraps all of the cards. This id is then associated with the aria-controls attribute of the button that expands the list. This button also has an aria-expanded attribute set to a boolean.

From MDN:

<button
  aria-expanded="false"
  aria-controls="username-desc"
  aria-label="Help about username"
  type="button"
>
  <span aria-hidden="true">?</span>
</button>
<p id="username-desc" hidden>
  Your username is the name that you use to log in to this service.
</p>

The Row is being wrapped in a div so we will need to provide a new prop to the CardGrid component, either:

• rowProps if we want to support forwarding any number of props to the Row
• or rowID if we just want to support forwarding the id

Note: definitely open to feedback on how to name the new prop, these are just suggestions

https://github.com/openedx/paragon/blob/319b694354a2dcd55cdcb3bfed60587de13f6f40/src/Card/CardGrid.jsx#L31-L35

Resources

MDN on aria-expanded

[MaxFrank13]

From Paragon Working Group discussion:

• Forward a set of props and not just the ID
• rowProps as a name to keep it flexible
• Part of the work for this would be documenting an example of why this prop is useful — can use the example highlighted in the issue

Question for future development: if this pattern becomes more popular, should the ability to expand the CardGrid become a native part of the component?