fix: homepage - Raise 'Most chosen' badge text contrast to WCAG AA

[brandonmarshal]

Describe the bug

The "Most chosen" badge on the featured Growth card in the homepage "Foundation, Growth or Enterprise" section fails WCAG 2.2 AA colour contrast. Its text uses text.brand (#1C5EE4, bold, 11.4px) on a 14% brand tint (#D6DFF2), which gives 4.16:1 against the required 4.5:1.

This is an existing issue in patterns/sections/homepage-where-to-fit.php. It surfaced when the mobile-menu Playwright spec was run on the DEV site, because that spec scans the whole homepage behind the open menu.

Change

• The badge text now uses the text.brand-strong token instead of text.brand, in both the block comment attributes and the rendered <p> inline colour.
• The badge background tint is unchanged (still derived from text.brand).
• text.brand-strong has distinct values per mode: brand-800 (#123B8F) in light and cta-200 (#B8F5FF) in dark. Calculated contrast on the tint is about 7.66:1 (light) and 10.6:1 (dark).

To Reproduce

1. Run npx playwright test mobile-menu --project="Mobile Chrome" against the DEV site (BASE_URL=https://ls-agency.lightspeedwp.dev).
2. See the has no other serious/critical axe violations test fail with one color-contrast violation on .ls-package-card__badge. It fails on Mobile Chrome, Mobile Safari and Tablet.

Expected behaviour

The badge text meets 4.5:1 in light and dark mode, and the axe test passes.

Screenshots

No visual capture was taken. The visible change is darker navy badge text in light mode and paler cyan text in dark mode, with the same pill shape, size and position.

Device and Browser Info

Playwright device projects (Mobile Chrome / Pixel 5, Mobile Safari / iPhone 12, Tablet / iPad Mini) against the local site at http://localhost:8882/.

Scope and exclusions

• One file, 2 lines changed (the block comment and the rendered paragraph). Under the review budget.
• No SCSS, theme.json or styles/dark.json changes, and no new tokens.
• Other uses of text.brand on a brand tint were not audited here and may need the same fix.

Accessibility notes

• Target is WCAG 2.2 AA (1.4.3 Contrast, minimum). The badge fails today at 4.16:1 and passes with this change.
• No change to markup structure, focus order or semantics.

Linked Stories/Tasks/PRs

• Linear issue: none. This fix was found while re-running the mobile-menu specs from Fix mobile menu pressed state padding and phase colour (LSA-171) #96 and Add mobile and tablet Playwright coverage for the mobile menu (LSA-183) #97 and has no tracking issue.
• No closing syntax is used.

Test plan

• php -l patterns/sections/homepage-where-to-fit.php reports no syntax errors
• npm run lint passes (all JSON valid)
• npm run security:scan passes
• npm run theme:validate completes with one existing warning, unrelated to this change ({{PLACEHOLDER}} in .github/prompts/cleanup.prompt.md)
• mobile-menu spec on the local site in dark mode, Mobile Chrome, Mobile Safari and Tablet: 100 passed, 0 failed, 26 skipped (Chromium-only tests)
• mobile-menu spec on the local site in light mode, same three projects: 100 passed, 0 failed, 26 skipped
• Before the fix, the same spec on DEV in light mode: 97 passed, 3 failed (the contrast violation), 26 skipped
• Re-run the mobile-menu spec on DEV once this is deployed
• Visual check of the badge in the Site Editor in light and dark mode
• Review of any CodeRabbit findings on this PR
• Build step: not applicable, as no SCSS changed

Changelog

meta:needs-changelog applies: this is a user-facing accessibility fix. The entry is added after this PR is created, so it can link here.

Definition of Done

• Fix implemented and tested (all supported browsers/devices)
• Changelog entry prepared for PR (CHANGELOG.md)
• Accessibility: no WCAG 2.2 AA regressions (semantic HTML, keyboard support, colour contrast)
• Performance: no adverse impact introduced
• Branch prefix is correct (fix/)
• Branch deleted after merge

Summary by CodeRabbit

• Accessibility
  • Improved the “Most chosen” badge text contrast on the homepage Growth card in light and dark modes. The badge background remains unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: lightspeedwp/ls-theme/.coderabbit.yml
• Review profile: ASSERTIVE
• Plan: Essentials
• Run ID: 8010f7b0-d4ed-4f3e-9a2d-fd4564205764

📥 Commits

Reviewing files that changed from the base of the PR and between cd76ef5 and 14b940e.

📒 Files selected for processing (1)

• CHANGELOG.md

Included review availability: This review used your included allowance. Your plan provides up to 5 included reviews per hour; 4 remain after this review.

---

📝 Walkthrough

Walkthrough

The Growth card’s “Most chosen” badge now uses the stronger brand text color. Its background and other styling remain unchanged. The changelog records the change and reported contrast ratios.

Changes

Homepage badge styling

Layer / File(s)	Summary
Update badge text color patterns/sections/homepage-where-to-fit.php, CHANGELOG.md	The badge uses the stronger brand text color. The changelog records the change and reported contrast ratios. The badge background remains unchanged.

Priority: ➖ Normal

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 14b94

The badge text uses the stronger color without changing its background tint, with available contrast calculations above the AA target in both modes. No actionable merge-blocking risk remains.

Architecture Summary

Architecture risk: 🔵 Low · up to cd76e

The change affects 2 systems.

Changed systems: CHANGELOG.md, patterns

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — CHANGELOG.md (service) was modified; 1 changed file maps to changed impact.
• observed — patterns (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in CHANGELOG.md: Added an Unreleased “Fixed” entry recording the badge text-token change, reported contrast ratios in light and dark modes, unchanged background, affected pattern, and PR reference.
• observed — Modified behavior in patterns/sections/homepage-where-to-fit.php: The “Most chosen” badge text color changes from the standard brand color to the stronger brand color; its background color and other styling remain unchanged.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: increasing the homepage “Most chosen” badge text contrast to meet WCAG AA.

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[brandonmarshal]

@coderabbitai review

[coderabbitai]

⚠️ Action not completed

Already reviewed the last commit. Use @coderabbitai full review to rerun a review of the entire changeset.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.