From e22327a8fd0199bf46c04e746e4035f5458b266d Mon Sep 17 00:00:00 2001
From: Van Nguyen <nguyenthanhvan1902@gmail.com>
Date: Wed, 21 Oct 2026 00:03:18 +0700
Subject: [PATCH] fix: label the built-in renderers in every adapter

A field without a registered renderer rendered a bare control with no label,
so it had no accessible name; the Storybook a11y addon flagged every story.

- React, Vue and Svelte draw <label for> (class dfk-field-label) before a
  built-in control and wrap label, control and message in div.dfk-field,
  which keeps them together in grid layouts and the control stable
- radio groups get role="radiogroup" and aria-labelledby on their caption
- Angular draws the label in DynamicInput and marks its host dfk-field; a
  form store's error now sets aria-describedby on the control too
- core gains makeLabelId; registered renderers are unchanged
- label tests per adapter; the Storybook runs axe over every story
---
 .changeset/default-renderer-labels.md         |   9 ++
 README.md                                     |   2 +-
 docs/MIGRATING.md                             |  38 +++++
 packages/angular/README.md                    |   5 +
 .../angular/src/components/DynamicInput.ts    |  49 ++++++-
 packages/angular/src/components/FieldInput.ts |   9 +-
 packages/angular/src/public-api.ts            |   1 +
 .../test/defaultRendererLabels.spec.ts        | 122 ++++++++++++++++
 packages/core/src/rendererProps.ts            |   9 ++
 packages/core/test/rendererProps.test.ts      |   8 ++
 packages/react/README.md                      |   8 ++
 .../react/src/components/DynamicInput.tsx     |  42 ++++--
 packages/react/src/defaultRenderers.tsx       |  12 +-
 packages/react/src/index.ts                   |   1 +
 .../react/test/defaultRendererLabels.test.tsx | 111 +++++++++++++++
 packages/svelte/README.md                     |   5 +-
 .../svelte/src/components/DynamicInput.svelte |  45 ++++--
 packages/svelte/src/index.ts                  |   1 +
 .../svelte/src/renderers/RadioRenderer.svelte |   4 +-
 .../svelte/test/defaultRendererLabels.test.ts | 113 +++++++++++++++
 packages/vue/README.md                        |   8 ++
 packages/vue/src/components/DynamicInput.ts   |  53 ++++---
 packages/vue/src/defaultRenderers.ts          |   6 +-
 packages/vue/src/index.ts                     |   1 +
 .../vue/test/defaultRendererLabels.test.ts    | 131 ++++++++++++++++++
 storybook/package-lock.json                   |   1 +
 storybook/package.json                        |   1 +
 storybook/test/a11y.test.tsx                  |  32 +++++
 28 files changed, 777 insertions(+), 50 deletions(-)
 create mode 100644 .changeset/default-renderer-labels.md
 create mode 100644 packages/angular/test/defaultRendererLabels.spec.ts
 create mode 100644 packages/react/test/defaultRendererLabels.test.tsx
 create mode 100644 packages/svelte/test/defaultRendererLabels.test.ts
 create mode 100644 packages/vue/test/defaultRendererLabels.test.ts
 create mode 100644 storybook/test/a11y.test.tsx

diff --git a/.changeset/default-renderer-labels.md b/.changeset/default-renderer-labels.md
new file mode 100644
index 0000000..7236b6b
--- /dev/null
+++ b/.changeset/default-renderer-labels.md
@@ -0,0 +1,9 @@
+---
+'@dynamic-field-kit/core': minor
+'@dynamic-field-kit/react': patch
+'@dynamic-field-kit/vue': patch
+'@dynamic-field-kit/svelte': patch
+'@dynamic-field-kit/angular': patch
+---
+
+Built-in renderers are labelled. A field without a registered renderer now renders its `label` as a `<label for>` tied to the control (`id="{fieldId}-label"`, class `dfk-field-label`), so the control has an accessible name; a radio group gets `role="radiogroup"` and `aria-labelledby` pointing at its caption. In React, Vue and Svelte the label, the control and the error message sit in one `<div class="dfk-field">`, which keeps them together in a grid layout; in Angular the `<dfk-dynamic-input>` element that already holds them gets the class `dfk-field`. CSS that selected a built-in control as a direct child of the layout needs updating (see MIGRATING). Registered renderers are unaffected. In Angular, an error passed in by a form store now also sets `aria-describedby` on the control. Core gains `makeLabelId(id)`.
diff --git a/README.md b/README.md
index 0a5e754..8a2a42f 100644
--- a/README.md
+++ b/README.md
@@ -464,7 +464,7 @@ All framework adapters (`react`, `vue`, `angular`, `svelte`) ship with **built-i
 `text` · `number` · `password` · `email` · `textarea` · `checkbox` · `select` ·
 `radio` · `range` · `file` · `date` · `time` · `datetime-local` · `switch`
 
-If you do not register a custom component for a type, the library automatically renders a clean, accessible HTML5 input with support for labels, placeholders, disabled states, options, and error states.
+If you do not register a custom component for a type, the library automatically renders a clean, accessible HTML5 input with support for labels, placeholders, disabled states, options, and error states. The label is a `<label for>` tied to the control (a radio group is named through `aria-labelledby`), and the label, control and error message are wrapped in one `<div class="dfk-field">`.
 
 Every key above is also a `FieldTypeMap` entry, so `type: 'switch'` typechecks
 out of the box. The map itself is reachable if you need to wrap or inspect a
diff --git a/docs/MIGRATING.md b/docs/MIGRATING.md
index f0dabb9..996daac 100644
--- a/docs/MIGRATING.md
+++ b/docs/MIGRATING.md
@@ -3,6 +3,44 @@
 Version-by-version tables of what changed and what to do about it. For the full
 list of changes see each package's `CHANGELOG.md`.
 
