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>
This commit is contained in:
@@ -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.',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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: [
|
||||
|
||||
Reference in New Issue
Block a user