fix: keuzelijst rows become the <li> (RD-37)

app-choice-link rendered a component host between the keuzelijst <ul>
and its <li>. This broke the axe list/listitem rule for assistive
technology. Five story suppressions named WP-11 as the fix, but WP-11
closed with no open ticket left to own the defect.

choice-link now uses selector: 'li[app-choice-link]', the same
attribute-host pattern as application-link. The host carries the
keuzelijst__list-item class; the template drops its own <li>.
Position: relative stays on .keuzelijst__link so the stretched-link
overlay still resolves against the card, not the host.

aanvraag-block needed no component change: it renders a CIBG melding,
never an <li>. Only its story wrapped it in a <ul>, which is what axe
rejected. The wrapper is removed, and the four non-Concept stories are
deleted — the component's template only renders for status Concept, so
they rendered nothing.

All five a11y: { disable: true } suppressions are gone, with no
replacement. atomic-design.mdx now records that both molecules are the
<li>, kept separate for the vendored CSS they bind, not for list
semantics.

npm run ci --full passes, axe included.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/ssp/src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts

@@ -17,57 +17,17 @@ const meta: Meta<AanvraagBlockComponent> = {
   title: 'Domein/Registratie/Aanvraag Block',
   component: AanvraagBlockComponent,
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
-  render: (args) => ({
-    props: args,
-    // A row is an <li> — the keuzelijst styling needs the real list context.
-    template: `<ul class="keuzelijst__list"><app-aanvraag-block [aanvraag]="aanvraag" /></ul>`,
-  }),
-  parameters: {
-    // Structural: app-aanvraag-block's host sits between the keuzelijst <ul> and its <li>
-    // — axe's list/listitem rule needs them adjacent regardless of `display:contents`.
-    // WP-11 (CIBG markup fidelity) reworks this markup; see docs/project/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
+  // A Concept renders as a CIBG melding (block element), not a keuzelijst <li> — no <ul>
+  // wrapper. Production agrees: mijn-aanvragen.section.ts renders this block for concepten
+  // only, outside any list.
+  render: (args) => ({ props: args, template: `<app-aanvraag-block [aanvraag]="aanvraag" />` }),
 };
 export default meta;
 type Story = StoryObj<AanvraagBlockComponent>;
 
-// One story per status variant; the block renders its own body + actions.
-// A Concept renders as a CIBG melding (block element), not a keuzelijst <li> — no <ul> wrapper.
+// The whole template sits inside `@if (aanvraag().status.tag === 'Concept')`, so this is
+// the only status that renders anything. Submitted/resolved aanvragen render through
+// application-link, which has its own stories.
 export const Concept: Story = {
   args: { aanvraag: { ...base, status: { tag: 'Concept', stepIndex: 1, stepCount: 3 } } },
-  render: (args) => ({ props: args, template: `<app-aanvraag-block [aanvraag]="aanvraag" />` }),
-};
-export const InBehandelingAuto: Story = {
-  args: {
-    aanvraag: {
-      ...base,
-      status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: false },
-    },
-  },
-};
-export const InBehandelingManual: Story = {
-  args: {
-    aanvraag: {
-      ...base,
-      type: 'registratie',
-      status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: true },
-    },
-  },
-};
-export const Goedgekeurd: Story = {
-  args: { aanvraag: { ...base, status: { tag: 'Goedgekeurd', referentie: 'BIG-2026-456789' } } },
-};
-export const Afgewezen: Story = {
-  args: {
-    aanvraag: {
-      ...base,
-      type: 'herregistratie',
-      status: {
-        tag: 'Afgewezen',
-        referentie: 'BIG-2026-456789',
-        reden: 'Aanvraag afgewezen: geen gewerkte uren geregistreerd.',
-      },
-    },
-  },
 };

apps/ssp/src/app/registratie/ui/dashboard/wat-moet-ik-regelen.section.stories.ts

@@ -66,14 +66,6 @@ export const MetTaken: Story = {
       ],
     }),
   ],
