This PR replaces and adds onto #30042. The goal of this is to replace our half-baked card accordion with a fully functioning accordion component, powered by the Collapse plugin. While this adds some CSS, personally I think it makes accordions more widely accessible (e.g., fewer requirements to creating the component).
According to the origin PR by @gijsroge, this does the following:
- Fixes #30015 (closed), the original feature request issues
- Fixes #28134 (closed) by moving the border-bottom from the header to a border-top on the body
- Fixes #28873 (closed) by removing the
overflow: hidden;on the .accordion-item - Fixes #25811 (closed) by adding an
.accordion-flushvariant (in addition to.accordion-striped, which may not be necessary IMO)
Also from that PR, there were some remaining todos. Design and code are largely final now with my latest changes here. Looking through https://www.w3.org/TR/wai-aria-practices-1.1/#accordion, I think we're largely in order. There's also this handy dandy example accordion they provide.
Preview: https://deploy-preview-32013--twbs-bootstrap.netlify.app/docs/5.0/components/accordion/
Some open questions from me now moving this forward:
-
Do we need striping here? I think not, and may remove it shortly. -
Any other variations, documentation, etc we should be considering?
/cc @twbs/css-review