+## 1.11.x → 1.12.0
+
+### Default renderers are labelled, and wrapped
+
+If a field uses the built-in renderers (no renderer registered for its type),
+it now renders
+
+```html
+<div class="dfk-field">
+  <label id="{fieldId}-label" for="{fieldId}" class="dfk-field-label"
+    >Email</label
+  >
+  <input id="{fieldId}" type="email" />
+  <div id="{fieldId}-error" class="dfk-field-error" role="alert">
+    Invalid email
+  </div>
+</div>
+```
+
+Before, the control (and its message) were direct children of the layout, and
+there was no label at all, so the control had no accessible name. What moved:
+
+- **A wrapper.** The control is inside `.dfk-field`, which keeps its label and
+  message in the same cell of a grid layout. CSS that picked the control as a
+  direct child of the layout, such as `.my-grid > input`, now needs
+  `.my-grid > .dfk-field > input` or a class of your own. Angular adds no
+  element: the `<dfk-dynamic-input>` that already held them gets the class
+  `dfk-field`.
+- **A label**, only when the field has a `label`. Hide it visually with your
+  own CSS if your design shows the label elsewhere, but keep it in the page.
+- **Radio groups** have `role="radiogroup"` and `aria-labelledby` pointing at a
+  `<span class="dfk-field-label">` caption (a group cannot take `<label for>`).
+- **Angular:** a form store's errors now set `aria-describedby` on the control
+  too; it used to follow only the errors of the field's own rules.
+
+Registered renderers are **not** affected: no wrapper, no label. Core gains
+`makeLabelId(id)`, the id the label carries.
+
 ## 1.6.x → 1.7.0
 
 Everything here is additive or a bugfix. No API was removed, and no peer range
diff --git a/packages/angular/README.md b/packages/angular/README.md
index 4f0cd2c..f85e2f4 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -273,6 +273,11 @@ it, so the form showed nothing. A registered custom renderer is unaffected — t
 node is emitted only where a default was used, so you never get two copies. Hide
 it with `.dfk-field-error { display: none }` if you want the old silence.
 
