fix(a11y): s-footer & dark section

[wesleyboar]

Overview / Changes

For dark section and the footer:

• fix color contrast
• make colors consistent

Related

• required by fix: a11y issues - color contrast Core-CMS-Custom#531

Testing & UI

Warning

Undocumented.

I apply changes I tested on TACC and ECEP clients.

[qodo-code-review]

Review Summary by Qodo

Fix accessibility and color consistency for footer and dark sections

🐞 Bug fix ✨ Enhancement

Walkthroughs

Description

• Fix dark section text color contrast for accessibility
• Update footer background to use consistent dark color variable
• Add h2 color and link styling rules to footer component
• Improve color consistency across dark-themed sections

Diagram

flowchart LR
  A["Dark Section Styles"] -->|"Update text color"| B["Improved Contrast"]
  C["Footer Component"] -->|"Change background color"| D["Consistent Dark Theme"]
  C -->|"Add h2 & link rules"| E["Better Styling"]
  B --> F["Enhanced Accessibility"]
  D --> F
  E --> F

Loading

File Changes

1. src/lib/_imports/objects/o-section.css 🐞 Bug fix +1/-1

Update dark section text color for contrast

• Changed dark section text color from --global-color-primary--xx-light to
 --global-color-primary--x-light
• Improves color contrast for better accessibility in dark contexts

src/lib/_imports/objects/o-section.css

---

2. src/lib/_imports/trumps/s-footer.css ✨ Enhancement +8/-9

Update footer background and add styling rules

• Changed footer background from --header-bkgd-color to --global-color-primary--xx-dark
• Added h2 color rule with currentColor value
• Added link styling rule for footer links
• Ensures consistent dark color usage and proper text styling

src/lib/_imports/trumps/s-footer.css

---

3. dist/core-styles.docs.css Miscellaneous +1/-1

Compiled CSS with accessibility fixes

• Compiled output reflecting changes from source files
• Updated dark section text color variable
• Updated footer background color and added styling rules

dist/core-styles.docs.css

---

View more (4)

4. dist/objects/o-section.css Miscellaneous +1/-1

Compiled section styles with color fix

• Compiled output of o-section.css with dark section text color update

dist/objects/o-section.css

---

5. dist/trumps/s-footer.css Miscellaneous +1/-1

Compiled footer styles with improvements

• Compiled output of s-footer.css with background color and styling updates

dist/trumps/s-footer.css

---

6. dist/core-styles.cms.css Additional files +1/-1

...

dist/core-styles.cms.css

---

7. dist/core-styles.portal.css Additional files +1/-1

...

dist/core-styles.portal.css

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1)   📘 Rule violations (0)   📎 Requirement gaps (0)   🎨 UX Issues (0)

🐞\ ≡ Correctness (1)

1. Footer breaks theme background 🐞 ≡

Description

The footer now hard-codes its background to --global-color-primary--xx-dark instead of using the
theme variable --header-bkgd-color, so theme variants and consumers that override the header
background no longer affect the footer. This visibly breaks the built-in has-dark-logo theme (header
becomes x-light while footer stays xx-dark).

Code

src/lib/_imports/trumps/s-footer.css[R9-11]

  color: var(--global-color-primary--x-light);
-  background-color: var(--header-bkgd-color);
+  background-color: var(--global-color-primary--xx-dark);

Evidence

The PR changes .s-footer background-color to a hard-coded global token, while the project’s theming
system defines --header-bkgd-color per theme and the header uses that variable for its background;
therefore theme variants (e.g. has-dark-logo) no longer propagate their background choice to the
footer.

src/lib/_imports/trumps/s-footer.css[6-21]
src/lib/_imports/trumps/s-header.css[81-91]
src/lib/_imports/core-styles.theme.has-dark-logo.css[1-7]
src/lib/_imports/core-styles.theme.default.css[1-11]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The footer background was changed to `var(--global-color-primary--xx-dark)`, which bypasses the theme variable `--header-bkgd-color`. As a result, theme variants (notably `core-styles.theme.has-dark-logo.css`) and consumer overrides that change `--header-bkgd-color` will no longer affect the footer, causing header/footer mismatch.

## Issue Context
- Header background is theme-driven via `--header-bkgd-color`.
- `has-dark-logo` explicitly sets `--header-bkgd-color` to a light value.
- Footer previously tracked that theme variable; now it does not.

## Fix Focus Areas
- src/lib/_imports/trumps/s-footer.css[6-21]
- src/lib/_imports/core-styles.theme.default.css[1-11]
- src/lib/_imports/core-styles.theme.has-dark-logo.css[1-7]

## Suggested fix
- Change `.s-footer { background-color: ... }` to use a themeable variable, e.g.:
 - `background-color: var(--footer-bkgd-color, var(--header-bkgd-color));`
 - (optionally) define `--footer-bkgd-color` in theme files, defaulting to `--header-bkgd-color`, so consumers can override footer independently without breaking existing themes.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more