@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/wizard.json

@@ -0,0 +1,724 @@
+{
+  "family": "wizard",
+  "ui": "wizard",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Multi-step form with validation per step."
+  },
+  "axes": {
+    "progress": [
+      "start",
+      "top",
+      "none"
+    ],
+    "scroll": [
+      "ancestor",
+      "self"
+    ],
+    "level": [
+      2,
+      3,
+      4
+    ],
+    "autosave": [
+      "none",
+      "step"
+    ]
+  },
+  "members": {
+    "wizard": {
+      "nativeElement": "div",
+      "defaults": {
+        "progress": "start",
+        "scroll": "ancestor",
+        "linear": true,
+        "level": 2,
+        "guardUnsaved": false,
+        "delay": 200,
+        "minDuration": 400,
+        "defaultProgressOpen": false,
+        "disabled": false
+      },
+      "capabilities": [
+        "current",
+        "value",
+        "open",
+        "placement",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "loading",
+        "invalid",
+        "complete",
+        "open",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "layout",
+        "progress",
+        "progress-toggle",
+        "progress-position",
+        "progress-track",
+        "progress-segment",
+        "main",
+        "error",
+        "step",
+        "step-header",
+        "step-title",
+        "position",
+        "optional",
+        "step-description",
+        "actions",
+        "actions-start",
+        "actions-end",
+        "cancel",
+        "save-draft",
+        "draft-status",
+        "skip",
+        "previous",
+        "next",
+        "submit",
+        "edit",
+        "complete",
+        "skeleton"
+      ]
+    }
+  },
+  "docs": {
+    "wizard": {
+      "imports": {
+        "source": "import { SlWizard, SlWizardStep, SlWizardForm, SlWizardComplete, SlWizardEdit, provideWizardDefaults } from '@slotted/angular/wizard';",
+        "selector": "[slWizard], ng-template[slWizardStep], form[slWizardForm], ng-template[slWizardComplete], ng-template[slWizardActions], button[slWizardEdit]",
+        "exportAs": "slWizard"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element slWizard is on",
+          "required": true,
+          "purpose": "data-ui=\"wizard\", data-progress, data-scroll, and data-loading, data-invalid or data-complete for the submission. The container named slotted-wizard."
+        },
+        {
+          "part": "layout",
+          "element": "div",
+          "required": true,
+          "purpose": "The grid of progress and main, one element in so the container query can change it."
+        },
+        {
+          "part": "progress",
+          "element": "div",
+          "required": false,
+          "purpose": "The slStepper, beside the step or above it; data-open while the compact list is open. Absent under progress=\"none\"."
+        },
+        {
+          "part": "progress-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Below 600 pixels of the wizard’s width: the position and one segment per step."
+        },
+        {
+          "part": "progress-position",
+          "element": "span",
+          "required": false,
+          "purpose": "messages.position, the toggle’s accessible name."
+        },
+        {
+          "part": "progress-track",
+          "element": "span",
+          "required": false,
+          "purpose": "aria-hidden: one segment per step present."
+        },
+        {
+          "part": "progress-segment",
+          "element": "span",
+          "required": false,
+          "purpose": "data-complete, data-current or data-invalid."
+        },
+        {
+          "part": "main",
+          "element": "div",
+          "required": true,
+          "purpose": "The column of error, step and actions, or of complete."
+        },
+        {
+          "part": "error",
+          "element": "div around an slAlert",
+          "required": false,
+          "purpose": "The error input, or a failed submission, in the danger tone. Focus moves to it."
+        },
+        {
+          "part": "step",
+          "element": "div",
+          "required": true,
+          "purpose": "The current step’s header and template. aria-busy while a draft is restored."
+        },
+        {
+          "part": "step-header",
+          "element": "div",
+          "required": true,
+          "purpose": "The step’s heading and description."
+        },
+        {
+          "part": "step-title",
+          "element": "h2, h3 or h4",
+          "required": true,
+          "purpose": "By level; the focus target on every step change."
+        },
+        {
+          "part": "position",
+          "element": "span",
+          "required": true,
+          "purpose": "“Step 2 of 5”, above the name; below 600 pixels only in the heading’s text."
+        },
+        {
+          "part": "optional",
+          "element": "span around an slTag",
+          "required": false,
+          "purpose": "messages.optional, on an optional step."
+        },
+        {
+          "part": "step-description",
+          "element": "p",
+          "required": false,
+          "purpose": "The step’s description input."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": true,
+          "purpose": "The row under the step; an ng-template[slWizardActions] replaces its content."
+        },
+        {
+          "part": "actions-start",
+          "element": "div (slWizardActionsStart)",
+          "required": true,
+          "purpose": "Cancel, save draft and the draft status."
+        },
+        {
+          "part": "actions-end",
+          "element": "div (slWizardActionsEnd)",
+          "required": true,
+          "purpose": "Skip, back, and next or submit at the end edge."
+        },
+        {
+          "part": "cancel",
+          "element": "button[slWizardCancel]",
+          "required": false,
+          "purpose": "Emits cancelRequest with dirty. Shown under cancellable."
+        },
+        {
+          "part": "save-draft",
+          "element": "button[slWizardSaveDraft]",
+          "required": false,
+          "purpose": "Writes the draft. Shown with persistence or under draftable."
+        },
+        {
+          "part": "draft-status",
+          "element": "[slWizardDraftStatus] role=\"status\"",
+          "required": false,
+          "purpose": "“Draft saved at 14:02”, announced once."
+        },
+        {
+          "part": "skip",
+          "element": "button[slWizardSkip]",
+          "required": false,
+          "purpose": "On an optional step: accepts it with no answers."
+        },
+        {
+          "part": "previous",
+          "element": "button[slWizardPrevious]",
+          "required": false,
+          "purpose": "The previous step, keeping what was typed. Absent on the first."
+        },
+        {
+          "part": "next",
+          "element": "button[slWizardNext]",
+          "required": false,
+          "purpose": "Submits the step’s form from outside it through the form attribute."
+        },
+        {
+          "part": "submit",
+          "element": "button[slWizardNext]",
+          "required": false,
+          "purpose": "The same button on the step whose acceptance submits the flow; data-final."
+        },
+        {
+          "part": "edit",
+          "element": "button[slWizardEdit]",
+          "required": false,
+          "purpose": "On a review step: goes to a step and comes back; named “Change” and the step’s label."
+        },
+        {
+          "part": "complete",
+          "element": "div",
+          "required": false,
+          "purpose": "The slWizardComplete template after an accepted submission; takes focus."
+        },
+        {
+          "part": "skeleton",
+          "element": "div",
+          "required": false,
+          "purpose": "While an asynchronous draft is restored: one field whose label and control are skeletons."
+        }
+      ],
+      "api": [
+        {
+          "name": "step",
+          "type": "model<string | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "The current step’s name; [(step)] binds it"
+        },
+        {
+          "name": "defaultStep",
+          "type": "string",
+          "defaultValue": "the first incomplete step",
+          "appliesTo": "slWizard",
+          "description": "Where an unbound wizard starts, read once and clamped"
+        },
+        {
+          "name": "value",
+          "type": "model<WizardValue | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "The accepted answers; [(value)] binds it"
+        },
+        {
+          "name": "defaultValue",
+          "type": "WizardValue",
+          "defaultValue": "{}",
+          "appliesTo": "slWizard",
+          "description": "The unbound answers, read once"
+        },
+        {
+          "name": "progressOpen",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slWizard",
+          "description": "Whether the compact list is open; [(progressOpen)] binds it"
+        },
+        {
+          "name": "defaultProgressOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slWizard",
+          "description": "Whether an unbound list starts open, read once"
+        },
+        {
+          "name": "progress",
+          "type": "'start' | 'top' | 'none'",
+          "defaultValue": "start",
+          "appliesTo": "slWizard, provideWizardDefaults",
+          "description": "Where the list of steps stands"
+        },
+        {
+          "name": "scroll",
+          "type": "'ancestor' | 'self'",
+          "defaultValue": "ancestor",
+          "appliesTo": "slWizard, provideWizardDefaults",
+          "description": "self takes the height given and pins the actions"
+        },
+        {
+          "name": "linear",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slWizard, provideWizardDefaults",
+          "description": "A step ahead is reached only once every step before it is complete"
+        },
+        {
+          "name": "level",
+          "type": "2 | 3 | 4",
+          "defaultValue": "2",
+          "appliesTo": "slWizard, provideWizardDefaults",
+          "description": "The step heading’s level"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<WizardMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "Words laid over the language in force, key by key: position, progress (the name of the list of steps), previous, next, submit, return, cancel, saveDraft, saving, saved with {time}, draftFailed, skip, optional, edit, incomplete, submitFailed, restoring"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "An error of your own above the step"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slWizard",
+          "description": "Every action refused"
+        },
+        {
+          "name": "submitWizard",
+          "type": "(values, request) => void | WizardFailure | Promise<…>",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "Called with the steps present once the last step is accepted"
+        },
+        {
+          "name": "persistence",
+          "type": "WizardPersistence",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "load, save and clear; storagePersistence keeps drafts in Storage"
+        },
+        {
+          "name": "version",
+          "type": "string | number",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "A draft of another version is not restored"
+        },
+        {
+          "name": "autosave",
+          "type": "'none' | 'step'",
+          "defaultValue": "step with persistence",
+          "appliesTo": "slWizard",
+          "description": "step writes a draft after every accepted step"
+        },
+        {
+          "name": "guardUnsaved",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slWizard",
+          "description": "A beforeunload guard while anything is unsubmitted"
+        },
+        {
+          "name": "cancellable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slWizard",
+          "description": "Shows the cancel action"
+        },
+        {
+          "name": "draftable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slWizard",
+          "description": "Shows save draft without persistence"
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "defaultValue": "200",
+          "appliesTo": "slWizard, provideWizardDefaults",
+          "description": "How long a restore may take before its skeleton is drawn"
+        },
+        {
+          "name": "minDuration",
+          "type": "number",
+          "defaultValue": "400",
+          "appliesTo": "slWizard, provideWizardDefaults",
+          "description": "How long a drawn skeleton stays"
+        },
+        {
+          "name": "slWizardStep",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "The step’s name"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "The step’s name in the heading and the progress"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "A sentence under the heading"
+        },
+        {
+          "name": "optional",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "Marked Optional, and skippable"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "Out of reach and stepped over"
+        },
+        {
+          "name": "validate",
+          "type": "WizardValidate",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "Runs after the group’s validators; errors by control name"
+        },
+        {
+          "name": "values",
+          "type": "StepValues",
+          "defaultValue": "the group’s raw value",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "Typed answers to accept instead"
+        },
+        {
+          "name": "template context",
+          "type": "{ $implicit: values, values, name, complete, optional, errors }",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slWizardStep]",
+          "description": "errors is what a failed submission sent back, for the form’s [defaultErrors]"
+        },
+        {
+          "name": "slWizardEdit",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "button[slWizardEdit]",
+          "description": "The step to change and come back from"
+        },
+        {
+          "name": "exportAs slWizard",
+          "type": "next, previous, goTo, edit, skip, saveDraft, clearDraft, reset, focus",
+          "defaultValue": "—",
+          "appliesTo": "slWizard",
+          "description": "The imperative moves, from a template reference"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "stepChangeRequest",
+          "payload": "ChangeRequest<string> & { reason }",
+          "when": "Before the step moves: an accepted step or Enter (submit), a header or Back (pointer, keyboard), a clamp or a restore (programmatic). cancel() refuses it; otherwise step is written."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<WizardValue> & { reason }",
+          "when": "Before the accepted answers move: a step accepted (submit), reset (clear), a restored draft (programmatic)."
+        },
+        {
+          "name": "progressOpenChangeRequest",
+          "payload": "ChangeRequest<boolean> & { reason }",
+          "when": "Before the compact list opens or closes: its bar (pointer, keyboard), a step chosen (select), Escape (escape)."
+        },
+        {
+          "name": "cancelRequest",
+          "payload": "{ dirty, source }",
+          "when": "When cancel is pressed. The family closes nothing."
+        },
+        {
+          "name": "draftSave",
+          "payload": "{ snapshot, reason, source }",
+          "when": "When a draft is written, before persistence keeps it."
+        },
+        {
+          "name": "completed",
+          "payload": "WizardValue",
+          "when": "After submitWizard accepted the submission."
+        }
+      ],
+      "accessibility": [
+        "No WAI-ARIA pattern names a wizard; the WAI Multi-page Forms tutorial is the source. The progress is the slStepper, an ordered list whose current header carries aria-current=\"step\" and whose headers say their status.",
+        "Every step change moves focus to the step’s heading, which starts with its position, so a reader hears “Step 2 of 4, Company”; focus is not moved on the first render.",
+        "Each step’s form is the consumer’s form[slForm]: Enter in a text field submits it, Reactive Forms marks every control touched on a refused step, and the error summary takes focus.",
+        "A failed submission shows an slAlert above the step and moves focus to it; an accepted one moves focus to the complete part. The draft status is a polite status.",
+        "Back and a header behind the current step keep what was typed; a header ahead is reached only once the steps before it are complete, and stays in the tab order with aria-disabled until then."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-2xl",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-2xl",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-page-ground",
+    "--slotted-radius-full",
+    "--slotted-radius-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-wizard-border",
+    "--slotted-wizard-edit-color",
+    "--slotted-wizard-gap",
+    "--slotted-wizard-header-gap",
+    "--slotted-wizard-progress-inline-size",
+    "--slotted-wizard-rhythm",
+    "--slotted-wizard-segment-color",
+    "--slotted-wizard-segment-color-complete",
+    "--slotted-wizard-segment-color-invalid",
+    "--slotted-wizard-toggle-active-background",
+    "--slotted-wizard-toggle-hover-border-color"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Opening a business account",
+      "note": "Four steps with real fields. Next accepts a step only once its form is valid; the progress beside it marks what is done and closes what is not reached yet.",
+      "language": "html",
+      "source": "<div slWizard [submitWizard]=\"open\">\n  <ng-template slWizardStep=\"account\" label=\"Account\">\n    <form slForm slWizardForm [formGroup]=\"account\">\n      <div slField>\n        <label slFieldLabel>Work email</label>\n        <div slTextField>\n          <input slTextFieldInput formControlName=\"email\" type=\"email\" />\n        </div>\n      </div>\n    </form>\n  </ng-template>\n  <ng-template slWizardComplete>…</ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "Where the progress stands",
+      "note": "progress=\"start\" is a column beside the step, \"top\" a row above it, \"none\" leaves the position in the heading alone.",
+      "language": "html",
+      "source": "<div slWizard progress=\"top\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "validation",
+      "title": "A step refused, by Reactive Forms and by the server",
+      "note": "The email is required, and validate asks the server whether it is taken: Next waits, the answer lands in the form’s summary, and the step turns red in the progress.",
+      "language": "html",
+      "source": "<ng-template slWizardStep=\"account\" label=\"Account\" [validate]=\"emailFree\">\n  <form slForm slWizardForm [formGroup]=\"account\">…</form>\n</ng-template>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "branching",
+      "title": "Steps that depend on an answer",
+      "note": "Choose Business and accept the step: a Company step appears after it. Choose Personal again and it leaves — its answers are kept and never submitted.",
+      "language": "html",
+      "source": "<div slWizard [(value)]=\"value\">\n  <ng-template slWizardStep=\"account\" label=\"Account\">…</ng-template>\n  @if (value()?.account?.type === 'business') {\n    <ng-template slWizardStep=\"company\" label=\"Company\">…</ng-template>\n  }\n  <ng-template slWizardStep=\"billing\" label=\"Billing\">…</ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "optional",
+      "title": "An optional step",
+      "note": "The heading and the progress both say Optional; Skip accepts the step with no answers.",
+      "language": "html",
+      "source": "<ng-template slWizardStep=\"invite\" label=\"Invite teammates\" optional> … </ng-template>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "review",
+      "title": "Review, change and come back",
+      "note": "Change goes to the step and Next reads Save and return: accepting it comes back to the review.",
+      "language": "html",
+      "source": "<dd slDescriptionListAction>\n  <button slWizardEdit=\"billing\"></button>\n</dd>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "submit",
+      "title": "Submitting, failing and finishing",
+      "note": "The first try is refused with the step and the field named: the wizard goes back to Account with the error above it. The second succeeds and the complete part takes focus.",
+      "language": "ts",
+      "source": "const open: WizardSubmit = async (values) => {\n  const answer = await api.openAccount(values);\n  if (answer.error === 'email-taken') {\n    return { step: 'account', errors: { email: 'Taken since you started' } };\n  }\n};\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "drafts",
+      "title": "Drafts, reload and a draft of another version",
+      "note": "Save draft writes to sessionStorage and the status says when. Reload the page and the wizard opens where the draft left it; a slow store shows the step’s own skeleton meanwhile.",
+      "language": "html",
+      "source": "<div slWizard [persistence]=\"drafts\" [version]=\"3\" guardUnsaved>…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "url",
+      "title": "The step in the address",
+      "note": "A router binds step two-way. A link to a step past the work done is clamped to the first incomplete one.",
+      "language": "html",
+      "source": "<div slWizard [(step)]=\"step\" (stepChangeRequest)=\"navigate($event.value)\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "On a phone",
+      "note": "Below 600 pixels the progress folds behind a bar that says the position; the actions stack.",
+      "language": "html",
+      "source": "<div slWizard [(progressOpen)]=\"open\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "dialog",
+      "title": "Inside a layer",
+      "note": "scroll=\"self\" takes the height it is given: the step scrolls and the actions stay at the bottom.",
+      "language": "html",
+      "source": "<div slWizard progress=\"none\" scroll=\"self\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Seven steps, in German",
+      "note": "Long translated names wrap in the column and in the heading; the row of actions wraps before it squeezes a button.",
+      "language": "html",
+      "source": "<ng-template slWizardStep=\"zahlung\" label=\"Zahlungsinformationen und Rechnungsanschrift\">\n  …\n</ng-template>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "forms",
+      "title": "Reactive Forms",
+      "note": "The group lives in your component and keeps what was typed across steps; its raw value is the step’s answers, and a pending async validator holds Next.",
+      "language": "html",
+      "source": "<form slForm slWizardForm [formGroup]=\"billing\">\n  <input slTextFieldInput formControlName=\"city\" />\n</form>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "labels",
+      "title": "Words for another product",
+      "note": "Every word is a message; provideSlotted sets the language once, and a wizard lays its own words over it.",
+      "language": "ts",
+      "source": "providers: [provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } })];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a screen reader hears",
+      "note": "Each step change moves focus to the heading, which says “Step 2 of 4, Company”; Enter in any text field submits the step.",
+      "language": "html",
+      "source": "<div slWizard [messages]=\"{ progress: 'Account opening' }\">…</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}