Render all valid attributes on all components

[Josh68]

Describe the bug
Not all components render standard element props / attributes on their top-level element

Reference earlier ticket

To Reproduce
Steps to reproduce the behavior:

1. See the code for Card (MGov)
2. Note that the only props allowed to be passed to the component are className and children
3. Create a page and render a Card adding a data-testid attribute
4. Note that this is a valid prop in React, as are all data- attributes (also aria- attributes, e.g.)
5. Note that this attribute isn't rendered

Expected behavior
All components should take valid props (aka HTML attributes, including all data- attributes) for their top-level element and render them on the top-level element unless otherwise specified

Example: Alert:

Takes correct props

Renders all props

Screenshots
N/A

Desktop (please complete the following information):

• OS: [Mac OS]
• Browser [Chrome]
• Version [105.0.5195.102]

Additional context
Add any other context about the problem here.

[zarahzachz]

The engineers are discussing this issue now. Will keep you posted with what we discuss.

[zarahzachz]

At the time, our discussion approached this as an opportunity to standardize cards across the design system and figure out the role of props in the design system. This work has yet to be prioritized with CMS.

For the time being, if you still need this you could apply custom props to a div with the card CSS.

[Josh68]

For the time being, if you still need this you could apply custom props to a div with the card CSS.

Yes, as it stands, we know the only way to deal with this is to create a wrapper element that we control.