-  parameters: {
-    // Structural: app-choice-link's host sits between the keuzelijst <ul> and its <li>
-    // — axe's list/listitem rule needs them adjacent regardless of `display:contents`.
-    // Same pre-existing gap as task-list.stories.ts and choice-list.stories.ts. WP-11
-    // (CIBG markup fidelity) reworks this markup; see
-    // docs/project/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export const NietsOpenstaand: Story = {
   decorators: [

docs/project/readable-codebase/RD-37-a11y-suppressions.md

@@ -0,0 +1,130 @@
+# RD-37 — Five a11y suppressions name a ticket that closed
+
+Status: done
+Phase: 5 — fix the docs that describe this flow
+
+## Why
+
+Five stories carry `a11y: { disable: true }`. Four of the reasons say "WP-11 (CIBG markup
+fidelity) reworks this markup". WP-11 is `Status: done`, and so is WP-13, the gap register that
+WP-11 handed its remainder to. No open ticket owns the defect. The README rule — "no check
+disabled without a reference to the ticket that removes it" — holds only in letter.
+
+RD-30 archives `docs/project/backlog/`. This ticket runs first, so the archive move does not
+rewrite five paths that must disappear.
+
+The defect is shipped, not story-only. `app-choice-link` renders a component host between the
+keuzelijst `<ul>` and its `<li>`. This breaks the axe `list`/`listitem` rule for assistive
+technology. `display: contents` does not repair it.
+
+## Read first
+
+- `docs/project/readable-codebase/PLAN.md`, phase 5 item 0 (line 790).
+- `libs/shared/src/ui/molecules/choice-link/choice-link.component.ts` — the defect.
+- `libs/shared/src/ui/molecules/application-link/application-link.component.ts:18` — the
+  precedent. WP-11 made the host **be** the `<li>`. That component is axe-clean today.
+- `libs/shared/docs/atomic-design.mdx:113` — the convergence table row that calls the split
+  deliberate.
+
+## The question this ticket had to answer first
+
+Does an `li[…]` attribute host still match the vendored CIBG keuzelijst CSS?
+
+**Yes.** Verified against `public/cibg-huisstijl/css/huisstijl.css`. Every keuzelijst rule keys
+off a bare class:
+
+```
+.keuzelijst__list{padding-left:0}
+.keuzelijst__list-item{list-style:none;margin-bottom:1.5rem;position:relative}
+.keuzelijst__link{…}
+.keuzelijst__link:after{…}   .keuzelijst__link:focus,.keuzelijst__link:hover{…}
+```
+
+There is no `ul > li` child combinator and no `li a` descendant chain. This is the difference
+from the aanvragen pattern, whose vendored chain **is** `.dashboard-block.applications li a`.
+An attribute host on the `<li>` therefore keeps every keuzelijst selector matching, as long as
+the class `keuzelijst__list-item` moves to the host element.
+
+## Decisions (pre-made, do not relitigate)
+
+1. **`choice-link` becomes `selector: 'li[app-choice-link]'`.** The host carries the class
+   through `host: { class: 'keuzelijst__list-item' }`. The template drops its outer `<li>`.
+   `:host { display: contents }` goes away, because the host is now the list item.
+2. **Keep `position: relative` on `.keuzelijst__link`.** The title is a `.stretched-link`. Its
+   `::after` overlay must resolve against the card, not against the `<li>`. Do not move that
+   rule to the host.
+3. **`aanvraag-block` needs no component change. Its suppression reason is wrong.** The
+   component renders a CIBG melding (`app-alert`), never an `<li>`. Only the story's meta
+   `render` wraps it in `<ul class="keuzelijst__list">`, and that wrapper is what axe rejects.
+   Production agrees: `mijn-aanvragen.section.ts:44` renders the block for `concepten_()` only,
+   outside any list. Delete the wrapper from the meta render.
+4. **Delete the four non-Concept stories in `aanvraag-block.stories.ts`.** The whole template
+   sits inside `@if (aanvraag().status.tag === 'Concept')`, so `InBehandelingAuto`,
+   `InBehandelingManual`, `Goedgekeurd` and `Afgewezen` render nothing at all. Keep `Concept`,
+   and give it the meta render. Submitted and resolved aanvragen render through
+   `application-link`, which has its own stories.
+5. **Correct `atomic-design.mdx:113`.** After this ticket both molecules **are** the `<li>`.
+   The pair stays separate because they bind different vendored patterns, not because of list
+   semantics. Rewrite that half of the cell; keep the verdict.
+6. **All five suppressions go.** No suppression, no replacement ticket. If `ci --full` still
+   reports a violation, stop and report it. Do not re-add a disable.
+
+## Files
+
+- `libs/shared/src/ui/molecules/choice-link/choice-link.component.ts` — host, class, template,
+  the header comment.
+- `libs/shared/src/ui/molecules/task-list/task-list.component.ts:25` — the one production call
+  site: `<app-choice-link …/>` becomes `<li app-choice-link …></li>`.
+- `libs/shared/src/ui/molecules/choice-link/choice-link.stories.ts` — call site + suppression.
+- `libs/shared/src/ui/molecules/choice-list/choice-list.stories.ts` — call sites + suppression.
+- `libs/shared/src/ui/molecules/task-list/task-list.stories.ts` — suppression.
+- `apps/ssp/src/app/registratie/ui/dashboard/wat-moet-ik-regelen.section.stories.ts` —
+  suppression.
+- `apps/ssp/src/app/registratie/ui/aanvraag-block/aanvraag-block.stories.ts` — wrapper, four
+  stories, suppression.
+- `libs/shared/docs/atomic-design.mdx` — the convergence row.
+
+## Steps
+
+1. Convert `choice-link` to the `li[…]` host.
+2. Update the one production call site and the two story templates. An attribute host needs a
+   closing tag: `<li app-choice-link …></li>`, not a self-closing element.
+3. Fix `aanvraag-block.stories.ts` per decisions 3 and 4.
+4. Delete all five `a11y: { disable: true }` blocks and their comments.
+5. Correct the `atomic-design.mdx` row.
+6. Run `npm run ci --full`.
+
+## Acceptance criteria
+
+- [x] No `a11y: { disable: true }` remains in `apps/` or `libs/`.
+- [x] `grep -rn "WP-11" apps libs` returns nothing that points at the archived backlog.
+- [x] `npm run ci --full` is green, axe included.
+- [x] The keuzelijst still looks unchanged: chevron, hover accent, focus accent, and the
+      non-interactive `--static` row.
+
+## Verification
+
+1. `npm run ci --full`.
+2. `npm run storybook` — Choice Link, Choice List, Task List and Wat Moet Ik Regelen run with
+   the a11y addon on. Check the three Choice Link stories by eye: `Navigatie`, `Actie` and
+   `NietInteractief` must keep their current appearance.
+3. `npm start`, open `http://localhost:4200/dashboard` — the "Wat moet ik regelen" list renders
+   as before, and each row is still clickable over its whole surface.
+
+## Out of scope
+
+- `application-link` and `application-list`. Both are already axe-clean.
+- The `--static` modifier and the CIBG-gap register. This ticket moves a host element; it adds
+  no new hand-rolled surface.
+
+## Risks
+
+1. **A self-closing attribute host silently renders nothing.** Angular needs
+   `<li app-choice-link></li>`. The build does not fail; the row disappears. Check the
+   dashboard by eye, per Verification step 3.
+2. **`stretched-link` covers the wrong box.** If `position: relative` lands on the host instead
+   of on `.keuzelijst__link`, the whole `<li>` becomes the click target, including its
+   `margin-bottom`. Keep the rule where it is.
+3. **The `choiceActions` slot must stay above the overlay.** It projects inside
+   `.keuzelijst__link` and relies on its own `position: relative; z-index: 2` at the call site.
+   The host move must not change the projection point.

docs/project/readable-codebase/README.md

@@ -131,7 +131,7 @@ two. Note that RD-15 exists because 22 abandoned agent worktrees are still on di
 | RD-34 | _(optional)_ `NO_SUBORGS`/`NO_TABLES` become `RemoteData.Empty`              | 11         |           | todo   |
 | RD-35 | _(optional, last, alone)_ upload `type:` discriminant to `tag:`              | 27         |           | todo   |
 | RD-36 | `ui/dashboard/` → `ui/overzicht-secties/` + 2 stale `dashboard.page` paths   | 04         | yes       | todo   |
-| RD-37 | **a11y:** 5 suppressions name a closed ticket — decide the `li[…]` host      | 01         | yes       | todo   |
+| RD-37 | **a11y:** 5 suppressions name a closed ticket — decide the `li[…]` host      | 01         | yes       | done   |
 | RD-38 | One member order for the 3 wizard containers + 2 pure extractions            | 22, 23     |           | done   |
 | RD-39 | **Bug:** the wizards' `seed` input never arrived (21 stories)                | 38         | yes       | done   |
 

libs/shared/docs/atomic-design.mdx

@@ -108,13 +108,13 @@ the next person doesn't spend an afternoon re-deciding. (Deliberate CIBG-specifi
 live in [CIBG gaps](?path=/docs/foundations-cibg-gap-register--docs); the FE⇄DS "same shape, different
 context" cases in [Domain-driven design](?path=/docs/foundations-domain-driven-design--docs).)
 
-| Pair                                                   | Why kept separate                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `choice-link` vs `application-link`                    | Share the same `to`/`clickable`/`activate` navigation triad, but bind **different vendored patterns** — CIBG _Keuzelijst_ (`.keuzelijst__link`, `.stretched-link`) vs _Aanvragen_ (`.dashboard-block.applications li a`) — with different list/host semantics (`app-choice-link` renders an inner `<li>`; `application-link` **is** the `<li>`). Merging would fight the vendored CSS. Extract the shared triad into a mixin only if it grows. |
-| `text-input` / `radio-group` / `checkbox`              | Share only the standard Angular **ControlValueAccessor** boilerplate (the `writeValue`/`registerOn*`/`setDisabledState` block). They render genuinely different controls, so they stay three atoms. A base CVA class is the only DRY move — a refactor, not a component merge, and not worth it at three.                                                                                                                                      |
-| `button variant="subtle"` (`.btn-link`) vs `app-link`  | A subtle button _looks_ like a link but is an **action** (`<button>`, emits click); `app-link` is **navigation** (`<a routerLink>`). Different semantics and a11y roles → keep both.                                                                                                                                                                                                                                                           |
-| `shell` / `page-shell` / `wizard-shell`                | Three distinct jobs that **compose**, not overlap: persistent app chrome (mounted once) → routed page body → the wizard form/step frame.                                                                                                                                                                                                                                                                                                       |
-| Raw `<h3>` in `application-link` vs the `heading` atom | The vendored `.applications li a h3` chain styles the **bare `<h3>`**; wrapping it in the `app-heading` host element would sit between the anchor and the h3 and can break that selector. This is the one sanctioned raw-heading; everywhere else uses `<app-heading [level]>`.                                                                                                                                                                |
+| Pair                                                   | Why kept separate                                                                                                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `choice-link` vs `application-link`                    | Share the same `to`/`clickable`/`activate` navigation triad, and both **are** the `<li>` (`selector: 'li[app-…]'`), but bind **different vendored patterns** — CIBG _Keuzelijst_ (`.keuzelijst__link`, `.stretched-link`) vs _Aanvragen_ (`.dashboard-block.applications li a`). Merging would fight the vendored CSS. Extract the shared triad into a mixin only if it grows. |
+| `text-input` / `radio-group` / `checkbox`              | Share only the standard Angular **ControlValueAccessor** boilerplate (the `writeValue`/`registerOn*`/`setDisabledState` block). They render genuinely different controls, so they stay three atoms. A base CVA class is the only DRY move — a refactor, not a component merge, and not worth it at three.                                                                      |
+| `button variant="subtle"` (`.btn-link`) vs `app-link`  | A subtle button _looks_ like a link but is an **action** (`<button>`, emits click); `app-link` is **navigation** (`<a routerLink>`). Different semantics and a11y roles → keep both.                                                                                                                                                                                           |
+| `shell` / `page-shell` / `wizard-shell`                | Three distinct jobs that **compose**, not overlap: persistent app chrome (mounted once) → routed page body → the wizard form/step frame.                                                                                                                                                                                                                                       |
+| Raw `<h3>` in `application-link` vs the `heading` atom | The vendored `.applications li a h3` chain styles the **bare `<h3>`**; wrapping it in the `app-heading` host element would sit between the anchor and the h3 and can break that selector. This is the one sanctioned raw-heading; everywhere else uses `<app-heading [level]>`.                                                                                                |
 
 Single-consumer shared blocks (e.g. `placeholder-chip`, `rich-text-editor`, `checkbox`, the
 `task-list`/`choice-list`/`choice-link` family) currently have one consumer each. They stay in

libs/shared/src/ui/molecules/choice-link/choice-link.component.ts

@@ -17,15 +17,17 @@ import { RouterLink } from '@angular/router';
     class — keuzelijst assumes every item IS a link — so a non-interactive row would
     otherwise inherit the chevron and hover accent too. The `--static` modifier below
     suppresses both for that case. `:focus-within` restores the focus accent that
-    `:focus` would have given the (no longer directly focused) card. */
+    `:focus` would have given the (no longer directly focused) card.
+
+    The host **is** the `<li>` (`selector: 'li[app-choice-link]'`), the same pattern as
+    `application-link` — a bare component element between the keuzelijst `<ul>` and its
+    `<li>` breaks axe's list/listitem rule for assistive technology. */
 @Component({
-  selector: 'app-choice-link',
+  selector: 'li[app-choice-link]',
   imports: [RouterLink],
+  host: { class: 'keuzelijst__list-item' },
   styles: [
     `
-      :host {
-        display: contents;
-      }
       .keuzelijst__link {
         position: relative;
       }
@@ -43,23 +45,21 @@ import { RouterLink } from '@angular/router';
     `,
   ],
   template: `
-    <li class="keuzelijst__list-item">
-      <div class="keuzelijst__link" [class.keuzelijst__link--static]="!to() && !clickable()">
-        <h3 class="keuzelijst__header">
-          @if (to()) {
-            <a class="stretched-link" [routerLink]="to()">{{ heading() }}</a>
-          } @else if (clickable()) {
-            <a class="stretched-link" href="#" (click)="onActivate($event)">{{ heading() }}</a>
-          } @else {
-            {{ heading() }}
-          }
-        </h3>
-        @if (instructions()) {
-          <p class="keuzelijst__instructions">{{ instructions() }}</p>
+    <div class="keuzelijst__link" [class.keuzelijst__link--static]="!to() && !clickable()">
+      <h3 class="keuzelijst__header">
+        @if (to()) {
+          <a class="stretched-link" [routerLink]="to()">{{ heading() }}</a>
+        } @else if (clickable()) {
+          <a class="stretched-link" href="#" (click)="onActivate($event)">{{ heading() }}</a>
+        } @else {
+          {{ heading() }}
         }
-        <ng-content select="[choiceActions]" />
-      </div>
-    </li>
+      </h3>
+      @if (instructions()) {
+        <p class="keuzelijst__instructions">{{ instructions() }}</p>
+      }
+      <ng-content select="[choiceActions]" />
+    </div>
   `,
 })
 export class ChoiceLinkComponent {

libs/shared/src/ui/molecules/choice-link/choice-link.stories.ts

@@ -9,15 +9,9 @@ const meta: Meta<ChoiceLinkComponent> = {
   decorators: [applicationConfig({ providers: [provideRouter([])] })],
   render: (args) => ({
     props: args,
-    // Rows are <li>s — a real list gives them their normal layout in the story.
-    template: `<ul class="keuzelijst__list"><app-choice-link [heading]="heading" [instructions]="instructions" [to]="to" [clickable]="clickable" /></ul>`,
+    // The host is the <li> itself — a real <ul> gives it its normal layout in the story.
+    template: `<ul class="keuzelijst__list"><li app-choice-link [heading]="heading" [instructions]="instructions" [to]="to" [clickable]="clickable"></li></ul>`,
   }),
-  parameters: {
-    // Structural: app-choice-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/project/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ChoiceLinkComponent>;

libs/shared/src/ui/molecules/choice-list/choice-list.stories.ts

@@ -15,15 +15,10 @@ const meta: Meta<ChoiceListComponent> = {
     props: args,
     template: `
       <app-choice-list [heading]="heading">
-        <app-choice-link heading="Ik heb een Nederlands diploma" instructions="U kunt direct uw registratie aanvragen." to="/registreren" />
-        <app-choice-link heading="Ik heb een buitenlands diploma" instructions="Uw diploma moet eerst officieel erkend worden." clickable="true" />
+        <li app-choice-link heading="Ik heb een Nederlands diploma" instructions="U kunt direct uw registratie aanvragen." to="/registreren"></li>
+        <li app-choice-link heading="Ik heb een buitenlands diploma" instructions="Uw diploma moet eerst officieel erkend worden." clickable="true"></li>
       </app-choice-list>`,
   }),
-  parameters: {
-    // Structural: app-choice-link's host sits between the <ul> and its <li> —
-    // fixed by the WP-11 markup rework. See docs/project/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ChoiceListComponent>;

libs/shared/src/ui/molecules/task-list/task-list.component.ts

@@ -22,7 +22,7 @@ export interface TaskItem {
   template: `
     <app-choice-list [heading]="listHeading()">
       @for (t of tasks(); track t.title) {
-        <app-choice-link [heading]="t.title" [instructions]="t.description" [to]="t.to" />
+        <li app-choice-link [heading]="t.title" [instructions]="t.description" [to]="t.to"></li>
       }
     </app-choice-list>
   `,

libs/shared/src/ui/molecules/task-list/task-list.stories.ts

@@ -11,12 +11,6 @@ const meta: Meta<TaskListComponent> = {
     props: args,
     template: `<app-task-list [listHeading]="listHeading" [tasks]="tasks" />`,
   }),
-  parameters: {
-    // Structural: app-choice-link's host sits between the keuzelijst <ul> and its <li>
-    // — axe's list/listitem rule needs them adjacent regardless of `display:contents`.
-    // WP-11 (CIBG markup fidelity) reworks this markup; see docs/project/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<TaskListComponent>;