Two backlog trees are complete: `docs/project/backlog/` (75 files, every WP done) and `docs/project/refactor-backlog-setup/` (the arc before it). Move both under `docs/project/archive/` with `git mv`, so history stays intact through `git log --follow`. `SHOWCASE-ROADMAP.md` moves with them, because it points at the now-archived backlog README. Add `docs/project/archive/README.md`. It states that these trees are historical and names the two directories that are still live. Repoint every inbound reference named in RD-30's Files table: CLAUDE.md, the root README, both backend READMEs, `LetterHtml.cs`, `a11y.mdx`, the `document-feature` and `new-ssp` skills, and the readable-codebase PLAN, README, and RD-19 ticket. Fix two upward-relative links inside the moved WP files (WP-68, WP-69) that gained a directory level and would otherwise break. Repoint `.prettierignore`'s two agent-prompt exclusions to their new path, so prettier keeps leaving those files' exact wording alone. Mark RD-30 done and check off its acceptance criteria; flip its README row to done. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
3.8 KiB
WP-11 — CIBG markup fidelity: application-link + absent-class triage
Status: done (98fd7e4)
Phase: 2 — CIBG fidelity
Done as part of the "CIBG UI fidelity pass" (user-requested, out of order). application-link now uses the real
.dashboard-block.applications li achain via ali[app-application-link]attribute selector (native<li>child, axe-clean); the invented.application/.application-titleclasses are gone (grep gate clean). The dashboard "Mijn aanvragen" renders as the CIBG Aanvragen component. Remaining absent-class triage for non-aanvragen components stays with WP-13's gap register.
Why
application-link.component.ts invents .application / .application-title — absent
from the vendored CSS. The real "aanvragen" pattern styles
.dashboard-block.applications li a with h3/.h3, and .subtitle/.status/.cta
scoped inside .applications. The invented classes mean the rows only look right by
accident of parent scoping, and .application-title is dead. A few other components use
classes that don't exist in the vendored build.
Read first
- https://designsystem.cibg.nl/componenten/aanvragen/
public/cibg-huisstijl/css/huisstijl.min.css(grep.applications,.breadcrumb, error-summary candidates)src/app/shared/ui/application-link/application-link.component.ts+application-list/application-list.component.tssrc/app/shared/layout/page-shell/page-shell.component.ts(.back),wizard-shell/wizard-shell.component.ts(.es-list/.es-title),src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.component.ts(.radio-option),shared/layout/breadcrumb/breadcrumb.component.ts
Decisions (pre-made, don't relitigate)
- application-list/link: rework markup to the documented
.dashboard-block.applicationsscoping chain; keep the component API (heading/subtitle/cta/to) unchanged. - For each remaining absent class: adopt a vendored pattern if one exists, else mark as CIBG-gap extension (marker format per WP-13; define inline if WP-13 hasn't run). This fallback is explicit so the WP can't stall on a missing upstream pattern.
- Wizard error summary: check whether CIBG's Foutmelding/Veldvalidatie pattern classes
are vendored; adopt if so, else mark as gap (the current behavior/a11y stays —
role="alert", focus management). - Breadcrumb:
.breadcrumbIS vendored — verify usage against CIBG Kruimelpad and annotate only; no rework expected.
Files
application-link.component.ts,application-list.component.ts(+ stories)page-shell.component.ts,wizard-shell.component.ts,delivery-channel-toggle.component.ts,breadcrumb.component.ts(annotations/markers or adopted patterns)src/app/registratie/ui/dashboard.page.ts(visual consumer — no code change expected)
Steps
- Rework application-list/link markup; delete
.application/.application-title. - Grep the vendored CSS for Foutmelding/Veldvalidatie-ish classes; adopt or mark.
- Triage
.backand.radio-option: adopt or mark. - Verify breadcrumb; add the "wraps vendored
.breadcrumb(CIBG Kruimelpad)" comment. - Eyeball the dashboard — a visual diff on "Wat wilt u doen?" is intended.
Acceptance criteria
grep -rn '"application"\|application-title' src/app→ empty (component selector aside).- Every invented class either replaced by a vendored pattern or carries the gap marker.
- Dashboard + wizard stories reviewed; axe green.
Verification
GREEN + npm run test-storybook:ci. Manual: npm start → dashboard ("Wat wilt u
doen?" list) + a wizard validation error (error summary).
Out of scope
Datablock adoption (WP-12); the full gap register (WP-13).
Risks
The intended dashboard visual diff needs human eyes — flag it in the session summary for the user.