+A built-in control is also labelled: when the field has a `label`,
+`<label id="{fieldId}-label" for="{fieldId}" class="dfk-field-label">` comes
+before it, and the `<dfk-dynamic-input>` element that holds the label, control
+and message gets the class `dfk-field`. A registered renderer is untouched.
+
 ## DevTools
 
 ```html
diff --git a/packages/angular/src/components/DynamicInput.ts b/packages/angular/src/components/DynamicInput.ts
index 7286405..967aa5f 100644
--- a/packages/angular/src/components/DynamicInput.ts
+++ b/packages/angular/src/components/DynamicInput.ts
@@ -16,7 +16,12 @@ import {
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
-import { FieldTypeKey, makeErrorId, Properties } from '@dynamic-field-kit/core';
+import {
+  FieldTypeKey,
+  makeErrorId,
+  makeLabelId,
+  Properties,
+} from '@dynamic-field-kit/core';
 import { Subscription } from 'rxjs';
 import { FIELD_REGISTRY } from '../fieldRegistryToken';
 import { BaseInputComponent } from './BaseInput';
@@ -56,14 +61,36 @@ const KNOWN_PROPS = [
 type BuiltInControl =
   HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
+/** The types the built-in fallback draws a control for (see createBuiltIn). */
+const BUILT_IN_TYPES: ReadonlySet<string> = new Set([
+  'text',
+  'password',
+  'email',
+  'number',
+  'textarea',
+  'checkbox',
+  'select',
+]);
+
 @Component({
   selector: 'dfk-dynamic-input',
   standalone: true,
   imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  // A built-in control is bare, so its label is drawn here, tied to it by
+  // `for`. The host element keeps label, control and message together, as
+  // the `.dfk-field` wrapper does in the other adapters.
+  host: { '[class.dfk-field]': 'isBuiltIn()' },
   // *ngIf rather than @if: the peer range starts at Angular 16, and the
   // built-in control flow block syntax is 17+.
-  template: `<div #host style="display: contents;"></div>
+  template: `<label
+      *ngIf="showDefaultLabel()"
+      [id]="labelNodeId()"
+      [attr.for]="id"
+      class="dfk-field-label"
+      >{{ label }}</label
+    >
+    <div #host style="display: contents;"></div>
     <div
       *ngIf="showDefaultError()"
       [id]="errorNodeId()"
@@ -191,6 +218,24 @@ export class DynamicInput
     return makeErrorId(this.id ?? '');
   }
 
+  /** The id of the label drawn for a built-in control. See core's `makeLabelId`. */
+  labelNodeId(): string {
+    return makeLabelId(this.id ?? '');
+  }
+
+  /**
+   * Whether the built-in fallback draws this field's control. Asks the
+   * registry directly, for the reason given on `showDefaultError`.
+   */
+  isBuiltIn(): boolean {
+    return !this.registry.get(this.type) && BUILT_IN_TYPES.has(this.type);
+  }
+
+  /** A registered renderer owns its label; a built-in control gets one here. */
+  showDefaultLabel(): boolean {
+    return Boolean(this.isBuiltIn() && this.label && this.id);
+  }
+
   /** `error` may arrive as a bare string, so index 0 would be a character. */
   firstError(): string | undefined {
     return Array.isArray(this.error) ? this.error[0] : this.error;
diff --git a/packages/angular/src/components/FieldInput.ts b/packages/angular/src/components/FieldInput.ts
index 5140837..11e79f6 100644
--- a/packages/angular/src/components/FieldInput.ts
+++ b/packages/angular/src/components/FieldInput.ts
@@ -16,6 +16,7 @@ import {
   isAsyncOptions,
   type OptionsLoader,
   type OptionsState,
+  makeErrorId,
   makeFieldId,
   FieldDescription,
   Properties,
@@ -188,11 +189,12 @@ export class FieldInput implements OnChanges, OnDestroy {
     }
 
     const data = this.data ?? { [field.name]: this.value };
+    const id = makeFieldId(field, this.idPrefix);
     const base = buildFieldRendererProps({
       fieldDescription: field,
       data,
       rootData: this.rootData,
-      id: makeFieldId(field, this.idPrefix),
+      id,
       touched: this.touched,
       dirty: this.dirty,
       optionsState: this.optionsState,
@@ -211,6 +213,11 @@ export class FieldInput implements OnChanges, OnDestroy {
       readOnly: this.readOnly ?? base.readOnly,
       error,
       ariaInvalid: Boolean(error),
+      // Follows `error` as `ariaInvalid` does: an error the host passed in
+      // (a form store's) has a message node too, and the control must point
+      // at it. Taken from `base`, it pointed at nothing whenever the field
+      // description's own rules found no error.
+      ariaDescribedBy: error ? makeErrorId(id) : undefined,
     };
   }
 }
diff --git a/packages/angular/src/public-api.ts b/packages/angular/src/public-api.ts
index d93ccd4..2748c3c 100644
--- a/packages/angular/src/public-api.ts
+++ b/packages/angular/src/public-api.ts
@@ -47,6 +47,7 @@ export type {
 export {
   buildFieldRendererProps,
   makeErrorId,
+  makeLabelId,
   makeFieldId,
   FIELD_RENDERER_PROP_KEYS,
 } from '@dynamic-field-kit/core';
diff --git a/packages/angular/test/defaultRendererLabels.spec.ts b/packages/angular/test/defaultRendererLabels.spec.ts
new file mode 100644
index 0000000..fad7164
--- /dev/null
+++ b/packages/angular/test/defaultRendererLabels.spec.ts
@@ -0,0 +1,122 @@
+import { Component, Input } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import type { FieldDescription } from '@dynamic-field-kit/core';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { MultiFieldInput } from '../src/components/MultiFieldInput';
+import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
+import { makeRegistry, TextRendererComponent } from './helpers/renderers';
+
+// The registry's field types are open-ended; these tests use plain strings.
+const list = (fields: unknown[]) => fields as FieldDescription[];
+
+@Component({
+  selector: 'dfk-test-label-host',
+  standalone: true,
+  imports: [MultiFieldInput],
+  template: `
+    <dfk-multi-field-input
+      [fieldDescriptions]="fields"
+      [properties]="{}"
+      [errors]="errors"
+      idPrefix="f"
+    ></dfk-multi-field-input>
+  `,
+})
+class HostComponent {
+  @Input() fields: FieldDescription[] = [];
+  @Input() errors?: Record<string, string[]>;
+}
+
+// The types the Angular fallback draws a control for.
+const builtIn = [
+  'text',
+  'password',
+  'email',
+  'number',
+  'textarea',
+  'checkbox',
+  'select',
+];
+
+/** The control a label names, the way assistive technology finds it. */
+function byLabelText(root: HTMLElement, text: string): HTMLElement {
+  const label = Array.from(root.querySelectorAll('label')).find(
+    (element) => element.textContent?.trim() === text,
+  );
+  const control = label?.htmlFor
+    ? root.querySelector<HTMLElement>(`[id="${label.htmlFor}"]`)
+    : null;
+  if (!control) {
+    throw new Error(`no control labelled "${text}"`);
+  }
+  expect(
+    Array.from((control as HTMLInputElement).labels ?? []).includes(label!),
+  ).toBe(true);
+  return control;
+}
+
+describe('built-in controls', () => {
+  let registry: ReturnType<typeof makeRegistry>;
+
+  beforeEach(() => {
+    registry = makeRegistry();
+    TestBed.configureTestingModule({
+      imports: [HostComponent],
+      providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
+    });
+  });
+
+  function mount(
+    fields: FieldDescription[],
+    errors?: Record<string, string[]>,
+  ): HTMLElement {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentRef.setInput('fields', fields);
+    fixture.componentRef.setInput('errors', errors);
+    fixture.detectChanges();
+    // The control is drawn after the view is checked; check it once more.
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    return fixture.nativeElement as HTMLElement;
+  }
+
+  it.each(builtIn)('label a %s control with <label for>', (type) => {
+    const root = mount(
+      list([{ name: 'x', type, label: `The ${type}`, options: [] }]),
+    );
+    const control = byLabelText(root, `The ${type}`);
+    expect(control.id).toBe('f-x');
+  });
+
+  it('keep label, control and message together in one element', () => {
+    const root = mount(
+      list([{ name: 'email', type: 'email', label: 'Email' }]),
+      {
+        email: ['Invalid email'],
+      },
+    );
+    const field = root.querySelector('.dfk-field')!;
+    const control = byLabelText(root, 'Email');
+    expect(field.contains(control)).toBe(true);
+    expect(control.getAttribute('aria-invalid')).toBe('true');
+    const message = root.querySelector(
+      `[id="${control.getAttribute('aria-describedby')}"]`,
+    );
+    expect(message?.textContent?.trim()).toBe('Invalid email');
+    expect(field.contains(message)).toBe(true);
+  });
+
+  it('draw no label for a field without one', () => {
+    const root = mount(list([{ name: 'x', type: 'text' }]));
+    expect(root.querySelector('.dfk-field-label')).toBeNull();
+    expect(root.querySelector('.dfk-field input')).not.toBeNull();
+  });
+
+  it('leave a registered renderer as it was: no label', () => {
+    registry.register('text', TextRendererComponent as never);
+    const root = mount(list([{ name: 'x', type: 'text', label: 'X' }]));
+    expect(root.querySelector('input.txt')).not.toBeNull();
+    expect(root.querySelector('.dfk-field')).toBeNull();
+    expect(root.querySelector('label')).toBeNull();
+  });
+});
diff --git a/packages/core/src/rendererProps.ts b/packages/core/src/rendererProps.ts
index 388d32b..34e8d39 100644
--- a/packages/core/src/rendererProps.ts
+++ b/packages/core/src/rendererProps.ts
@@ -177,6 +177,15 @@ export function makeErrorId(id: string): string {
   return `${id}-error`;
 }
 
+/**
+ * The id of the element that names a field: the `<label>` the adapters render
+ * for a built-in renderer, or the caption of a group of controls (the radio
+ * buttons), which the group points at with `aria-labelledby`.
+ */
+export function makeLabelId(id: string): string {
+  return `${id}-label`;
+}
+
 /**
  * Builds the complete renderer prop bag for one field. Shared by the React,
  * Vue and Angular adapters so all three forward an identical set.
diff --git a/packages/core/test/rendererProps.test.ts b/packages/core/test/rendererProps.test.ts
index a8c97e4..71c6450 100644
--- a/packages/core/test/rendererProps.test.ts
+++ b/packages/core/test/rendererProps.test.ts
@@ -4,6 +4,7 @@ import {
   buildFieldRendererProps,
   FIELD_RENDERER_PROP_KEYS,
   makeErrorId,
+  makeLabelId,
   makeFieldId,
 } from '../src/rendererProps';
 import type { FieldDescription } from '../src/types';
@@ -327,3 +328,10 @@ describe('options loading state', () => {
     expect(FIELD_RENDERER_PROP_KEYS).toContain('optionsError');
   });
 });
+
+describe('makeLabelId', () => {
+  it('names the label of a field from its id, beside the error id', () => {
+    expect(makeLabelId('f-email')).toBe('f-email-label');
+    expect(makeLabelId('f-email')).not.toBe(makeErrorId('f-email'));
+  });
+});
diff --git a/packages/react/README.md b/packages/react/README.md
index 89dd4ec..c3ea47e 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -279,6 +279,14 @@ it, so the form showed nothing. A registered custom renderer is unaffected — t
 node is emitted only where a default was used, so you never get two copies. Hide
 it with `.dfk-field-error { display: none }` if you want the old silence.
 
+A default renderer is also labelled: the control, its label and its message sit
+in one `<div class="dfk-field">`, with
+`<label id="{fieldId}-label" for="{fieldId}" class="dfk-field-label">` before
+the control when the field has a `label`. A radio group is named by its caption
+instead (`role="radiogroup"` with `aria-labelledby` pointing at a
+`<span class="dfk-field-label">`). Before that the control was a direct child of
+the layout and had no label at all. Again, a registered renderer is untouched.
+
 ## DevTools
 
 ```tsx
