remix-forms - npm Package Compare versions

Comparing version 0.14.1 to 0.15.0

lib/createField.js

@@ -57,2 +57,10 @@ "use strict";
         });
+        const labelId = `label-for-${name}`;
+        const errorsId = `errors-for-${name}`;
+        const a11yProps = {
+            'aria-labelledby': labelId,
+            'aria-invalid': Boolean(errors),
+            'aria-describedby': errors ? errorsId : undefined,
+            'aria-required': required,
+        };
         const SmartInput = (0, react_1.useMemo)(() => (0, createSmartInput_1.default)({
@@ -95,2 +103,3 @@ inputComponent: Input,
                         return react_1.default.cloneElement(child, {
+                            id: labelId,
                             htmlFor: String(name),
@@ -111,2 +120,3 @@ children: label,
                             value,
+                            a11yProps,
                             ...child.props,
@@ -120,2 +130,3 @@ });
                             ...registerProps,
+                            ...a11yProps,
                             placeholder,
@@ -131,2 +142,3 @@ autoFocus,
                             ...registerProps,
+                            ...a11yProps,
                             placeholder,
@@ -142,2 +154,3 @@ autoFocus,
                             ...registerProps,
+                            ...a11yProps,
                             autoFocus,
@@ -155,2 +168,3 @@ defaultValue: value,
                             ...registerProps,
+                            ...a11yProps,
                             placeholder,
@@ -164,5 +178,12 @@ defaultChecked: Boolean(value),
                             return null;
-                        if (child.props.children || !(errors === null || errors === void 0 ? void 0 : errors.length))
-                            return child;
+                        if (child.props.children || !(errors === null || errors === void 0 ? void 0 : errors.length)) {
+                            return react_1.default.cloneElement(child, {
+                                id: errorsId,
+                                role: 'alert',
+                                ...child.props,
+                            });
+                        }
                         return react_1.default.cloneElement(child, {
+                            id: errorsId,
+                            role: 'alert',
                             children: errorsChildren,
@@ -177,5 +198,5 @@ ...child.props,
         }
-        return ((0, jsx_runtime_1.jsxs)(Field, { hidden: hidden, style: style, ...props, children: [fieldType === 'boolean' ? ((0, jsx_runtime_1.jsxs)(CheckboxWrapper, { children: [(0, jsx_runtime_1.jsx)(Checkbox, { id: String(name), type: type, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultChecked: Boolean(value) }, void 0), (0, jsx_runtime_1.jsx)(Label, { htmlFor: String(name), children: label }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Label, { htmlFor: String(name), children: label }, void 0), (0, jsx_runtime_1.jsx)(SmartInput, { fieldType: fieldType, type: type, selectChildren: selectChildren, multiline: multiline, placeholder: placeholder, registerProps: registerProps, autoFocus: autoFocus, value: value }, void 0)] }, void 0)), Boolean(errorsChildren) && (0, jsx_runtime_1.jsx)(Errors, { children: errorsChildren }, void 0)] }, void 0));
+        return ((0, jsx_runtime_1.jsxs)(Field, { hidden: hidden, style: style, ...props, children: [fieldType === 'boolean' ? ((0, jsx_runtime_1.jsxs)(CheckboxWrapper, { children: [(0, jsx_runtime_1.jsx)(Checkbox, { id: String(name), type: type, ...registerProps, ...a11yProps, placeholder: placeholder, autoFocus: autoFocus, defaultChecked: Boolean(value) }, void 0), (0, jsx_runtime_1.jsx)(Label, { id: labelId, htmlFor: String(name), children: label }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Label, { id: labelId, htmlFor: String(name), children: label }, void 0), (0, jsx_runtime_1.jsx)(SmartInput, { fieldType: fieldType, type: type, selectChildren: selectChildren, multiline: multiline, placeholder: placeholder, registerProps: registerProps, autoFocus: autoFocus, value: value, a11yProps: a11yProps }, void 0)] }, void 0)), Boolean(errorsChildren) && ((0, jsx_runtime_1.jsx)(Errors, { role: "alert", id: errorsId, children: errorsChildren }, void 0))] }, void 0));
     });
 }
 exports.default = createField;

lib/createSmartInput.d.ts

@@ -16,3 +16,4 @@ import React from 'react';
     className?: string;
+    a11yProps?: Record<`aria-${string}`, string | boolean | undefined>;
 };
-export default function createSmartInput<Schema extends SomeZodObject>({ inputComponent: Input, multilineComponent: Multiline, selectComponent: Select, checkboxComponent: Checkbox, }: Pick<FormProps<Schema>, 'fieldComponent' | 'labelComponent' | 'inputComponent' | 'multilineComponent' | 'selectComponent' | 'checkboxComponent' | 'checkboxWrapperComponent' | 'fieldErrorsComponent' | 'errorComponent'>): ({ fieldType, type, value, autoFocus, selectChildren, multiline, placeholder, registerProps, ...props }: SmartInputProps) => JSX.Element | null;
+export default function createSmartInput<Schema extends SomeZodObject>({ inputComponent: Input, multilineComponent: Multiline, selectComponent: Select, checkboxComponent: Checkbox, }: Pick<FormProps<Schema>, 'fieldComponent' | 'labelComponent' | 'inputComponent' | 'multilineComponent' | 'selectComponent' | 'checkboxComponent' | 'checkboxWrapperComponent' | 'fieldErrorsComponent' | 'errorComponent'>): ({ fieldType, type, value, autoFocus, selectChildren, multiline, placeholder, registerProps, a11yProps, ...props }: SmartInputProps) => JSX.Element | null;

