feat(cibg): WP-11 — render "Mijn aanvragen" as the CIBG Aanvragen component

- application-link switches to a `li[app-application-link]` attribute selector
  (native <li> child of the <ul> — axe-clean list) and drops the invented,
  dead `.application` / `.application-title` classes for the real vendored
  `.dashboard-block.applications li a` chain (h3.h3 / .subtitle / .status / .cta).
  Content stacks in a flex column; a non-navigating row mirrors the card surface
  from tokens. Re-enables a11y on the application-link/list stories.
- Dashboard "Mijn aanvragen" now renders through app-application-list +
  <li app-application-link> rows (was a keuzelijst), mapped by a new pure
  submittedRow() view helper (+ spec). Concepts stay the resumable melding.
- aanvraag-block is now concept-only (submitted mapping moved to aanvraag-view).

WP-11 grep gate clean. GREEN: lint, tokens, 181 tests, build, 136 axe stories.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/registratie/domain/aanvraag-view.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { submittedRow, TYPE_LABELS } from './aanvraag-view';
+import { Aanvraag } from './aanvraag';
+
+const base = { id: '1', type: 'herregistratie' as const, documentIds: [], createdAt: '', updatedAt: '', submittedAt: '2024-05-12' };
+
+describe('submittedRow', () => {
+  it('InBehandeling: reference + submit date; manual note only when manual', () => {
+    const auto = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: false } } as Aanvraag);
+    expect(auto.heading).toBe(TYPE_LABELS.herregistratie);
+    expect(auto.status).toContain('R1');
+    expect(auto.status).toContain('12 mei 2024');
+    expect(auto.subtitle).toBe('');
+
+    const manual = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: true } } as Aanvraag);
+    expect(manual.subtitle).not.toBe('');
+  });
+
+  it('Afgewezen: reason becomes the subtitle', () => {
+    const row = submittedRow({ ...base, status: { tag: 'Afgewezen', referentie: 'R2', reden: 'Onvoldoende uren' } } as Aanvraag);
+    expect(row.status).toContain('R2');
+    expect(row.subtitle).toBe('Onvoldoende uren');
+  });
+
+  it('Goedgekeurd: reference only', () => {
+    const row = submittedRow({ ...base, status: { tag: 'Goedgekeurd', referentie: 'R3' } } as Aanvraag);
+    expect(row.status).toContain('R3');
+    expect(row.subtitle).toBe('');
+  });
+});

src/app/registratie/domain/aanvraag-view.ts

@@ -0,0 +1,44 @@
+import { Aanvraag, AanvraagType } from './aanvraag';
+
+/** View-model mapping for an aanvraag: type → label, and a submitted aanvraag →
+    the CIBG "aanvragen" row fields (heading/status/subtitle). Pure, no Angular —
+    the UI renders these, it does not derive them. */
+
+export const TYPE_LABELS: Record<AanvraagType, string> = {
+  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,
+  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,
+  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
+};
+
+export interface AanvraagRow {
+  heading: string;
+  /** Reference + submit-date line (the `.status` line of an aanvragen row). */
+  status: string;
+  /** Secondary note: manual-review notice or rejection reason. */
+  subtitle: string;
+}
+
+function formatNL(iso?: string): string {
+  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
+}
+
+/** Fields for a submitted aanvraag's row (Concept has no row — it renders as a
+    resumable melding, see aanvraag-block). */
+export function submittedRow(a: Aanvraag): AanvraagRow {
+  const s = a.status;
+  const heading = TYPE_LABELS[a.type];
+  switch (s.tag) {
+    case 'Concept':
+      return { heading, status: '', subtitle: '' };
+    case 'InBehandeling':
+      return {
+        heading,
+        status: $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(a.submittedAt)}:datum:`,
+        subtitle: s.manual ? $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.` : '',
+      };
+    case 'Goedgekeurd':
+      return { heading, status: $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`, subtitle: '' };
+    case 'Afgewezen':
+      return { heading, status: $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`, subtitle: s.reden };
+  }
+}

src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts

@@ -1,28 +1,19 @@
 import { Component, computed, input, output } from '@angular/core';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
+import { Aanvraag } from '@registratie/domain/aanvraag';
-import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
+import { TYPE_LABELS } from '@registratie/domain/aanvraag-view';
 import { blockActions } from '@registratie/domain/block-actions';
 
