Accordion body text turns white when embedded on background color

[danahertzberg]

Problem/Motivation

I want to embed a flexible block with accordions in a Text with background paragraph type

Describe the bug

Color is not set in CSS

To Reproduce

1. Make a flexible block with accordion content
2. Embed block in Text with background paragraph type

Proposed resolution

Add color: initial; to _card.scss file under .card, .panel, .thumbnail, .well {} group

Updated as of 2022/06/01:
This will become a two-part fix: a change to Bootstrap, and a change to Quickstart's Accordion.

• Quickstart: Add the .bg-white class to the Accordion component's .card-body or collapse section.
• Bootstrap: Remove hard-coded background-color from the .card class (Accordion body text turns white when embedded on background color arizona-bootstrap#489)

Order does not matter here; adding the .bg-white class to the Accordion div will allow it to leverage the built-in color contrast fallbacks.

Expected behavior

Accordion body text should match standard body color (since it's on a white background)

Screenshots

Before

After

[danahertzberg]

• Test potential solution with wysiwyg editor color override.
• Look into modifying default color when background is set to white.

[aslaymoore]

The built-in color contrast in the Bootstrap SCSS is to blame for this one. It sees the .bg-blue (for example) and wants to turn the text white to keep it accessible, and doesn't realize that the accordion also has a white background already, since it doesn't have a .bg-* class applied to it.

If we were to add .bg-white to the accordion body

az_quickstart/modules/custom/az_accordion/templates/az-accordion.html.twig

Line 33 in 0934444

<div class="card-body">

it should basically "reset" that so it's defaulting to use black text instead of white.

[aslaymoore]

Since this issue will require a change to arizona-bootstrap rather than az_quickstart, I am moving this issue over to the Arizona Bootstrap repo: az-digital/arizona-bootstrap#489 .

This Quickstart issue should instead be modified to include the addition of the .bg-white class to the Accordion's collapse/.card-body section.