Accessibility: Accordion text contrast on dark bg section

Problem/Motivation

The font color of Links inside an Accordion inside a Section with mahogany background fails Accessibility color contrast test.

Expected behavior

Contrast should pass.

Originally reported to me by Library website admins on this page:

https://libraries.indiana.edu/libraries-diversity-resources

Steps to reproduce

Put a paragraph with link inside an accordion content inside a section with mahogany background.

<div class="bg-mahogany bg-dark">
<div class="accordion" data-accordion="test-contrast-accordion" role="presentation" aria-multiselectable="true">
  <div class="accordion-item is-active" role="heading" aria-level="2">
    <h3>
      <button class="accordion-title" id="panel-test-contrast-label" aria-controls="panel-test-contrast" aria-expanded="true">
        <strong class="accordion-label">
          Accordion Label
        </strong>
        <span class="accordion-icon" aria-hidden="true"></span>
      </button>
    </h3>
  </div>
  <div id="panel-test-contrast" class="accordion-content" role="region" data-tab-content="" aria-labelledby="panel-test-contrast-label" aria-hidden="false" style="display: block;">
    <div class="text">
      <p>Paragraph text here</p>
      <p><a href="https://example.com">Link contrast fails</a></p>
    </div>
  </div>
</div>
</div>

Proposed resolution

Because the nested capability of IU Framework Chunks as implemented in the IU Paragraphs module; we compose rich text blocks inside the accordion content, but at render time the text block that contains the class="text" has no knowledge that it is inside an accordion, so we don't have an easy way to remove the class server side.

Therefore, the proposal is to write a custom CSS rule to override the specificity override.

Remaining tasks

User interface changes

API changes

Data model changes