Accordion body text turns white when embedded on background color

[akslay]

Problem/Motivation

Accordions should be readable when nested inside a a <div> that has a background color applied.

This issue originates from: az-digital/az_quickstart#1443

Describe the bug

Accordions are receiving white text when nested inside an element with a background color. Due to built-in accessibility checks, that text is turning white when the parent background color is dark. However, since accordions have a hard-coded white background, this conflicts with the built-in color contrast assurance.

To Reproduce

Add an accordion inside an element that has a background color class applied to it.

[akslay]

It looks like this is already fixed in the 5.x version of Bootstrap.

if we want to fix the 2.x branch, we can add this:

.accordion .card {
    background-color: initial;
}

However, the above will break fix present on the 5.x branch. So not sure if it's best to address this ticket, or to just wait for the fix presented in Bootstrap 5.x. I might lean towards just waiting for 5.x so that we don't have to untangle it later. Especially since the issue is already patched on the QS side of things.

Unless we're able to add this fix to the 2.x branch without including it on main, since 5.x is on main.