lib/createSmartInput.js

@@ -5,3 +5,3 @@ "use strict";
 function createSmartInput({ inputComponent: Input = 'input', multilineComponent: Multiline = 'textarea', selectComponent: Select = 'select', checkboxComponent: Checkbox = 'input', }) {
-    return ({ fieldType, type, value, autoFocus, selectChildren, multiline, placeholder, registerProps, ...props }) => {
+    return ({ fieldType, type, value, autoFocus, selectChildren, multiline, placeholder, registerProps, a11yProps, ...props }) => {
         if (!registerProps)
@@ -11,13 +11,13 @@ return null;
         if (fieldType === 'boolean') {
-            return ((0, jsx_runtime_1.jsx)(Checkbox, { id: name, type: type, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultChecked: Boolean(value), ...props }, void 0));
+            return ((0, jsx_runtime_1.jsx)(Checkbox, { id: name, type: type, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultChecked: Boolean(value), ...a11yProps, ...props }, void 0));
         }
         if (selectChildren) {
-            return ((0, jsx_runtime_1.jsx)(Select, { id: name, ...registerProps, autoFocus: autoFocus, defaultValue: value, ...props, children: selectChildren }, void 0));
+            return ((0, jsx_runtime_1.jsx)(Select, { id: name, ...registerProps, autoFocus: autoFocus, defaultValue: value, ...a11yProps, ...props, children: selectChildren }, void 0));
         }
         if (multiline) {
-            return ((0, jsx_runtime_1.jsx)(Multiline, { id: name, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultValue: value, ...props }, void 0));
+            return ((0, jsx_runtime_1.jsx)(Multiline, { id: name, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultValue: value, ...a11yProps, ...props }, void 0));
         }
-        return ((0, jsx_runtime_1.jsx)(Input, { id: name, type: type, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultValue: value, ...props }, void 0));
+        return ((0, jsx_runtime_1.jsx)(Input, { id: name, type: type, ...registerProps, placeholder: placeholder, autoFocus: autoFocus, defaultValue: value, ...a11yProps, ...props }, void 0));
     };
 }
 exports.default = createSmartInput;

lib/Form.js

@@ -179,5 +179,10 @@ "use strict";
                             return null;
-                        if (child.props.children || !(globalErrors === null || globalErrors === void 0 ? void 0 : globalErrors.length))
-                            return child;
+                        if (child.props.children || !(globalErrors === null || globalErrors === void 0 ? void 0 : globalErrors.length)) {
+                            return react_1.default.cloneElement(child, {
+                                role: 'alert',
+                                ...child.props,
+                            });
+                        }
                         return react_1.default.cloneElement(child, {
+                            role: 'alert',
                             children: globalErrors.map((error) => ((0, jsx_runtime_1.jsx)(Error, { children: error }, error))),
@@ -189,3 +194,3 @@ ...child.props,
                         return react_1.default.cloneElement(child, {
-                            disabled: disabled,
+                            disabled,
                             children: buttonLabel,
@@ -200,4 +205,4 @@ ...child.props,
     }
-    return ((0, jsx_runtime_1.jsxs)(Component, { method: method, onSubmit: onSubmit, ...props, children: [beforeChildren, fields.map((field) => renderField({ Field, ...field })), (globalErrors === null || globalErrors === void 0 ? void 0 : globalErrors.length) && ((0, jsx_runtime_1.jsx)(Errors, { children: globalErrors.map((error) => ((0, jsx_runtime_1.jsx)(Error, { children: error }, error))) }, void 0)), (0, jsx_runtime_1.jsx)(Button, { disabled: disabled, children: buttonLabel }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Component, { method: method, onSubmit: onSubmit, ...props, children: [beforeChildren, fields.map((field) => renderField({ Field, ...field })), (globalErrors === null || globalErrors === void 0 ? void 0 : globalErrors.length) && ((0, jsx_runtime_1.jsx)(Errors, { role: "alert", children: globalErrors.map((error) => ((0, jsx_runtime_1.jsx)(Error, { children: error }, error))) }, void 0)), (0, jsx_runtime_1.jsx)(Button, { disabled: disabled, children: buttonLabel }, void 0)] }, void 0));
 }
 exports.Form = Form;

package.json

 {
   "name": "remix-forms",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Magically create forms + actions in Remix!",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

50838

increased by2.75%

Lines of code

876

increased by3.18%

No dependency changes