-const TYPE_LABELS: Record<AanvraagType, string> = {
+/** Organism: a resumable Concept ("lopende aanvraag") on the dashboard, rendered as
-  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,
+    a CIBG "melding" (warning) with its actions — verwijderen as a link, aanvraag
-  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,
+    openen as a button. Which actions show is driven by the pure `blockActions(status)`;
-  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
+    the block only renders. Submitted/resolved aanvragen are NOT rendered here — they
-};
+    render as CIBG "aanvragen" rows (see application-link + aanvraag-view). */
-
-/** Organism: one application on the dashboard. A resumable Concept ("lopende
-    aanvraag") renders as a CIBG "melding" (warning) with its actions — verwijderen
-    as a link, aanvraag openen as a button; a submitted/resolved status renders as a
-    plain keuzelijst card. Which actions show is driven by the pure
-    `blockActions(status)`; the block only renders. NOTE: the caller places the two
-    shapes differently — a Concept melding is a block element, the rest are `<li>`s
-    that must sit inside a keuzelijst `<ul>` (see dashboard.page.ts). */
 @Component({
   selector: 'app-aanvraag-block',
-  imports: [ButtonComponent, AlertComponent, ChoiceLinkComponent],
+  imports: [ButtonComponent, AlertComponent],
   styles: [`
-    :host{display:contents} /* see choice-link.component.ts (keeps <li> a direct <ul> child) */
     .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}
   `],
   template: `
@@ -39,8 +30,6 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
           }
         </div>
       </app-alert>
-    } @else {
-      <app-choice-link [heading]="typeLabel()" [instructions]="instructions()" />
     }
   `,
 })
@@ -67,30 +56,6 @@ export class AanvraagBlockComponent {
     if (s.tag !== 'Concept') return '';
     return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatNL(this.deadline())}:datum:.`;
   });
-
-  // Status-tag → the choice's description line (the UI's mapping, not a domain rule).
-  private statusText = computed(() => {
-    const s = this.aanvraag().status;
-    switch (s.tag) {
-      case 'Concept': return '';
-      case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;
-      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;
-      case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;
-    }
-  });
-  // Secondary note appended to the status line, when there's one to show.
-  private subtitle = computed(() => {
-    const s = this.aanvraag().status;
-    if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;
-    if (s.tag === 'Afgewezen') return s.reden;
-    return '';
-  });
-  // The keuzelijst has one description paragraph — combine status + secondary note.
-  protected instructions = computed(() => {
-    const status = this.statusText();
-    const sub = this.subtitle();
-    return sub ? `${status} ${sub}` : status;
-  });
 }
 
 function formatNL(iso?: string): string {

src/app/registratie/ui/dashboard.page.ts

@@ -9,7 +9,6 @@ import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
 import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
 import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
 import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
-import { ChoiceListComponent } from '@shared/ui/choice-list/choice-list.component';
 import { ASYNC } from '@shared/ui/async/async.component';
 import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
 import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';
@@ -18,6 +17,7 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
 import { ApplicationsStore } from '@registratie/application/applications.store';
 import { Registration } from '@registratie/domain/registration';
 import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
+import { submittedRow } from '@registratie/domain/aanvraag-view';
 import { tasksFromProfile } from '@registratie/domain/tasks';
 
 /** Page:"Mijn overzicht" — the portal home, following the NL Design System
@@ -27,7 +27,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
   imports: [
     PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
     DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
-    ChoiceListComponent, ...ASYNC,
+    ...ASYNC,
     RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
   ],
   template: `
@@ -39,11 +39,13 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                 <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
               }
               @if (ingediend().length) {
-                <app-choice-list i18n-heading="@@dashboard.mijnAanvragen" heading="Mijn aanvragen" class="app-section">
+                <app-heading [level]="2" class="app-section" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
+                <app-application-list>
                   @for (a of ingediend(); track a.id) {
-                    <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" />
+                    @let row = submittedRow(a);
+                    <li app-application-link animate.enter="app-item-enter" animate.leave="app-item-leave" [heading]="row.heading" [status]="row.status" [subtitle]="row.subtitle"></li>
                   }
-                </app-choice-list>
+                </app-application-list>
               }
             </section>
           }
@@ -103,7 +105,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
             <app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
             <app-application-list class="app-section">
               @for (a of acties; track a.to) {
-                <app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to" />
+                <li app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to"></li>
               }
             </app-application-list>
           </section>
