form-father 0.5.0 → 0.7.0

package/dist/index.js

@@ -510,7 +510,11 @@ function dateOrder(startField, endField, message = 'Дата окончания
     }, { field: endField, rule, message });
 }
 let loaderIdCounter = 0;
+let errorIdCounter = 0;
 const FORM_INSTANCES = new WeakMap();
+const ERROR_DESCRIBEDBY_ID_ATTRIBUTE = 'data-form-father-describedby-id';
+const ADDED_DESCRIBEDBY_ID_ATTRIBUTE = 'data-form-father-added-describedby-id';
+const ERROR_SUMMARY_ATTRIBUTE = 'data-form-father-summary';
 /** Изначальная дефолтная схема. */
 const INITIAL_DEFAULT_SCHEMA = {
     tel: {
@@ -595,6 +599,9 @@ class Form {
             validationDebounce: 0,
             errorContainerAttribute: 'data-error-container',
             validationStateAttribute: 'data-form-father-state',
+            ariaDescribeErrors: true,
+            errorIdPrefix: 'form-father-error',
+            errorSummary: false,
             observeMutations: false,
         };
         /* Слияние параметров: глобальные параметры → пользовательские параметры */
@@ -699,6 +706,7 @@ class Form {
             this.clearFieldValidationState($field);
         });
         this.hideErrorForm();
+        this.hideErrorSummary();
         return this;
     }
     isErrorResponse(issue) {
@@ -763,6 +771,7 @@ class Form {
         this.normalizeValidationIssues(issues, source).forEach(issue => {
             this.applyValidationIssue(issue, source);
         });
+        this.syncErrorSummary();
         return this;
     }
     validateFormValidators() {
@@ -931,6 +940,52 @@ class Form {
             return null;
         }
     }
+    toSafeIdPart(value) {
+        return (value
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9_-]+/gi, '-')
+            .replace(/^-+|-+$/g, '') || 'field');
+    }
+    createErrorId($input) {
+        const prefix = this.config.errorIdPrefix || 'form-father-error';
+        return `${this.toSafeIdPart(prefix)}-${this.toSafeIdPart(this.getFieldKey($input))}-${++errorIdCounter}`;
+    }
+    ensureElementId($input, $error) {
+        if (!$error.id) {
+            $error.id = $input.getAttribute(ERROR_DESCRIBEDBY_ID_ATTRIBUTE) || this.createErrorId($input);
+        }
+        return $error.id;
+    }
+    addErrorDescription($input, $error) {
+        if (!$error.hasAttribute('role'))
+            $error.setAttribute('role', 'alert');
+        const errorId = this.ensureElementId($input, $error);
+        $input.setAttribute(ERROR_DESCRIBEDBY_ID_ATTRIBUTE, errorId);
+        if (this.config.ariaDescribeErrors === false)
+            return;
+        const currentIds = ($input.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+        if (!currentIds.includes(errorId)) {
+            $input.setAttribute('aria-describedby', [...currentIds, errorId].join(' '));
+            $input.setAttribute(ADDED_DESCRIBEDBY_ID_ATTRIBUTE, errorId);
+        }
+    }
+    removeErrorDescription($input) {
+        const addedId = $input.getAttribute(ADDED_DESCRIBEDBY_ID_ATTRIBUTE);
+        if (addedId) {
+            const nextIds = ($input.getAttribute('aria-describedby') || '')
+                .split(/\s+/)
+                .filter(id => id && id !== addedId);
+            if (nextIds.length > 0) {
+                $input.setAttribute('aria-describedby', nextIds.join(' '));
+            }
+            else {
+                $input.removeAttribute('aria-describedby');
+            }
+        }
+        $input.removeAttribute(ERROR_DESCRIBEDBY_ID_ATTRIBUTE);
+        $input.removeAttribute(ADDED_DESCRIBEDBY_ID_ATTRIBUTE);
+    }
     /**
      * Показывает ошибку для поля ввода.
      *
@@ -942,8 +997,7 @@ class Form {
         const $errorContainer = this.getErrorContainer($input);
         if ($errorContainer) {
             $errorContainer.textContent = text;
-            if (!$errorContainer.hasAttribute('role'))
-                $errorContainer.setAttribute('role', 'alert');
+            this.addErrorDescription($input, $errorContainer);
             $errorContainer.removeAttribute('hidden');
             return;
         }
@@ -955,6 +1009,9 @@ class Form {
         const customShowError = $inputWrapper.showError;
         if (typeof customShowError === 'function') {
             customShowError.call($inputWrapper, text);
+            const $customError = $inputWrapper.querySelector('[data-form-father-error]');
+            if ($customError)
+                this.addErrorDescription($input, $customError);
             return;
         }
         $inputWrapper.classList.add('input__wrapper--error');
@@ -966,6 +1023,7 @@ class Form {
             $input.insertAdjacentElement('afterend', $error);
         }
         $error.textContent = text;
+        this.addErrorDescription($input, $error);
     }
     /** Показывает лоадер */
     showLoader() {
@@ -1024,6 +1082,7 @@ class Form {
         const $inputWrapper = closest($input, this.config.inputWrapperSelector) || $input.parentElement;
         const $errorContainer = this.getErrorContainer($input);
         $input.removeAttribute('aria-invalid');
+        this.removeErrorDescription($input);
         if ($errorContainer) {
             $errorContainer.textContent = '';
             $errorContainer.setAttribute('hidden', '');
@@ -1034,6 +1093,125 @@ class Form {
             $inputWrapper.getAttribute('data-type-error') || 'default';
         }
     }
+    getErrorSummaryOptions() {
+        if (!this.config.errorSummary)
+            return null;
+        return this.config.errorSummary === true ? {} : this.config.errorSummary;
+    }
+    getErrorSummaryContainer(options, create) {
+        if (options.selector) {
+            try {
+                return (this.$el.querySelector(options.selector) ||
+                    document.querySelector(options.selector));
+            }
+            catch (_a) {
+                console.warn(`[FormFather] Invalid error summary selector "${options.selector}"`);
+                return null;
+            }
+        }
+        const existing = this.$el.querySelector(`[${ERROR_SUMMARY_ATTRIBUTE}]`);
+        if (existing || !create)
+            return existing;
+        const $summary = document.createElement('div');
+        $summary.setAttribute(ERROR_SUMMARY_ATTRIBUTE, '');
+        this.$el.insertAdjacentElement('afterbegin', $summary);
+        return $summary;
+    }
+    prepareErrorSummaryContainer($summary) {
+        $summary.setAttribute(ERROR_SUMMARY_ATTRIBUTE, '');
+        if (!$summary.hasAttribute('role'))
+            $summary.setAttribute('role', 'alert');
+        if (!$summary.hasAttribute('tabindex'))
+            $summary.setAttribute('tabindex', '-1');
+        $summary.removeAttribute('hidden');
+    }
+    focusErrorSummary($summary) {
+        try {
+            $summary.focus({ preventScroll: true });
+        }
+        catch (_a) {
+            $summary.focus();
+        }
+    }
+    focusFieldFromSummary($field) {
+        if (typeof $field.scrollIntoView === 'function') {
+            $field.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        try {
+            $field.focus({ preventScroll: true });
+        }
+        catch (_a) {
+            $field.focus();
+        }
+    }
+    renderDefaultErrorSummary($summary, errors, options) {
+        $summary.textContent = '';
+        const $title = document.createElement('p');
+        $title.setAttribute('data-form-father-summary-title', '');
+        $title.textContent = options.title || 'Проверьте поля формы';
+        const $list = document.createElement('ul');
+        $list.setAttribute('data-form-father-summary-list', '');
+        errors.forEach(error => {
+            const $item = document.createElement('li');
+            const $field = error.field === FORM_ERROR_FIELD ? null : this.findFieldByName(error.field);
+            if ($field) {
+                const $button = document.createElement('button');
+                $button.type = 'button';
+                $button.setAttribute('data-form-father-summary-field', error.field);
+                $button.textContent = error.message;
+                $button.addEventListener('click', () => this.focusFieldFromSummary($field));
+                $item.appendChild($button);
+            }
+            else {
+                const $message = document.createElement('span');
+                $message.textContent = error.message;
+                $item.appendChild($message);
+            }
+            $list.appendChild($item);
+        });
+        $summary.append($title, $list);
+    }
+    renderErrorSummary(errors = this.getErrors()) {
+        var _a;
+        const options = this.getErrorSummaryOptions();
+        if (!options)
+            return;
+        if (errors.length === 0) {
+            this.hideErrorSummary();
+            return;
+        }
+        const $summary = this.getErrorSummaryContainer(options, true);
+        if (!$summary)
+            return;
+        this.prepareErrorSummaryContainer($summary);
+        const rendered = (_a = options.render) === null || _a === void 0 ? void 0 : _a.call(options, errors.map(error => (Object.assign({}, error))), this);
+        if (rendered instanceof HTMLElement) {
+            $summary.replaceChildren(rendered);
+        }
+        else if (typeof rendered === 'string') {
+            $summary.innerHTML = rendered;
+        }
+        else if (!options.render) {
+            this.renderDefaultErrorSummary($summary, errors, options);
+        }
+        if (options.focus)
+            this.focusErrorSummary($summary);
+    }
+    hideErrorSummary() {
+        const options = this.getErrorSummaryOptions() || {};
+        const $summary = this.getErrorSummaryContainer(options, false);
+        if (!$summary)
+            return;
+        $summary.replaceChildren();
+        $summary.setAttribute('hidden', '');
+    }
+    syncErrorSummary() {
+        if (this.errors.length === 0) {
+            this.hideErrorSummary();
+            return;
+        }
+        this.renderErrorSummary();
+    }
     /**
      * Проскроливает до первого ошибочного поля.
      *
@@ -1331,6 +1509,7 @@ class Form {
         this.showError($field, message);
         $field.removeAttribute('aria-busy');
         this.setFieldValidationState($field, 'invalid');
+        this.syncErrorSummary();
         return true;
     }
     /** Проверяет одно поле по имени или DOM-элементу. */
@@ -1342,7 +1521,9 @@ class Form {
                 return false;
             }
             const { rules, messages } = this.getFieldValidationConfig($field);
-            return this.runFieldValidation($field, rules, messages);
+            const isValid = yield this.runFieldValidation($field, rules, messages);
+            this.syncErrorSummary();
+            return isValid;
         });
     }
     /**
@@ -1394,6 +1575,12 @@ class Form {
             if (!ok && this.config.focusFirstErroredInput) {
                 this.focusFirstErroredInput(visibleErroredInputs);
             }
+            if (ok) {
+                this.hideErrorSummary();
+            }
+            else {
+                this.renderErrorSummary();
+            }
             return ok;
         });
     }
@@ -1620,6 +1807,7 @@ class Form {
             this._cancelAnimations(formErrorWrapper);
             formErrorWrapper.remove();
         }
+        this.hideErrorSummary();
         // 3) Скрыть/удалить лоадер на кнопке submit
         this.$submits.forEach($submit => {
             $submit.classList.remove('button--loading');
@@ -1749,6 +1937,7 @@ class Form {
         if (responseBody.error !== true)
             return;
         if (responseBody['error-msg']) {
+            this.setErrorRecord(FORM_ERROR_FIELD, 'server', responseBody['error-msg'], 'server');
             this.showErrorForm(responseBody['error-msg']);
         }
         if (responseBody.errors) {
@@ -1763,6 +1952,7 @@ class Form {
                     this.setFieldValidationState($field, 'invalid');
                 }
                 else {
+                    this.setErrorRecord(error.name, 'server', error['error-msg'], 'server');
                     console.warn(`Не найдено поле с именем: ${error.name}, для вывода ошибки: ${error['error-msg']}`);
                 }
             });
@@ -1771,6 +1961,7 @@ class Form {
             if (this.config.focusFirstErroredInput === true)
                 this.focusFirstErroredInput(fieldsList);
         }
+        this.syncErrorSummary();
     }
     sendData() {
         return __awaiter(this, void 0, void 0, function* () {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -24,6 +24,16 @@ export interface SubmitResult {
 export interface FormResetOptions {
     clearErrors?: boolean;
 }
+export interface ErrorSummaryOptions {
+    /** Existing summary container selector. If omitted, Form Father creates `[data-form-father-summary]` in the form. */
+    selector?: string;
+    /** Heading text for the default summary renderer. */
+    title?: string;
+    /** Move focus to the summary after rendering. Useful for submit-time screen reader announcements. */
+    focus?: boolean;
+    /** Custom renderer. Return an element/string or render into your own container and return nothing. */
+    render?: (errors: ValidationError[], formInstance: Form) => HTMLElement | string | void;
+}
 export interface ValidationIssue {
     field?: string;
     rule?: string;
@@ -146,6 +156,12 @@ export interface FormOptions {
     errorContainerAttribute?: string;
     /** Атрибут, куда пишется состояние поля: `validating`, `valid` или `invalid`. */
     validationStateAttribute?: string;
+    /** Связывать текст ошибки с полем через `aria-describedby`. По умолчанию `true`. */
+    ariaDescribeErrors?: boolean;
+    /** Префикс id для автоматически созданных элементов ошибок. */
+    errorIdPrefix?: string;
+    /** Error summary для всей формы. По умолчанию выключен; `true` включает дефолтный renderer. */
+    errorSummary?: boolean | ErrorSummaryOptions;
     /** Следить за динамически добавленными/удалёнными полями и submit-кнопками. По умолчанию `false`. */
     observeMutations?: boolean;
     /** Функция для обёртки отправляемых данных. */
@@ -243,6 +259,11 @@ export default class Form {
     private scheduleFieldValidation;
     private setupMutationObserver;
     private getErrorContainer;
+    private toSafeIdPart;
+    private createErrorId;
+    private ensureElementId;
+    private addErrorDescription;
+    private removeErrorDescription;
     /**
      * Показывает ошибку для поля ввода.
      *
@@ -260,6 +281,15 @@ export default class Form {
      * @param {HTMLInputElement} $input - Поле ввода.
      */
     private hideError;
+    private getErrorSummaryOptions;
+    private getErrorSummaryContainer;
+    private prepareErrorSummaryContainer;
+    private focusErrorSummary;
+    private focusFieldFromSummary;
+    private renderDefaultErrorSummary;
+    private renderErrorSummary;
+    private hideErrorSummary;
+    private syncErrorSummary;
     /**
      * Проскроливает до первого ошибочного поля.
      *

package/docs/api/README.md

@@ -0,0 +1,153 @@
+# Form Father API Reference
+
+This page is a compact reference for the public API exported by `form-father`.
+
+## Main Import
+
+```ts
+import Form from 'form-father';
+```
+
+`Form` is the default export and is constructed with a native `<form>` element.
+
+```ts
+const form = new Form(document.querySelector('form')!, {
+	inputWrapperSelector: '.field',
+	validateOn: ['blur', 'change'],
+	revalidateOn: ['input', 'change'],
+	errorSummary: true,
+});
+```
+
+## Form Options
+
+| Option | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `inputSelector` | `string` | `.input` | Selector used by legacy input collection helpers. |
+| `inputWrapperSelector` | `string` | `.input-primary` | Field wrapper selector used for inline error rendering. |
+| `showLoaderButton` | `boolean` | `true` | Adds a loader to submit buttons while a request is pending. |
+| `loaderColor` | `string` | `#fff` | Loader SVG color. |
+| `scrollToFirstErroredInput` | `boolean` | `true` | Scrolls to the first invalid field. |
+| `focusFirstErroredInput` | `boolean` | `false` | Focuses the first invalid field after validation. |
+| `validateOn` | `ValidationTrigger | ValidationTrigger[]` | `submit` | Live validation triggers: `submit`, `input`, `blur`, `change`. |
+| `revalidateOn` | `ValidationTrigger | ValidationTrigger[]` | `input`, `change` | Rechecks fields that are already invalid. |
+| `validationDebounce` | `number` | `0` | Delay for live validation. |
+| `validationSchema` | `ValidationSchema` | built in defaults | Field rules matched by selectors or `data-validate`. |
+| `formValidators` | `FormValidator | FormValidator[]` | none | Cross-field and form-level validation. |
+| `errorContainerAttribute` | `string` | `data-error-container` | Attribute containing a selector for a custom error container. |
+| `validationStateAttribute` | `string` | `data-form-father-state` | Field state attribute: `validating`, `valid`, `invalid`. |
+| `ariaDescribeErrors` | `boolean` | `true` | Links inline errors to fields with `aria-describedby`. |
+| `errorIdPrefix` | `string` | `form-father-error` | Prefix for generated error element ids. |
+| `errorSummary` | `boolean | ErrorSummaryOptions` | `false` | Enables an accessible form error summary. |
+| `observeMutations` | `boolean` | `false` | Rebinds controls when fields/buttons are added dynamically. |
+| `wrapData` | `(data) => data` | none | Transforms form values before request body creation. |
+| `logging` | `boolean` | `false` | Logs submitted `FormData` values. |
+
+## Lifecycle Callbacks
+
+| Callback | When it runs |
+| --- | --- |
+| `onBeforeValidate(form)` | Before submit-time validation. |
+| `onAfterValidate(isValid, form)` | After validation and before submit. |
+| `onValidationError(errors, form)` | When client-side validation fails. |
+| `onBeforeSubmit(form)` | Before a valid form is sent. Return `false` to cancel. |
+| `onSubmit(form)` | When request sending starts. |
+| `onResponse(body, form)` | After a response body is parsed. |
+| `onResponseSuccess(body, form)` | For successful HTTP responses with `success: true`. |
+| `onResponseUnsuccess(body, form)` | For non-OK responses, `success !== true`, or invalid JSON. |
+| `onSubmitError(error, form)` | When sending or response parsing throws. |
+
+## Instance Methods
+
+| Method | Returns | Purpose |
+| --- | --- | --- |
+| `validate()` | `Promise<boolean>` | Validates the whole form. |
+| `validateField(field)` | `Promise<boolean>` | Validates one field by `name` or element. |
+| `submit()` | `Promise<SubmitResult | undefined>` | Sends the form programmatically. |
+| `showFieldError(field, message, source?)` | `boolean` | Shows a field error manually. |
+| `setErrors(errors, source?)` | `this` | Applies backend, form-level, or manual errors. |
+| `getErrors()` | `ValidationError[]` | Returns current error records. |
+| `getValues()` | `Record<string, any>` | Serializes the form into a plain object. |
+| `setValues(values)` | `this` | Sets field values by `name` and dispatches `input`/`change`. |
+| `clearErrors()` | `this` | Clears field and form errors. |
+| `reset(options?)` | `this` | Calls native `form.reset()` and clears errors by default. |
+| `clearInputs()` | `void` | Clears input values without resetting native defaults. |
+| `updateOptions(options)` | `this` | Updates options and rebinds listeners. |
+| `destroy()` | `void` | Removes listeners, loaders, error nodes, and runtime state. |
+
+## Static Methods and Constants
+
+```ts
+Form.initAll('form[data-form-father]', options);
+Form.setDefaultParams({ inputWrapperSelector: '.field' });
+Form.defaultValidationSchema = {};
+```
+
+| Export | Purpose |
+| --- | --- |
+| `FORM_ERROR_FIELD` | Constant for form-level errors in `getErrors()` and `setErrors()`. |
+| `Form.initAll(selector, options)` | Initializes matching forms and reuses existing instances. |
+| `Form.setDefaultParams(params)` | Merges global default options for future instances. |
+| `Form.defaultValidationSchema` | Global default validation schema. |
+
+## Validators
+
+```ts
+import {
+	createLengthValidator,
+	createPatternValidator,
+	registerFieldValidator,
+	registerValidator,
+} from 'form-father';
+```
+
+| Export | Purpose |
+| --- | --- |
+| `registerValidator(name, fn, message, options?)` | Registers a full validator. |
+| `registerFieldValidator(name, predicate, message, options?)` | Registers a predicate-only field validator. |
+| `getValidator(name)` | Reads one validator definition. |
+| `getAllValidators()` | Reads the validator registry. |
+| `createPatternValidator(pattern)` | Builds a regex validator. |
+| `createLengthValidator(options)` | Builds min/max length validation. |
+
+## Form Validators
+
+```ts
+import { dateOrder, requiredIf, sameAsField } from 'form-father';
+```
+
+| Export | Purpose |
+| --- | --- |
+| `createFormValidator(predicate, issue)` | Builds a reusable cross-field validator. |
+| `sameAsField(field, otherField, message?, rule?)` | Checks that two values match. |
+| `requiredIf(field, condition, message?, rule?)` | Makes a field required when a predicate is true. |
+| `dateOrder(startField, endField, message?, rule?)` | Checks chronological field order. |
+
+## Schema Adapters
+
+```ts
+import { createSchemaValidator, registerSchemaValidator } from 'form-father';
+```
+
+Adapters expect a schema-like object with either `safeParse(value)` or `parse(value)`.
+
+| Export | Purpose |
+| --- | --- |
+| `createSchemaValidator(schema, message?)` | Converts a schema into a field validator function. |
+| `registerSchemaValidator(name, schema, message?, options?)` | Registers a schema-backed rule. |
+| `createFieldValidator(predicate, message)` | Creates a simple predicate validator. |
+
+## Helpers
+
+| Export | Purpose |
+| --- | --- |
+| `serializeToFormData(element)` | Serializes a form-like element into `FormData`. |
+| `serializeFormToJSON(form)` | Serializes a form into a plain object. |
+| `isEmailValid(value)` | Checks email format. |
+| `isUrlValid(value)` | Checks URLs, domains, IPs, and `localhost`. |
+| `isPhoneValid(value)` | Checks Russian `+7XXXXXXXXXX` phone numbers. |
+| `closest(element, selector)` | Finds a closest matching ancestor. |
+| `parseCommonResponseProperties(body)` | Normalizes common response flags. |
+| `blockScrollBody()` | Locks body scrolling. |
+| `unblockScrollBody()` | Restores body scrolling. |
+

package/docs/demo/README.md

@@ -0,0 +1,37 @@
+# Demo Guide
+
+The demo is a static, dependency-light page that exercises common Form Father flows after a package build.
+
+```bash
+npm run build
+npm run demos
+```
+
+Open the Vite URL printed by the command. The page loads `dist/FormFather.min.js` and `demos/main.js`, so it reflects the
+actual browser bundle.
+
+## Demo Forms
+
+| Form | What it demonstrates |
+| --- | --- |
+| Login | Live validation, async validator state, password confirmation, and custom error containers. |
+| Callback | Server-side field errors and form-level API errors. |
+| Search | `GET` forms and query-string body handling. |
+| Multipart | Browser-managed `FormData` upload flow. |
+| Public API | `setValues()`, `validateField()`, `setErrors()`, `getValues()`, and `clearErrors()`. |
+
+## Useful Manual Checks
+
+- Enter `taken@example.com` in the Login email field to see async validation fail.
+- Submit Callback with a valid phone to see backend field errors applied after the mocked response.
+- Clear the Search query and submit to inspect the accessible error summary.
+- Use Public API buttons to inspect programmatic state changes in the Output panel.
+
+## Files
+
+| File | Purpose |
+| --- | --- |
+| `demos/index.html` | Demo markup and forms. |
+| `demos/main.js` | Mock API, validator registration, `Form.initAll()`, and public API playground actions. |
+| `demos/styles.css` | Minimal UI styling for fields, summaries, output, and loading states. |
+

package/docs/en/README.md

@@ -60,6 +60,7 @@ import Form, {
 	type FormValidator,
 	type ValidationIssue,
 	type FormValidatorPredicate,
+	type ErrorSummaryOptions,
 } from 'form-father';
 ```
 
@@ -85,6 +86,9 @@ import Form, {
   `data-error-container`.
 - **validationStateAttribute**: Field state attribute: `validating`, `valid`, or `invalid`. Defaults to
   `data-form-father-state`.
+- **ariaDescribeErrors**: Links inline error text to the field with `aria-describedby`. Defaults to `true`.
+- **errorIdPrefix**: Prefix for automatically generated error element ids. Defaults to `form-father-error`.
+- **errorSummary**: Form error summary: `true` for the default renderer or `{ selector, title, focus, render }`.
 - **observeMutations**: Watches dynamically added fields and submit buttons.
 - **formValidators**: A form validator or array of validators for cross-field rules.
 
@@ -135,8 +139,38 @@ import Form, {
 - `data-error-container` points to a custom error container without requiring wrapper markup.
 - During async validation, fields receive `aria-busy="true"` and a `validating` state attribute; stale validator
   responses are ignored.
+- Inline errors receive `role="alert"` and are linked to fields with `aria-describedby`.
 - `data-custom-validate` is still supported for backward compatibility.
 
+### Error summary and a11y
+
+```html
+<form data-form-father novalidate>
+	<div data-form-father-summary hidden></div>
+	<label>
+		Email
+		<input class="input" name="email" data-validate="required|email" />
+	</label>
+	<button type="submit">Submit</button>
+</form>
+```
+
+```ts
+new Form($form, {
+	inputWrapperSelector: 'label',
+	errorSummary: {
+		title: 'Please check the form',
+		focus: true,
+	},
+});
+```
+
+- If the form already contains `[data-form-father-summary]`, Form Father uses it; otherwise `errorSummary: true` creates
+  a summary at the start of the form.
+- `selector` sends the summary into your own container.
+- `render(errors, form)` lets you fully replace the summary markup.
+- `ariaDescribeErrors: false` disables automatic error id insertion into `aria-describedby`.
+
 Final rule order:
 
 ```text
@@ -192,9 +226,12 @@ For simple checks, use `createFieldValidator(predicate, message)`.
 
 ## Demos and Recipes
 
-- `demos/index.html` is a static login/callback/search/upload demo after `npm run build`.
+- `demos/index.html` is a static login/callback/search/upload/public API demo after `npm run build`.
 - `npm run demos` builds the package and starts the Vite demo server.
+- `docs/api/README.md` is a compact reference for public API, options, methods, and exports.
+- `docs/demo/README.md` explains manual demo checks and demo form coverage.
 - `docs/recipes/README.md` contains short API, data-attribute, adapter, and server-error recipes.
+- `CHANGELOG.md` tracks releases and coverage baselines.
 
 ## Helpers
 
@@ -216,6 +253,7 @@ The library provides a number of utility functions:
 
 - **npm run build**: Builds the project.
 - **npm run watch**: Builds the project in watch mode.
+- **npm run docs:check**: Checks docs links, version references, demo files, and package README sync.
 - **npm run demos**: Runs a demo version using Vite.
 
 ## Contributing

package/docs/recipes/README.md

@@ -122,3 +122,29 @@ adding runtime dependencies to Form Father.
 ```
 
 Field errors are shown through the same rendering path as client-side validation errors.
+
+## Accessible error summary
+
+```html
+<form data-form-father novalidate>
+	<div data-form-father-summary hidden></div>
+	<label>
+		Email
+		<input class="input" name="email" data-validate="required|email" />
+	</label>
+	<button type="submit">Submit</button>
+</form>
+```
+
+```ts
+const form = new Form(document.querySelector('form')!, {
+	inputWrapperSelector: 'label',
+	errorSummary: {
+		title: 'Please check the form',
+		focus: true,
+	},
+});
+```
+
+Inline errors are linked to fields with `aria-describedby` by default. Use `ariaDescribeErrors: false` if your design
+system owns that relationship itself.