ehoandClaude Opus 5
097e8468e0
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>
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/angular';
|
|
import { applicationConfig } from '@storybook/angular';
|
|
import { provideRouter } from '@angular/router';
|
|
import { AanvraagBlockComponent } from './aanvraag-block.component';
|
|
import { Aanvraag } from '@registratie/domain/aanvraag';
|
|
|
|
const base = {
|
|
id: 'a1',
|
|
type: 'registratie',
|
|
documentIds: [],
|
|
createdAt: '2026-06-28T10:00:00Z',
|
|
updatedAt: '2026-06-28T10:05:00Z',
|
|
submittedAt: '2026-06-28T10:05:00Z',
|
|
} satisfies Omit<Aanvraag, 'status'>;
|
|
|
|
const meta: Meta<AanvraagBlockComponent> = {
|
|
title: 'Domein/Registratie/Aanvraag Block',
|
|
component: AanvraagBlockComponent,
|
|
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
|
// 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>;
|
|
|
|
// 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 } } },
|
|
};
|