@@ -116,6 +118,9 @@ export class DashboardPage {
   private apps = inject(ApplicationsStore);
   private router = inject(Router);
 
+  /** Pure view mapping for a submitted aanvraag → CIBG aanvragen-row fields. */
+  protected submittedRow = submittedRow;
+
   constructor() {
     // Re-fetch on each visit so server-computed auto-approval transitions show up
     // (Concept → In behandeling → Goedgekeurd after the processing window).

src/app/shared/ui/application-link/application-link.component.ts

@@ -2,33 +2,40 @@ import { Component, input, output } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
-/** Molecule: one row in a CIBG Huisstijl "aanvragen" list — `<li><a class="application">`
+/** Molecule: one row in a CIBG Huisstijl "aanvragen" list
-    with a title, optional subtitle/status/cta (see application-list.component.ts).
+    (designsystem.cibg.nl/componenten/aanvragen) — a white card-link styled by the
-    Renders a plain (non-interactive) row when there's nothing to navigate to — the
+    vendored `.dashboard-block.applications li a` chain (bg, chevron, link-blue `h3`),
-    chevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot
+    with an optional `.subtitle`/`.status`/`.cta`. Used on an `<li>` so the `<ul>`'s
-    projects a sibling action (e.g. "Annuleren") after the anchor — a button can't
+    direct child is a native `<li>` (keeps the list axe-clean — a bare custom element
-    nest inside the anchor itself. */
+    between `<ul>` and its `<li>` trips axe's list rule regardless of `display:contents`).
+    A non-navigating row renders a `<div>` (the vendored chain only styles `<a>`, so
+    that surface is mirrored from tokens). A `[applicationActions]` slot projects a
+    sibling action after the anchor — a button can't nest inside the anchor itself. */
 @Component({
-  selector: 'app-application-link',
+  selector: 'li[app-application-link]',
   imports: [RouterLink, NgTemplateOutlet],
-  // display:contents so the <li> becomes a real DOM/accessibility-tree child of the
+  styles: [`
-  // parent <ul> — a wrapper host between them can break list semantics for AT.
+    /* The vendored .applications li a surface only styles <a>; mirror it from tokens
-  styles: [`:host{display:contents}`],
+       for a non-navigating (informational) row so the card looks consistent. */
+    .static-row{display:flex;background:var(--rhc-color-wit);border-block-end:.065rem solid var(--rhc-color-border-subtle);padding:.75rem 2rem .75rem 1rem}
+    .content{flex:1 1 auto;min-inline-size:0}
+    .cta{margin-inline-start:auto;align-self:center}
+  `],
   template: `
-    <li>
+    @if (to()) {
-      @if (to()) {
+      <a [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
-        <a class="application" [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
+    } @else if (clickable()) {
-      } @else if (clickable()) {
+      <a href="#" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
-        <a href="#" class="application" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
+    } @else {
-      } @else {
+      <div class="static-row"><ng-container [ngTemplateOutlet]="body" /></div>
-        <div><ng-container [ngTemplateOutlet]="body" /></div>
+    }
-      }
+    <ng-content select="[applicationActions]" />
-      <ng-content select="[applicationActions]" />
-    </li>
     <ng-template #body>
-      <h3 class="application-title">{{ heading() }}</h3>
+      <div class="content">
-      @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
+        <h3 class="h3">{{ heading() }}</h3>
-      @if (status()) { <div class="status">{{ status() }}</div> }
+        @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
+        @if (status()) { <div class="status">{{ status() }}</div> }
+      </div>
       @if (cta()) { <div class="cta">{{ cta() }}</div> }
     </ng-template>
   `,

src/app/shared/ui/application-link/application-link.stories.ts

@@ -9,15 +9,9 @@ const meta: Meta<ApplicationLinkComponent> = {
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({
     props: args,
-    // Rows are <li>s — a real list gives them their normal layout in the story.
+    // Rows are <li>s in the "aanvragen" list — a real <ul> gives them their layout.
-    template: `<ul class="list-unstyled"><app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable" /></ul>`,
+    template: `<div class="dashboard-block applications"><ul class="list-unstyled"><li app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable"></li></ul></div>`,
   }),
-  parameters: {
-    // Structural: app-application-link's host sits between the <ul> and its <li> —
-    // axe's list/listitem rule requires them adjacent regardless of `display:contents`.
-    // WP-11 (CIBG markup fidelity) reworks this markup; see docs/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ApplicationLinkComponent>;

src/app/shared/ui/application-list/application-list.stories.ts

@@ -14,16 +14,11 @@ const meta: Meta<ApplicationListComponent> = {
   render: () => ({
     template: `
       <app-application-list>
-        <app-application-link heading="Inschrijving" status="Stap 2 van 3" cta="Verder gaan" clickable="true" />
+        <li app-application-link heading="Inschrijving" status="Stap 2 van 3" cta="Verder gaan" clickable="true"></li>
-        <app-application-link heading="Herregistratie" status="Referentie 2024-00123 · ingediend op 12 mei 2024" />
+        <li app-application-link heading="Herregistratie" status="Referentie 2024-00123 · ingediend op 12 mei 2024"></li>
-        <app-application-link heading="Inschrijven" subtitle="Schrijf u in in het BIG-register." to="/registreren" />
+        <li app-application-link heading="Inschrijven" subtitle="Schrijf u in in het BIG-register." to="/registreren"></li>
       </app-application-list>`,
   }),
-  parameters: {
-    // Structural: app-application-link's host sits between the <ul> and its <li> —
-    // fixed by the WP-11 markup rework. See docs/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ApplicationListComponent>;