@websolutespa/bom-mixer-ui 1.10.7 → 1.10.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.10.8
+
+### Patch Changes
+
+- Modified: form fields & errors a11y
+
 ## 1.10.7
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -11393,12 +11393,11 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(_a, ref) {
   }, className, variant);
   const globalVariants = useVariants('input', inputVariants);
   variants = variants || globalVariants;
-  return jsxRuntime.jsxs(StyledInputContainer, Object.assign({
+  return jsxRuntime.jsxs(StyledInputContainer, {
     className: classNames,
     variant: variant,
     variants: variants,
-    "data-focus-visible": focus || undefined
-  }, props, {
+    "data-focus-visible": focus || undefined,
     children: [before, jsxRuntime.jsx(StyledInput, Object.assign({
       className: 'input',
       ref: ref,
@@ -11411,7 +11410,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(_a, ref) {
       onFocus: onFocus_,
       onBlur: onBlur_
     }, props)), after]
-  }));
+  });
 });
 
 const RadioContext = /*#__PURE__*/React.createContext(null);
@@ -13029,12 +13028,21 @@ const StyledFieldError = styled__default.default.div`
 function FieldError(_a) {
   var {
       state,
+      label,
       className,
       variant = 'default',
       variants
     } = _a,
-    props = __rest(_a, ["state", "className", "variant", "variants"]);
-  const label = bomMixerHooks.useLabel();
+    props = __rest(_a, ["state", "label", "className", "variant", "variants"]);
+  const errorLabel = bomMixerHooks.useLabel();
+  const getErrorLabel = error => {
+    const text = label ? errorLabel(`error.${error.key}.label`, {
+      label
+    }) || errorLabel(`error.${error.key}`, {
+      label
+    }) : errorLabel(`error.${error.key}`);
+    return text;
+  };
   const classNames = bomCore.getClassNames('field-error', className, variant);
   const globalVariants = useVariants('fieldError', fieldErrorVariants);
   variants = variants || globalVariants;
@@ -13042,9 +13050,10 @@ function FieldError(_a) {
     children: state.flags.touched && state.errors.map(error => jsxRuntime.jsx(StyledFieldError, Object.assign({
       className: classNames,
       variant: variant,
-      variants: variants
+      variants: variants,
+      role: "alert"
     }, props, {
-      children: label(`error.${error.key}`)
+      children: getErrorLabel(error)
     }), error.key))
   });
 }
@@ -13074,6 +13083,7 @@ function FieldAccept(_ref) {
   const onFocus = _ => {
     setFocus(true);
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value ? 'true' : 'false'
@@ -13093,7 +13103,9 @@ function FieldAccept(_ref) {
           value: "true",
           name: uniqueNameTrue,
           id: uniqueNameTrue,
-          disabled: state.flags.disabled || state.flags.readonly
+          disabled: state.flags.disabled || state.flags.readonly,
+          "aria-invalid": state.flags.invalid,
+          "aria-describedby": `${uniqueName}-error`
         }), label('form.accept.true')]
       }), jsxRuntime.jsxs(Label, {
         name: uniqueNameFalse,
@@ -13105,10 +13117,11 @@ function FieldAccept(_ref) {
           disabled: state.flags.disabled || state.flags.readonly
         }), label('form.accept.false')]
       })]
-    }), control.label && jsxRuntime.jsx(Text, {
-      children: label(control.label)
+    }), controlLabel && jsxRuntime.jsx(Text, {
+      children: controlLabel
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -13182,14 +13195,15 @@ function FieldAutocomplete(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
   }) : jsxRuntime.jsxs(Field, {
     state: state,
-    children: [jsxRuntime.jsx(Label, {
+    children: [controlLabel && jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
-      children: control.label && label(control.label)
+      children: controlLabel
     }), jsxRuntime.jsx(Autocomplete, {
       id: uniqueName,
       name: uniqueName,
@@ -13202,7 +13216,8 @@ function FieldAutocomplete(_ref) {
       background: "var(--color-neutral-100)",
       overflow: "hidden"
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -13231,16 +13246,17 @@ function FieldCard(_a) {
   const onFocus = _ => {
     setFocus(true);
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value ? state.value.toString() : ''
   }) : jsxRuntime.jsxs(Field, Object.assign({
     state: state
   }, props, {
-    children: [jsxRuntime.jsx(Label, {
+    children: [controlLabel && jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
       margin: "0",
-      children: control.label && label(control.label)
+      children: controlLabel
     }), jsxRuntime.jsx(RadioCard.Group, {
       id: uniqueName,
       name: uniqueName,
@@ -13260,7 +13276,9 @@ function FieldCard(_a) {
         })]
       }, option.id))
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      label: controlLabel,
+      id: `${uniqueName}-error`
     })]
   }));
 }
@@ -13286,6 +13304,7 @@ function FieldCheckbox(_a) {
   const onFocus = _ => {
     setFocus(true);
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value ? state.value.toString() : ''
@@ -13302,14 +13321,17 @@ function FieldCheckbox(_a) {
         onBlur: onBlur,
         onFocus: onFocus,
         disabled: state.flags.disabled || state.flags.readonly,
-        checked: state.value === true
-      }), control.label && jsxRuntime.jsx("span", {
+        checked: state.value === true,
+        "aria-invalid": state.flags.invalid,
+        "aria-describedby": `${uniqueName}-error`
+      }), controlLabel && jsxRuntime.jsx("span", {
         dangerouslySetInnerHTML: {
-          __html: label(control.label)
+          __html: controlLabel
         }
       })]
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      id: `${uniqueName}-error`
     })]
   }));
 }
@@ -13336,6 +13358,7 @@ function FieldCombobox(_ref) {
     setValue(option);
   };
   // console.log('FieldCombobox', control.value);
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
@@ -13348,12 +13371,14 @@ function FieldCombobox(_ref) {
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
-      children: [control.label && jsxRuntime.jsx(Combobox.Label, {
-        children: label(control.label)
+      children: [controlLabel && jsxRuntime.jsx(Combobox.Label, {
+        children: controlLabel
       }), jsxRuntime.jsx(Combobox.Combobox, {
         after: icon || jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {}),
         autoSelect: true,
-        placeholder: control.placeholder && label(control.placeholder)
+        placeholder: control.placeholder && label(control.placeholder),
+        "aria-invalid": state.flags.invalid,
+        "aria-describedby": `${uniqueName}-error`
       }), jsxRuntime.jsx(Combobox.Popover, {
         gutter: 4,
         sameWidth: true,
@@ -13372,7 +13397,9 @@ function FieldCombobox(_ref) {
         }
       })]
     }), ((_a = control.customData) === null || _a === void 0 ? void 0 : _a.after) && control.customData.after, jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      label: controlLabel,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -13415,6 +13442,7 @@ function FieldConsent(_ref) {
   };
   const detail = (_a = control.customData) === null || _a === void 0 ? void 0 : _a.detail;
   const [active, setActive] = React.useState(false);
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value ? 'true' : 'false'
@@ -13427,9 +13455,9 @@ function FieldConsent(_ref) {
     borderBottom: "1px solid var(--color-neutral-200)",
     children: [jsxRuntime.jsxs("div", {
       className: "field-consent__description",
-      children: [control.label && jsxRuntime.jsx("span", {
+      children: [controlLabel && jsxRuntime.jsx("span", {
         dangerouslySetInnerHTML: {
-          __html: label(control.label)
+          __html: controlLabel
         }
       }), detail && jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: ["\u00A0", jsxRuntime.jsx(Button, {
@@ -13454,7 +13482,9 @@ function FieldConsent(_ref) {
           onBlur: onTrueBlur,
           onFocus: onTrueFocus,
           disabled: state.flags.disabled || state.flags.readonly,
-          checked: state.value === true
+          checked: state.value === true,
+          "aria-invalid": state.flags.invalid,
+          "aria-describedby": `${uniqueName}-error`
         }), jsxRuntime.jsx("span", {
           children: label('form.consent.true')
         })]
@@ -13474,7 +13504,8 @@ function FieldConsent(_ref) {
         })]
       })]
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -13490,6 +13521,7 @@ function FieldImplicit(_a) {
   const label = bomMixerHooks.useLabel();
   const uniqueName = `${control.name}-${uid}`;
   const [state, setValue, setTouched] = bomMixerForms.useControl(control);
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value || ''
@@ -13503,9 +13535,9 @@ function FieldImplicit(_a) {
         id: uniqueName,
         name: uniqueName,
         value: String(state.value)
-      }), control.label && jsxRuntime.jsx("span", {
+      }), controlLabel && jsxRuntime.jsx("span", {
         dangerouslySetInnerHTML: {
-          __html: label(control.label)
+          __html: controlLabel
         }
       })]
     }), jsxRuntime.jsx(FieldError, {
@@ -13557,6 +13589,7 @@ function FieldPassword(_ref) {
   const onToggle = () => {
     setType(type === 'password' ? 'text' : 'password');
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value || ''
@@ -13565,9 +13598,9 @@ function FieldPassword(_ref) {
     className: bomCore.getClassNames({
       required: control.required && !control.disabled
     }),
-    children: [jsxRuntime.jsx(Label, {
+    children: [controlLabel && jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
-      children: control.label && label(control.label)
+      children: controlLabel
     }), jsxRuntime.jsx(Input, {
       width: "100%",
       ref: ref,
@@ -13579,15 +13612,20 @@ function FieldPassword(_ref) {
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
+      required: state.errors.some(x => x.key === 'required'),
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
-      autoComplete: control.name,
+      "aria-invalid": state.flags.invalid,
+      "aria-describedby": `${uniqueName}-error`,
+      autoComplete: "on",
       after: jsxRuntime.jsx(Button, {
         onClick: () => onToggle(),
         children: icon(type)
       })
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      label: controlLabel,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -13621,6 +13659,7 @@ function FieldRadio(_a) {
   const onFocus = _ => {
     setFocus(true);
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
@@ -13632,8 +13671,8 @@ function FieldRadio(_a) {
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
-      children: [control.label && jsxRuntime.jsx(Radio.GroupLabel, {
-        children: label(control.label)
+      children: [controlLabel && jsxRuntime.jsx(Radio.GroupLabel, {
+        children: controlLabel
       }), (_b = control.options) === null || _b === void 0 ? void 0 : _b.map(option => {
         var _a;
         return jsxRuntime.jsxs(Label, {
@@ -13648,7 +13687,9 @@ function FieldRadio(_a) {
         }, getUniqueName(option));
       })]
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      label: controlLabel,
+      id: `${uniqueName}-error`
     })]
   }));
 }
@@ -13674,6 +13715,7 @@ function FieldSelect(_ref) {
   const onChange = option => {
     setValue(option);
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)
@@ -13690,10 +13732,14 @@ function FieldSelect(_ref) {
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
-      children: [control.label && jsxRuntime.jsx(Select.Label, {
-        children: label(control.label)
+      children: [controlLabel && jsxRuntime.jsx(Select.Label, {
+        htmlFor: uniqueName,
+        children: controlLabel
       }), jsxRuntime.jsx(Select.Select, {
-        disabled: control.disabled,
+        required: state.errors.some(x => x.key === 'required'),
+        disabled: state.flags.disabled || state.flags.readonly,
+        "aria-invalid": state.flags.invalid,
+        "aria-describedby": `${uniqueName}-error`,
         children: icon || jsxRuntime.jsx(bomMixerIcons.IconChevronDown, {})
       }), jsxRuntime.jsx(Select.Popover, {
         gutter: 4,
@@ -13704,12 +13750,15 @@ function FieldSelect(_ref) {
           children: option.name
         }, i))
       }), jsxRuntime.jsx(FieldError, {
-        state: state
+        state: state,
+        label: controlLabel,
+        id: `${uniqueName}-error`
       })]
     }), ((_a = control.customData) === null || _a === void 0 ? void 0 : _a.after) && control.customData.after]
   });
 }
 
+const INPUT_TYPES = Object.fromEntries(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'].map(k => [k, k]));
 function FieldText(_a) {
   var {
       control,
@@ -13748,6 +13797,8 @@ function FieldText(_a) {
   const onFocus = _ => {
     setFocus(true);
   };
+  const type = INPUT_TYPES[control.schema] || 'text';
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value || ''
@@ -13756,27 +13807,33 @@ function FieldText(_a) {
     className: bomCore.getClassNames({
       required: control.required && !control.disabled
     }),
-    children: [jsxRuntime.jsx(Label, {
+    children: [controlLabel && jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
-      children: control.label && label(control.label)
+      children: controlLabel
     }), jsxRuntime.jsx(Input, Object.assign({
       width: "100%"
     }, props, {
       ref: ref,
       id: uniqueName,
       name: uniqueName,
+      type: type,
       placeholder: label(control.placeholder || control.label || ''),
       defaultValue: state.value || '',
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
+      required: state.errors.some(x => x.key === 'required'),
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
+      "aria-invalid": state.flags.invalid,
+      "aria-describedby": `${uniqueName}-error`,
       before: before,
       after: after,
-      autoComplete: control.name
+      autoComplete: "on"
     })), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      label: controlLabel,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -13802,14 +13859,15 @@ function FieldTextArea(_ref) {
   const onFocus = _ => {
     setFocus(true);
   };
+  const controlLabel = control.label && label(control.label);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: state.value || ''
   }) : jsxRuntime.jsxs(Field, {
     state: state,
-    children: [jsxRuntime.jsx(Label, {
+    children: [controlLabel && jsxRuntime.jsx(Label, {
       htmlFor: uniqueName,
-      children: control.label && label(control.label)
+      children: controlLabel
     }), jsxRuntime.jsx(TextArea, {
       id: uniqueName,
       name: uniqueName,
@@ -13818,11 +13876,16 @@ function FieldTextArea(_ref) {
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
+      required: state.errors.some(x => x.key === 'required'),
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
+      "aria-invalid": state.flags.invalid,
+      "aria-describedby": `${uniqueName}-error`,
       width: "100%"
     }), jsxRuntime.jsx(FieldError, {
-      state: state
+      state: state,
+      label: controlLabel,
+      id: `${uniqueName}-error`
     })]
   });
 }
@@ -14715,6 +14778,7 @@ exports.Grid = Grid;
 exports.GridRow = GridRow;
 exports.Header = Header;
 exports.Highlight = Highlight;
+exports.INPUT_TYPES = INPUT_TYPES;
 exports.Icons = Icons;
 exports.InfiniteLoader = InfiniteLoader;
 exports.Input = Input;