diff --git a/packages/react/src/components/DynamicInput.tsx b/packages/react/src/components/DynamicInput.tsx
index 489df19..7842e3e 100644
--- a/packages/react/src/components/DynamicInput.tsx
+++ b/packages/react/src/components/DynamicInput.tsx
@@ -2,6 +2,7 @@ import {
   FieldRendererProps,
   FieldTypeKey,
   makeErrorId,
+  makeLabelId,
   type OptionsStatus,
   Properties,
 } from '@dynamic-field-kit/core';
@@ -69,7 +70,7 @@ const DynamicInputInner = <T extends FieldTypeKey>({
     return <div>Unknown field type: {type}</div>;
   }
 
-  const { error, id } = rendererProps as FieldRendererProps;
+  const { error, id, label } = rendererProps as FieldRendererProps;
 
   // Spread rather than re-listing each prop: the set is fixed by core's
   // FIELD_RENDERER_PROP_KEYS contract, and a hand-maintained list here is
@@ -87,20 +88,41 @@ const DynamicInputInner = <T extends FieldTypeKey>({
   // consumer can hand it a bare string - index 0 of which is a character.
   const firstError = Array.isArray(error) ? error[0] : error;
 
-  if (!isDefault || !firstError || !id) {
+  // A custom renderer owns its label and its error presentation.
+  if (!isDefault) {
     return control;
   }
 
-  // A fragment, not a wrapper element: the message appears, but nothing about
-  // the surrounding layout changes. The id is what `ariaDescribedBy` targets -
-  // without this node that reference would dangle.
+  // A built-in renderer is a bare control, so its label and its message are
+  // drawn here, in one element that keeps them together in a grid layout.
+  // Always the same element, with or without a message, so the control is
+  // never rebuilt (and never loses the focus) when an error comes or goes.
+  //
+  // A radio group is not a labelable element: its caption is a plain element
+  // that the group names itself after (`aria-labelledby`). Every other
+  // built-in control gets a `<label for>`.
+  const labelText = label && id ? label : undefined;
   return (
-    <>
+    <div className="dfk-field">
+      {labelText &&
+        (type === 'radio' ? (
+          <span id={makeLabelId(id!)} className="dfk-field-label">
+            {labelText}
+          </span>
+        ) : (
+          <label id={makeLabelId(id!)} htmlFor={id} className="dfk-field-label">
+            {labelText}
+          </label>
+        ))}
       {control}
-      <div id={makeErrorId(id)} className="dfk-field-error" role="alert">
-        {firstError}
-      </div>
-    </>
+      {firstError && id && (
+        // The id is what `ariaDescribedBy` targets - without this node that
+        // reference would dangle.
+        <div id={makeErrorId(id)} className="dfk-field-error" role="alert">
+          {firstError}
+        </div>
+      )}
+    </div>
   );
 };
 
diff --git a/packages/react/src/defaultRenderers.tsx b/packages/react/src/defaultRenderers.tsx
index 2df64be..ad4b244 100644
--- a/packages/react/src/defaultRenderers.tsx
+++ b/packages/react/src/defaultRenderers.tsx
@@ -1,4 +1,4 @@
-import { FieldRendererProps } from '@dynamic-field-kit/core';
+import { FieldRendererProps, makeLabelId } from '@dynamic-field-kit/core';
 import React from 'react';
 
 export interface DefaultInputProps extends FieldRendererProps {
@@ -188,11 +188,19 @@ export const DefaultRadioRenderer: React.FC<FieldRendererProps> = ({
   required,
   options = [],
   id,
+  label,
   className,
   ariaInvalid,
   ariaDescribedBy,
 }) => (
-  <div className={`dfk-radio-group ${className || ''}`} id={id} onBlur={onBlur}>
+  <div
+    className={`dfk-radio-group ${className || ''}`}
+    id={id}
+    role="radiogroup"
+    // The caption DynamicInput draws for a labelled field.
+    aria-labelledby={label && id ? makeLabelId(id) : undefined}
+    onBlur={onBlur}
+  >
     {options.map((opt, i) => {
       const optVal = opt.value ?? opt.id ?? opt;
       const optLabel = opt.label ?? opt.name ?? String(optVal);
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 12765d2..c5e38ed 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -39,6 +39,7 @@ export {
   buildFieldRendererProps,
   makeFieldId,
   makeErrorId,
+  makeLabelId,
   FIELD_RENDERER_PROP_KEYS,
 } from '@dynamic-field-kit/core';
 export {
diff --git a/packages/react/test/defaultRendererLabels.test.tsx b/packages/react/test/defaultRendererLabels.test.tsx
new file mode 100644
index 0000000..e44e302
--- /dev/null
+++ b/packages/react/test/defaultRendererLabels.test.tsx
@@ -0,0 +1,111 @@
+import type { FieldDescription } from '@dynamic-field-kit/core';
+import { FieldRegistry } from '@dynamic-field-kit/core';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import MultiFieldInput from '../src/components/MultiFieldInput';
+import { FieldRegistryProvider } from '../src/FieldRegistryContext';
+import '../src/layout/defaultLayouts';
+
+// The registry's field types are open-ended; these tests use plain strings.
+const list = (fields: unknown[]) => fields as FieldDescription[];
+
+const options = [
+  { label: 'Vietnam', value: 'VN' },
+  { label: 'United States', value: 'US' },
+];
+
+// Every built-in type except radio, which is a group rather than one control.
+const single = [
+  'text',
+  'number',
+  'password',
+  'email',
+  'textarea',
+  'checkbox',
+  'select',
+  'range',
+  'file',
+  'date',
+  'time',
+  'datetime-local',
+  'switch',
+];
+
+function renderFields(
+  fields: FieldDescription[],
+  errors?: Record<string, string[]>,
+) {
+  // A registry of its own, so no renderer registered by another test file is
+  // picked over the built-in one.
+  return render(
+    <FieldRegistryProvider registry={new FieldRegistry()}>
+      <MultiFieldInput
+        fieldDescriptions={fields}
+        properties={{}}
+        idPrefix="f"
+        errors={errors}
+      />
+    </FieldRegistryProvider>,
+  );
+}
+
+describe('built-in renderers', () => {
+  it.each(single)('label a %s control with <label for>', (type) => {
+    renderFields(list([{ name: 'x', type, label: `The ${type}`, options }]));
+    const control = screen.getByLabelText(`The ${type}`);
+    expect(control.id).toBe('f-x');
+    expect(control.tagName).toMatch(/INPUT|SELECT|TEXTAREA/);
+  });
+
+  it('name a radio group after its caption', () => {
+    renderFields(
+      list([{ name: 'country', type: 'radio', label: 'Country', options }]),
+    );
+    const group = screen.getByRole('radiogroup', { name: 'Country' });
+    expect(group.id).toBe('f-country');
+    // Each button keeps the label of its own option.
+    expect(screen.getByLabelText('Vietnam')).toBeTruthy();
+  });
+
+  it('keep label, control and message together in one element', () => {
+    const { container } = renderFields(
+      list([{ name: 'email', type: 'email', label: 'Email' }]),
+      { email: ['Invalid email'] },
+    );
+    const field = container.querySelector('.dfk-field')!;
+    expect(field.querySelector('label.dfk-field-label')?.textContent).toBe(
+      'Email',
+    );
+    const control = screen.getByLabelText('Email');
+    expect(field.contains(control)).toBe(true);
+    expect(control.getAttribute('aria-invalid')).toBe('true');
+    const message = document.getElementById(
+      control.getAttribute('aria-describedby')!,
+    );
+    expect(message?.textContent).toBe('Invalid email');
+    expect(field.contains(message)).toBe(true);
+  });
+
+  it('draw no label for a field without one', () => {
+    const { container } = renderFields(list([{ name: 'x', type: 'text' }]));
+    expect(container.querySelector('.dfk-field-label')).toBeNull();
+    expect(container.querySelector('.dfk-field input')).not.toBeNull();
+  });
+
+  it('leave a registered renderer as it was: no wrapper, no label', () => {
+    const registry = new FieldRegistry();
+    registry.register('text', (() => <input data-testid="mine" />) as never);
+    const { container } = render(
+      <FieldRegistryProvider registry={registry}>
+        <MultiFieldInput
+          fieldDescriptions={list([{ name: 'x', type: 'text', label: 'X' }])}
+          properties={{}}
+        />
+      </FieldRegistryProvider>,
+    );
+    expect(screen.getByTestId('mine')).toBeTruthy();
+    expect(container.querySelector('.dfk-field')).toBeNull();
+    expect(container.querySelector('label')).toBeNull();
+  });
+});
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index f81fa04..f44b95b 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -231,7 +231,10 @@ control: `text`, `number`, `password`, `email`, `textarea`, `checkbox`,
 `switch`, `select`, `radio`, `range`, `file`, `date`, `time` and
 `datetime-local`. Under a default control the first error is shown in a
 `<div class="dfk-field-error" role="alert">` whose id is what
-`aria-describedby` points at. A registered renderer shows its own errors.
+`aria-describedby` points at. The control, its label and its message sit in one
+`<div class="dfk-field">`, with `<label for>` (class `dfk-field-label`) before
+the control when the field has a `label`; a radio group is named by its caption
+through `aria-labelledby`. A registered renderer shows its own label and errors.
 
 ## Layouts
 
diff --git a/packages/svelte/src/components/DynamicInput.svelte b/packages/svelte/src/components/DynamicInput.svelte
index 1361c33..7f0881b 100644
--- a/packages/svelte/src/components/DynamicInput.svelte
+++ b/packages/svelte/src/components/DynamicInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     makeErrorId,
+    makeLabelId,
     type FieldTypeKey,
     type OptionsStatus,
     type Properties,
@@ -91,7 +92,7 @@
   const firstError = $derived(Array.isArray(error) ? error[0] : error);
 </script>
 
-{#if Renderer}
+{#snippet control(Renderer: Component<Record<string, unknown>>)}
   <Renderer
     {...extraProps}
     value={value}
@@ -121,16 +122,38 @@
     accept={accept}
     multiple={multiple}
   />
-  <!--
-    A custom renderer owns its own error presentation; a second message next
-    to it would repeat what the consumer already shows. The id is what
-    `ariaDescribedBy` points at.
-  -->
-  {#if !registered && firstError && id}
-    <div id={makeErrorId(id)} class="dfk-field-error" role="alert">
-      {firstError}
-    </div>
-  {/if}
+{/snippet}
+
+<!--
+  A custom renderer owns its label and its error presentation; drawing them
+  here as well would repeat what the consumer already shows.
+
+  A built-in renderer is a bare control, so its label and its message are drawn
+  here, in one element that keeps them together in a grid layout. A radio group
+  is not a labelable element: its caption is a plain element the group names
+  itself after (`aria-labelledby`). Every other built-in control gets a
+  `<label for>`. The message's id is what `ariaDescribedBy` points at.
+-->
+{#if Renderer && registered}
+  {@render control(Renderer)}
+{:else if Renderer}
+  <div class="dfk-field">
+    {#if label && id}
+      {#if type === 'radio'}
+        <span id={makeLabelId(id)} class="dfk-field-label">{label}</span>
+      {:else}
+        <label id={makeLabelId(id)} for={id} class="dfk-field-label"
+          >{label}</label
+        >
+      {/if}
+    {/if}
+    {@render control(Renderer)}
+    {#if firstError && id}
+      <div id={makeErrorId(id)} class="dfk-field-error" role="alert">
+        {firstError}
+      </div>
+    {/if}
+  </div>
 {:else}
   <div>Unknown field type: {type}</div>
 {/if}
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 679f313..6737bc0 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -57,6 +57,7 @@ export {
   buildFieldRendererProps,
   makeFieldId,
   makeErrorId,
+  makeLabelId,
   FIELD_RENDERER_PROP_KEYS,
 } from '@dynamic-field-kit/core';
 export type { ServerErrorsInput } from './serverErrors.js';
diff --git a/packages/svelte/src/renderers/RadioRenderer.svelte b/packages/svelte/src/renderers/RadioRenderer.svelte
index 71f3f3c..59d0c48 100644
--- a/packages/svelte/src/renderers/RadioRenderer.svelte
+++ b/packages/svelte/src/renderers/RadioRenderer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FieldRendererProps } from '@dynamic-field-kit/core';
+  import { makeLabelId, type FieldRendererProps } from '@dynamic-field-kit/core';
   import { readOptions } from './options.js';
 
   let {
@@ -11,6 +11,7 @@
     readOnly,
     required,
     id,
+    label,
     className,
     ariaInvalid,
     ariaDescribedBy,
@@ -27,6 +28,7 @@
   class="dfk-radio-group {className ?? ''}"
   {id}
   role="radiogroup"
+  aria-labelledby={label && id ? makeLabelId(id) : undefined}
   aria-invalid={ariaInvalid}
   aria-describedby={ariaDescribedBy}
   onfocusout={() => onBlur?.()}
diff --git a/packages/svelte/test/defaultRendererLabels.test.ts b/packages/svelte/test/defaultRendererLabels.test.ts
new file mode 100644
index 0000000..8d051c7
--- /dev/null
+++ b/packages/svelte/test/defaultRendererLabels.test.ts
@@ -0,0 +1,113 @@
+import { FieldRegistry, type FieldDescription } from '@dynamic-field-kit/core';
+import { describe, expect, it } from 'vitest';
+import MultiFieldInput from '../src/components/MultiFieldInput.svelte';
+import '../src/layout/defaultLayouts';
+import { probeRegistry, render } from './helpers';
+
+// The registry's field types are open-ended; these tests use plain strings.
+const list = (fields: unknown[]) => fields as FieldDescription[];
+
+const options = [
+  { label: 'Vietnam', value: 'VN' },
+  { label: 'United States', value: 'US' },
+];
+
+// Every built-in type except radio, which is a group rather than one control.
+const single = [
+  'text',
+  'number',
+  'password',
+  'email',
+  'textarea',
+  'checkbox',
+  'select',
+  'range',
+  'file',
+  'date',
+  'time',
+  'datetime-local',
+  'switch',
+];
+
+function mountFields(
+  fields: FieldDescription[],
+  errors?: Record<string, string[]>,
+  registry = new FieldRegistry(),
+) {
+  return render(
+    MultiFieldInput,
+    { fieldDescriptions: fields, properties: {}, idPrefix: 'f', errors },
+    registry,
+  ).target;
+}
+
+/** The control a label names, the way assistive technology finds it. */
+function byLabelText(text: string): HTMLElement {
+  const label = [...document.querySelectorAll('label')].find(
+    (element) => element.textContent?.trim() === text,
+  );
+  const control = label?.htmlFor
+    ? document.getElementById(label.htmlFor)
+    : label?.querySelector('input');
+  if (!control) {
+    throw new Error(`no control labelled "${text}"`);
+  }
+  expect(
+    [...((control as HTMLInputElement).labels ?? [])].includes(label!),
+  ).toBe(true);
+  return control;
+}
+
+describe('built-in renderers', () => {
+  it.each(single)('label a %s control with <label for>', (type) => {
+    mountFields(list([{ name: 'x', type, label: `The ${type}`, options }]));
+    const control = byLabelText(`The ${type}`);
+    expect(control.id).toBe('f-x');
+    expect(control.tagName).toMatch(/INPUT|SELECT|TEXTAREA/);
+  });
+
+  it('name a radio group after its caption', () => {
+    const target = mountFields(
+      list([{ name: 'country', type: 'radio', label: 'Country', options }]),
+    );
+    const group = target.querySelector('[role="radiogroup"]')!;
+    const caption = document.getElementById(
+      group.getAttribute('aria-labelledby')!,
+    );
+    expect(caption?.textContent).toBe('Country');
+    expect(group.id).toBe('f-country');
+  });
+
+  it('keep label, control and message together in one element', () => {
+    const target = mountFields(
+      list([{ name: 'email', type: 'email', label: 'Email' }]),
+      { email: ['Invalid email'] },
+    );
+    const field = target.querySelector('.dfk-field')!;
+    const control = byLabelText('Email');
+    expect(field.contains(control)).toBe(true);
+    expect(control.getAttribute('aria-invalid')).toBe('true');
+    const message = document.getElementById(
+      control.getAttribute('aria-describedby')!,
+    );
+    expect(message?.textContent?.trim()).toBe('Invalid email');
+    expect(field.contains(message)).toBe(true);
+  });
+
+  it('draw no label for a field without one', () => {
+    const target = mountFields(list([{ name: 'x', type: 'text' }]));
+    expect(target.querySelector('.dfk-field-label')).toBeNull();
+    expect(target.querySelector('.dfk-field input')).not.toBeNull();
+  });
+
+  it('leave a registered renderer as it was: no wrapper, no label', () => {
+    const target = mountFields(
+      list([{ name: 'x', type: 'probe', label: 'X' }]),
+      undefined,
+      probeRegistry(),
+    );
+    expect(target.querySelector('input')).not.toBeNull();
+    expect(target.querySelector('.dfk-field')).toBeNull();
+    expect(target.querySelector('.dfk-field-label')).toBeNull();
+  });
+});
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 0067f14..58b57a4 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -270,6 +270,14 @@ it, so the form showed nothing. A registered custom renderer is unaffected - the
 node is emitted only where a default was used, so you never get two copies. Hide
 it with `.dfk-field-error { display: none }` if you want the old silence.
 
+A default renderer is also labelled: the control, its label and its message sit
+in one `<div class="dfk-field">`, with
+`<label id="{fieldId}-label" for="{fieldId}" class="dfk-field-label">` before
+the control when the field has a `label`. A radio group is named by its caption
+instead (`role="radiogroup"` with `aria-labelledby` pointing at a
+`<span class="dfk-field-label">`). Before that the control was a direct child of
+the layout and had no label at all. Again, a registered renderer is untouched.
+
 ## DevTools
 
 ```vue
diff --git a/packages/vue/src/components/DynamicInput.ts b/packages/vue/src/components/DynamicInput.ts
index 40980ed..fed0647 100644
--- a/packages/vue/src/components/DynamicInput.ts
+++ b/packages/vue/src/components/DynamicInput.ts
@@ -1,6 +1,7 @@
 import {
   FieldTypeKey,
   makeErrorId,
+  makeLabelId,
   type OptionsStatus,
   Properties,
 } from '@dynamic-field-kit/core';
@@ -11,9 +12,10 @@ import { useFieldRegistry } from '../fieldRegistryContext';
 const DynamicInput = /* @__PURE__ */ defineComponent({
   name: 'DynamicInput',
 
-  // A built-in renderer is rendered as a list (the control, then its error
-  // when there is one), and a list cannot inherit attributes. They are handed
-  // to the control by hand instead, so that they arrive in every case.
+  // A built-in renderer is rendered inside a wrapper with its label and its
+  // error, and attributes on this component are meant for the control, not
+  // for that wrapper. They are handed to the control by hand instead, so that
+  // they arrive in every case.
   inheritAttrs: false,
 
   // Every key of core's FIELD_RENDERER_PROP_KEYS must be declared here, or Vue
@@ -204,27 +206,38 @@ const DynamicInput = /* @__PURE__ */ defineComponent({
         return control;
       }
 
-      // An array, not a wrapper element: Vue renders it as a fragment, so the
-      // message appears without changing the surrounding layout. The id is
-      // what `ariaDescribedBy` targets.
+      // A built-in renderer is a bare control, so its label and its message
+      // are drawn here, in one element that keeps them together in a grid
+      // layout. The children keep their places (an absent label or message is
+      // a placeholder), so the control is never built again - an input that is
+      // replaced while it is typed in loses the focus.
       //
-      // An array with or without the message, never the control alone: going
-      // from a single node to a list makes Vue build the control again, and an
-      // input that is replaced while it is typed in loses the focus.
-      return firstError && props.id
-        ? [
-            control,
-            h(
-              'div',
+      // A radio group is not a labelable element: its caption is a plain
+      // element the group names itself after (`aria-labelledby`). Every other
+      // built-in control gets a `<label for>`.
+      const id = props.id;
+      const label =
+        props.label && id
+          ? h(
+              props.type === 'radio' ? 'span' : 'label',
               {
-                id: makeErrorId(props.id),
-                class: 'dfk-field-error',
-                role: 'alert',
+                id: makeLabelId(id),
+                for: props.type === 'radio' ? undefined : id,
+                class: 'dfk-field-label',
               },
+              props.label,
+            )
+          : null;
+      // The id is what `ariaDescribedBy` targets.
+      const message =
+        firstError && id
+          ? h(
+              'div',
+              { id: makeErrorId(id), class: 'dfk-field-error', role: 'alert' },
               firstError,
-            ),
-          ]
-        : [control];
+            )
+          : null;
+      return h('div', { class: 'dfk-field' }, [label, control, message]);
     };
   },
 });
diff --git a/packages/vue/src/defaultRenderers.ts b/packages/vue/src/defaultRenderers.ts
index 5334084..58f31ad 100644
--- a/packages/vue/src/defaultRenderers.ts
+++ b/packages/vue/src/defaultRenderers.ts
@@ -1,4 +1,4 @@
-import { Properties } from '@dynamic-field-kit/core';
+import { makeLabelId, Properties } from '@dynamic-field-kit/core';
 import { defineComponent, h, PropType } from 'vue';
 
 /**
@@ -333,6 +333,10 @@ export const DefaultRadioRenderer = /* @__PURE__ */ defineComponent({
         {
           class: `dfk-radio-group ${props.class || ''}`,
           id: props.id,
+          role: 'radiogroup',
+          // The caption DynamicInput draws for a labelled field.
+          'aria-labelledby':
+            props.label && props.id ? makeLabelId(props.id) : undefined,
           onBlur: props.onBlur,
         },
         radioNodes,
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index f7c4ea1..dff18a9 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -40,6 +40,7 @@ export {
   buildFieldRendererProps,
   makeFieldId,
   makeErrorId,
+  makeLabelId,
   FIELD_RENDERER_PROP_KEYS,
 } from '@dynamic-field-kit/core';
 
diff --git a/packages/vue/test/defaultRendererLabels.test.ts b/packages/vue/test/defaultRendererLabels.test.ts
new file mode 100644
index 0000000..0b7ea0f
--- /dev/null
+++ b/packages/vue/test/defaultRendererLabels.test.ts
@@ -0,0 +1,131 @@
+import type { FieldDescription } from '@dynamic-field-kit/core';
+import { FieldRegistry } from '@dynamic-field-kit/core';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import MultiFieldInput from '../src/components/MultiFieldInput';
+import { FieldRegistryKey } from '../src/fieldRegistryContext';
+import '../src/layout/defaultLayouts';
+
+// The registry's field types are open-ended; these tests use plain strings.
+const list = (fields: unknown[]) => fields as FieldDescription[];
+
+const options = [
+  { label: 'Vietnam', value: 'VN' },
+  { label: 'United States', value: 'US' },
+];
+
+// Every built-in type except radio, which is a group rather than one control.
+const single = [
+  'text',
+  'number',
+  'password',
+  'email',
+  'textarea',
+  'checkbox',
+  'select',
+  'range',
+  'file',
+  'date',
+  'time',
+  'datetime-local',
+  'switch',
+];
+
+function mountFields(
+  fields: FieldDescription[],
+  errors?: Record<string, string[]>,
+  registry = new FieldRegistry(),
+) {
+  return mount(MultiFieldInput, {
+    props: { fieldDescriptions: fields, properties: {}, idPrefix: 'f', errors },
+    global: { provide: { [FieldRegistryKey]: registry } },
+    attachTo: document.body,
+  });
+}
+
+/** The control a label names, the way assistive technology finds it. */
+function byLabelText(text: string): HTMLElement {
+  const label = [...document.querySelectorAll('label')].find(
+    (element) => element.textContent?.trim() === text,
+  );
+  const control = label?.htmlFor
+    ? document.getElementById(label.htmlFor)
+    : label?.querySelector('input');
+  if (!control) {
+    throw new Error(`no control labelled "${text}"`);
+  }
+  expect(
+    [...((control as HTMLInputElement).labels ?? [])].includes(label!),
+  ).toBe(true);
+  return control;
+}
+
+describe('built-in renderers', () => {
+  it.each(single)('label a %s control with <label for>', (type) => {
+    const wrapper = mountFields(
+      list([{ name: 'x', type, label: `The ${type}`, options }]),
+    );
+    const control = byLabelText(`The ${type}`);
+    expect(control.id).toBe('f-x');
+    expect(control.tagName).toMatch(/INPUT|SELECT|TEXTAREA/);
+    wrapper.unmount();
+  });
+
+  it('name a radio group after its caption', () => {
+    const wrapper = mountFields(
+      list([{ name: 'country', type: 'radio', label: 'Country', options }]),
+    );
+    const group = wrapper.find('[role="radiogroup"]').element;
+    const caption = document.getElementById(
+      group.getAttribute('aria-labelledby')!,
+    );
+    expect(caption?.textContent).toBe('Country');
+    expect(group.id).toBe('f-country');
+    expect(byLabelText('Vietnam').getAttribute('type')).toBe('radio');
+    wrapper.unmount();
+  });
+
+  it('keep label, control and message together in one element', () => {
+    const wrapper = mountFields(
+      list([{ name: 'email', type: 'email', label: 'Email' }]),
+      { email: ['Invalid email'] },
+    );
+    const field = wrapper.find('.dfk-field').element;
+    const control = byLabelText('Email');
+    expect(field.contains(control)).toBe(true);
+    expect(control.getAttribute('aria-invalid')).toBe('true');
+    const message = document.getElementById(
+      control.getAttribute('aria-describedby')!,
+    );
+    expect(message?.textContent).toBe('Invalid email');
+    expect(field.contains(message)).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('draw no label for a field without one', () => {
+    const wrapper = mountFields(list([{ name: 'x', type: 'text' }]));
+    expect(wrapper.find('.dfk-field-label').exists()).toBe(false);
+    expect(wrapper.find('.dfk-field input').exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('leave a registered renderer as it was: no wrapper, no label', () => {
+    const registry = new FieldRegistry();
+    registry.register(
+      'text',
+      defineComponent({
+        setup: () => () => h('input', { 'data-testid': 'mine' }),
+      }) as never,
+    );
+    const wrapper = mountFields(
+      list([{ name: 'x', type: 'text', label: 'X' }]),
+      undefined,
+      registry,
+    );
+    expect(wrapper.find('[data-testid="mine"]').exists()).toBe(true);
+    expect(wrapper.find('.dfk-field').exists()).toBe(false);
+    expect(wrapper.find('label').exists()).toBe(false);
+    wrapper.unmount();
+  });
+});
diff --git a/storybook/package-lock.json b/storybook/package-lock.json
index 716c469..e4ff8dc 100644
--- a/storybook/package-lock.json
+++ b/storybook/package-lock.json
@@ -16,6 +16,7 @@
         "@types/react": "19.3.0",
         "@types/react-dom": "19.3.0",
         "@vitejs/plugin-react": "6.1.2",
+        "axe-core": "4.14.0",
         "jsdom": "30.1.2",
         "react": "19.3.0",
         "react-dom": "19.3.0",
diff --git a/storybook/package.json b/storybook/package.json
index 17ba78f..cd18c42 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -19,6 +19,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "6.1.2",
+    "axe-core": "4.14.0",
     "jsdom": "30.1.2",
     "react": "19.3.0",
     "react-dom": "19.3.0",
diff --git a/storybook/test/a11y.test.tsx b/storybook/test/a11y.test.tsx
new file mode 100644
index 0000000..51d969f
--- /dev/null
+++ b/storybook/test/a11y.test.tsx
@@ -0,0 +1,32 @@
+import { composeStories } from '@storybook/react-vite';
+import { render } from '@testing-library/react';
+import axe from 'axe-core';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import * as fieldTypes from '../src/stories/FieldTypes.stories';
+import * as forms from '../src/stories/Forms.stories';
+import * as wizard from '../src/stories/Wizard.stories';
+
+// The same engine the Storybook a11y addon runs, over every story's DOM.
+// jsdom does no layout, so the rules that need it (contrast) are left out;
+// what is checked is the markup: names of controls, ARIA references, roles.
+const all = {
+  ...composeStories(fieldTypes),
+  ...composeStories(forms),
+  ...composeStories(wizard),
+};
+
+describe('accessibility of every story', () => {
+  it.each(Object.entries(all))('%s', async (_name, Story) => {
+    const { container } = render(<Story />);
+    const result = await axe.run(container, {
+      runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a'] },
+      rules: { 'color-contrast': { enabled: false } },
+    });
+    const found = result.violations.map(
+      (violation) =>
+        `${violation.id}: ${violation.nodes.map((node) => node.target.join(' ')).join(', ')}`,
+    );
+    expect(found).toEqual([]);
+  });
+});