Turn the interactive Storybook a11y addon into a build gate: - @storybook/test-runner + axe-playwright over the static build (.storybook/test-runner.ts reads the a11y tags from story context) - test-storybook / test-storybook:ci scripts; storybook-a11y CI job - triage: escape-hatch a11y.disable on stories whose display:contents wrapper splits <ul>/<li> or <dl>/<dt>/<dd> (structural, deferred to WP-11/WP-12, each with justification + cross-ref) - fix trivial violations: footer/wizard-shell contrast, text-input label, wizard stories missing provideApiClient Verified: broken story fails the gate; 133 stories pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/angular';
|
|
import { applicationConfig, moduleMetadata } from '@storybook/angular';
|
|
import { provideRouter } from '@angular/router';
|
|
import { ChoiceListComponent } from './choice-list.component';
|
|
import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
|
|
|
|
const meta: Meta<ChoiceListComponent> = {
|
|
title: 'Molecules/Choice List',
|
|
component: ChoiceListComponent,
|
|
decorators: [
|
|
applicationConfig({ providers: [provideRouter([])] }),
|
|
moduleMetadata({ imports: [ChoiceLinkComponent] }),
|
|
],
|
|
render: (args) => ({
|
|
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" />
|
|
</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/backlog/WP-11-markup-fidelity.md.
|
|
a11y: { disable: true },
|
|
},
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<ChoiceListComponent>;
|
|
|
|
export const Default: Story = { args: { heading: 'Maak een keuze' } };
|