akashchamp opened a new pull request, #600: URL: https://github.com/apache/fineract-backoffice-ui/pull/600
<!-- Commits must be signed to merge — see CONTRIBUTING.md#commit-signing if you haven't set this up. --> ## What and why `.clickable-link` hardcoded `#3f51b5` in `clients-list.component.ts` and `client-view.component.ts`, so it never picked up the dark theme and rendered at 2.43:1 against the `#1e1e1e` card — well under the 4.5:1 WCAG AA minimum for normal text. Both are swapped to `var(--primary-text)`. That's the token `_common.scss` already documents for exactly this case — "a palette colour drawn as text on a page or card surface" — rather than the issue's suggested `var(--primary-color)`: `--primary-color` measures 3.15:1 on the light theme's white card (see the comment on it in `_common.scss`), so that swap would have traded the dark-mode failure for a new light-mode one. `--primary-text` keeps light mode's current ~8:1 (`#2471a3` on white) and brings dark mode to a measured 5.29:1 (`#3498db` on `#1e1e1e`), both comfortably clearing AA. It's the same token `header.component.ts` and `tabs.component.ts` already use for this exact pattern. Closes #575 ## Verification - `npm run lint` — no new findings on the changed files (repo-wide exit reflects a pre-existing stale-suppressions condition already present on `main`, confirmed by diffing lint output against an unmodified checkout byte-for-byte). - `npm run format:check` — pass. - `npm run test:unit` — pass (247 files, 1518 tests). - `npm run build` — pass (the one budget warning is pre-existing, on `header.component.ts`, unrelated to this change). - `npm run typecheck:e2e` — pass. - `npx playwright test --project=mocked e2e/accessibility.spec.ts` — pass, including a new regression test. - `npx playwright test --project=mocked e2e/client.spec.ts` — pass (real client-creation flow through the changed components). **New regression test** (`e2e/accessibility.spec.ts`, "client list links meet color contrast in dark mode"): populates one client row, switches to dark mode via the header toggle — the issue's own repro steps — and asserts axe-core's `color-contrast` check passes for `.clickable-link`. Confirmed both directions manually: - Against the unfixed colour: fails with `Element has insufficient color contrast of 2.42 (foreground color: #3f51b5, background color: #1e1e1e...)`, matching the issue's own 2.43:1 measurement. - Against this fix: passes. **Manual verification** (mocked UI, dark mode, real browser via Playwright, not just the unit/e2e assertions): read `getComputedStyle` on both live `.clickable-link` elements after logging in, populating a client row, and toggling dark mode — ``` accountNo link: color=rgb(63, 81, 181) bg=rgb(30, 30, 30) contrast=2.43:1 (before) accountNo link: color=rgb(52, 152, 219) bg=rgb(30, 30, 30) contrast=5.29:1 (after) name link: color=rgb(63, 81, 181) bg=rgb(30, 30, 30) contrast=2.43:1 (before) name link: color=rgb(52, 152, 219) bg=rgb(30, 30, 30) contrast=5.29:1 (after) ``` Full-page screenshots of both states were captured locally during verification (not attached here, to keep the PR diff limited to the actual code/test change) — happy to post them in a comment if a reviewer wants the visual alongside the measured values above. **Not run:** the real-backend Playwright project and the CI license/RAT/security jobs — no dependency, license, or generated-file changes here, and this change touches no route the `backend` project's specs cover. ## AI assistance (optional) - Tool / model: Claude (Sonnet 5) - Harness / workflow: Claude Code, run non-interactively as part of an autonomous OSS-contribution workflow. I (the human account holder) reviewed the diff and this description before submitting and am responsible for the change. ## Checklist - [x] I did not hand-edit generated files under `src/app/api/`. - [x] New component or service code uses the adapter boundary in `src/app/core/adapters/` instead of direct browser globals or imperative third-party APIs. *(N/A — no new component/service code; this changes two CSS custom-property references.)* - [x] User-facing strings use translation keys. *(N/A — no user-facing strings changed.)* - [x] I added or updated tests appropriate to this change, or explained why tests were not needed. *(See Verification above.)* - [x] UI workflow changes include suitable e2e coverage, including real-backend testing where relevant. *(Mocked e2e coverage added; no backend-dependent behavior here — a colour token swap — so no real-backend spec applies.)* - [ ] Commits are signed — see [Commit Signing](CONTRIBUTING.md#commit-signing) in CONTRIBUTING.md. *(Not signed: I don't have a GPG/SSH signing key associated with this GitHub account available in this environment. Happy to re-sign or let a maintainer squash-merge if that's easier — the change is two lines of CSS plus a test.)* - [x] I followed the [AI-assisted contributions guidance](CONTRIBUTING.md#ai-assisted-contributions). 🤖 Generated with [Claude Code](https://claude.com/claude-code) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
