cfpb / design-system

CFPB's work-in-progress design system
https://cfpb.github.io/design-system
Creative Commons Zero v1.0 Universal
37 stars 12 forks source link

Consider converting Expandables to details/summary markup #1622

Open anselmbradford opened 1 year ago

anselmbradford commented 1 year ago

The details element is a standard element that, along with the summary element, creates a "disclosure widget". This is what our expandables are doing. We could possibly gain baked in accessible features and interactions if we switched our expandables to detail/summary markup. The animating would need to be worked out, but https://css-tricks.com/how-to-animate-the-details-element/ offers a starting point.

sonnakim commented 1 month ago

This one can probably wait till web components work begins. Not quite sure yet if the details element will support some of the features we currently have in our expandables (see comment above, animations in particular)