@bpmn-io/form-js-viewer 1.7.0 → 1.7.2

package/dist/index.cjs

@@ -792,20 +792,59 @@ function useCondition(condition) {
   }, [conditionChecker, condition, expressionContextInfo]);
 }
 
-// parses the options data from the provided form field and form data
-function getOptionsData(formField, formData) {
+/**
+ * Returns the options data for the provided if they can be simply determined, ignoring expression defined options.
+ *
+ * @param {object} formField
+ * @param {object} formData
+ */
+function getSimpleOptionsData(formField, formData) {
   const {
+    valuesExpression: optionsExpression,
     valuesKey: optionsKey,
     values: staticOptions
   } = formField;
+  if (optionsExpression) {
+    return null;
+  }
   return optionsKey ? minDash.get(formData, [optionsKey]) : staticOptions;
 }
 
-// transforms the provided options into a normalized format, trimming invalid options
+/**
+ * Normalizes the provided options data to a format that can be used by the select components.
+ * If the options data is not valid, it is filtered out.
+ *
+ * @param {any[]} optionsData
+ *
+ * @returns {object[]}
+ */
 function normalizeOptionsData(optionsData) {
   return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !minDash.isNil(o));
 }
 
+/**
+ * Creates an options object with default values if no options are provided.
+ *
+ * @param {object} options
+ *
+ * @returns {object}
+ */
+function createEmptyOptions(options = {}) {
+  const defaults = {};
+
+  // provide default options if valuesKey and valuesExpression are not set
+  if (!options.valuesKey && !options.valuesExpression) {
+    defaults.values = [{
+      label: 'Value',
+      value: 'value'
+    }];
+  }
+  return {
+    ...defaults,
+    ...options
+  };
+}
+
 /**
  * Converts the provided option to a normalized format.
  * If the option is not valid, null is returned.
@@ -856,21 +895,6 @@ function _isAllowedValue(value) {
   }
   return _isAllowedPrimitive(value);
 }
-function createEmptyOptions(options = {}) {
-  const defaults = {};
-
-  // provide default options if valuesKey and valuesExpression are not set
-  if (!options.valuesKey && !options.valuesExpression) {
-    defaults.values = [{
-      label: 'Value',
-      value: 'value'
-    }];
-  }
-  return {
-    ...defaults,
-    ...options
-  };
-}
 
 /**
  * Evaluate a string reactively based on the expressionLanguage and form data.
@@ -891,29 +915,19 @@ function useExpressionEvaluation(value) {
   }, [expressionLanguage, expressionContextInfo, value]);
 }
 
-function usePrevious(value, defaultValue = null) {
-  const ref = hooks.useRef(defaultValue);
-  hooks.useEffect(() => ref.current = value, [value]);
-  return ref.current;
-}
-
 /**
  * A custom hook to manage state changes with deep comparison.
  *
- * @param {any} value - The current value to manage.
- * @param {any} defaultValue - The initial default value for the state.
- * @returns {any} - Returns the current state.
+ * @template T
+ * @param {T} value - The current value to manage.
+ * @returns {T} - Returns the current state.
  */
-function useDeepCompareState(value, defaultValue) {
-  const [state, setState] = hooks.useState(defaultValue);
-  const previous = usePrevious(value, defaultValue);
-  const changed = !isEqual(previous, value);
-  hooks.useEffect(() => {
-    if (changed) {
-      setState(value);
-    }
-  }, [changed, value]);
-  return state;
+function useDeepCompareMemoize(value) {
+  const ref = hooks.useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
 }
 
 /**
@@ -943,15 +957,10 @@ function useOptionsAsync(field) {
     valuesKey: optionsKey,
     values: staticOptions
   } = field;
-  const [optionsGetter, setOptionsGetter] = hooks.useState({
-    options: [],
-    error: undefined,
-    loadState: LOAD_STATES.LOADING
-  });
   const initialData = useService('form')._getState().initialData;
   const expressionEvaluation = useExpressionEvaluation(optionsExpression);
-  const evaluatedOptions = useDeepCompareState(expressionEvaluation || [], []);
-  hooks.useEffect(() => {
+  const evaluatedOptions = useDeepCompareMemoize(expressionEvaluation || []);
+  const optionsGetter = hooks.useMemo(() => {
     let options = [];
 
     // dynamic options
@@ -966,18 +975,16 @@ function useOptionsAsync(field) {
       options = Array.isArray(staticOptions) ? staticOptions : [];
 
       // expression
-    } else if (optionsExpression) {
-      if (evaluatedOptions && Array.isArray(evaluatedOptions)) {
-        options = evaluatedOptions;
-      }
+    } else if (optionsExpression && evaluatedOptions && Array.isArray(evaluatedOptions)) {
+      options = evaluatedOptions;
+
+      // error case
     } else {
-      setOptionsGetter(buildErrorState('No options source defined in the form definition'));
-      return;
+      return buildErrorState('No options source defined in the form definition');
     }
 
     // normalize data to support primitives and partially defined objects
-    options = normalizeOptionsData(options);
-    setOptionsGetter(buildLoadedState(options));
+    return buildLoadedState(normalizeOptionsData(options));
   }, [optionsKey, staticOptions, initialData, optionsExpression, evaluatedOptions]);
   return optionsGetter;
 }
@@ -1022,14 +1029,14 @@ const getDOMPurifyConfig = sanitizeStyleTags => {
   };
 };
 
-/**
- * A custom hook to build up security attributes from form configuration.
- *
- * @param {Object} security - The security configuration.
- * @returns {Array} - Returns a tuple with sandbox and allow attributes.
+/**
+ * A custom hook to build up security attributes from form configuration.
+ *
+ * @param {Object} security - The security configuration.
+ * @returns {Array} - Returns a tuple with sandbox and allow attributes.
  */
 function useSecurityAttributesMap(security) {
-  const securityMemoized = useDeepCompareState(security);
+  const securityMemoized = useDeepCompareMemoize(security);
   const sandbox = hooks.useMemo(() => SECURITY_ATTRIBUTES_DEFINITIONS.filter(({
     attribute
   }) => attribute === SANDBOX_ATTRIBUTE).filter(({
@@ -1201,6 +1208,12 @@ function useReadonly(formField, properties = {}) {
   return readonly || false;
 }
 
+function usePrevious(value, defaultValue = null) {
+  const ref = hooks.useRef(defaultValue);
+  hooks.useEffect(() => ref.current = value, [value]);
+  return ref.current;
+}
+
 function useFlushDebounce(func) {
   const timeoutRef = hooks.useRef(null);
   const lastArgsRef = hooks.useRef(null);
@@ -1465,8 +1478,16 @@ function sanitizeSingleSelectValue(options) {
     data,
     value
   } = options;
+  const {
+    valuesExpression: optionsExpression
+  } = formField;
   try {
-    const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+    // if options are expression evaluated, we don't need to sanitize the value against the options
+    // and defer to the field's internal validation
+    if (optionsExpression) {
+      return value;
+    }
+    const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
     return hasEqualValue(value, validValues) ? value : null;
   } catch (error) {
     // use default value in case of formatting error
@@ -1480,8 +1501,16 @@ function sanitizeMultiSelectValue(options) {
     data,
     value
   } = options;
+  const {
+    valuesExpression: optionsExpression
+  } = formField;
   try {
-    const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+    // if options are expression evaluated, we don't need to sanitize the values against the options
+    // and defer to the field's internal validation
+    if (optionsExpression) {
+      return value;
+    }
+    const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
     return value.filter(v => hasEqualValue(v, validValues));
   } catch (error) {
     // use default value in case of formatting error
@@ -1569,7 +1598,7 @@ function useCleanupMultiSelectValue(props) {
     onChange,
     values
   } = props;
-  const memoizedValues = useDeepCompareState(values, []);
+  const memoizedValues = useDeepCompareMemoize(values || []);
 
   // ensures that the values are always a subset of the possible options
   hooks.useEffect(() => {
@@ -1589,7 +1618,8 @@ function useCleanupMultiSelectValue(props) {
 
 function Description(props) {
   const {
-    description
+    description,
+    id
   } = props;
   const evaluatedDescription = useSingleLineTemplateEvaluation(description || '', {
     debug: true
@@ -1598,6 +1628,7 @@ function Description(props) {
     return null;
   }
   return jsxRuntime.jsx("div", {
+    id: id,
     class: "fjs-form-field-description",
     children: evaluatedDescription
   });
@@ -1628,6 +1659,7 @@ function Errors(props) {
 function Label(props) {
   const {
     id,
+    htmlFor,
     label,
     collapseOnEmpty = true,
     required = false
@@ -1636,12 +1668,14 @@ function Label(props) {
     debug: true
   });
   return jsxRuntime.jsxs("label", {
-    for: id,
+    id: id,
+    for: htmlFor,
     class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
     children: [props.children, evaluatedLabel, required && jsxRuntime.jsx("span", {
       class: "fjs-asterix",
+      "aria-hidden": true,
       children: "*"
     })]
   });
@@ -1652,7 +1686,6 @@ function Checkbox(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -1676,6 +1709,8 @@ function Checkbox(props) {
       value: target.checked
     });
   };
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     class: classNames(formFieldClasses(type$f, {
       errors,
@@ -1685,7 +1720,7 @@ function Checkbox(props) {
       'fjs-checked': value
     }),
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       required: required,
       children: jsxRuntime.jsx("input", {
@@ -1698,13 +1733,16 @@ function Checkbox(props) {
         onChange: onChange,
         onBlur: () => onBlur && onBlur(),
         onFocus: () => onFocus && onFocus(),
-        "aria-describedby": errorMessageId
+        required: required,
+        "aria-invalid": errors.length > 0,
+        "aria-describedby": [descriptionId, errorMessageId].join(' ')
       })
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -1727,7 +1765,6 @@ function Checklist(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -1774,6 +1811,8 @@ function Checklist(props) {
     values,
     onChange: props.onChange
   });
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     class: classNames(formFieldClasses(type$e, {
       errors,
@@ -1788,7 +1827,7 @@ function Checklist(props) {
       const itemDomId = `${domId}-${index}`;
       const isChecked = hasEqualValue(o.value, values);
       return jsxRuntime.jsx(Label, {
-        id: itemDomId,
+        htmlFor: itemDomId,
         label: o.label,
         class: classNames({
           'fjs-checked': isChecked
@@ -1804,14 +1843,17 @@ function Checklist(props) {
           onClick: () => toggleCheckbox(o.value),
           onBlur: onCheckboxBlur,
           onFocus: onCheckboxFocus,
-          "aria-describedby": errorMessageId
+          required: required,
+          "aria-invalid": errors.length > 0,
+          "aria-describedby": [descriptionId, errorMessageId].join(' ')
         })
       });
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -1891,6 +1933,7 @@ function FormField(props) {
     }
   }, [viewerCommands, field, initialValue, initialValidationTrigger, indexes]);
   const onBlur = hooks.useCallback(() => {
+    const value = minDash.get(data, valuePath);
     if (initialValidationTrigger) {
       setInitialValidationTrigger(false);
       viewerCommands.updateFieldValidation(field, value, indexes);
@@ -1898,7 +1941,7 @@ function FormField(props) {
     eventBus.fire('formField.blur', {
       formField: field
     });
-  }, [eventBus, field, indexes, value, viewerCommands, initialValidationTrigger]);
+  }, [eventBus, field, indexes, viewerCommands, initialValidationTrigger, data, valuePath]);
   const onFocus = hooks.useCallback(() => {
     eventBus.fire('formField.focus', {
       formField: field
@@ -1922,7 +1965,6 @@ function FormField(props) {
   }
   const domId = `${prefixId(field.id, formId, indexes)}`;
   const fieldErrors = minDash.get(errors, [field.id, ...Object.values(indexes || {})]) || [];
-  const errorMessageId = errors.length === 0 ? undefined : `${domId}-error-message`;
   return jsxRuntime.jsx(Column, {
     field: field,
     class: gridColumnClasses(field),
@@ -1933,7 +1975,6 @@ function FormField(props) {
         ...props,
         disabled: disabled,
         errors: fieldErrors,
-        errorMessageId: errorMessageId,
         domId: domId,
         onChange: disabled || readonly ? noop$1 : onChangeIndexed,
         onBlur: disabled || readonly ? noop$1 : onBlur,
@@ -2245,7 +2286,7 @@ function Datepicker(props) {
   const [forceFocusCalendar, setForceFocusCalendar] = hooks.useState(false);
 
   // ensures we render based on date value instead of reference
-  const date = useDeepCompareState(dateObject, null);
+  const date = useDeepCompareMemoize(dateObject);
 
   // shorts the date value back to the source
   hooks.useEffect(() => {
@@ -2336,7 +2377,7 @@ function Datepicker(props) {
   return jsxRuntime.jsxs("div", {
     class: "fjs-datetime-subsection",
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       collapseOnEmpty: collapseLabelOnEmpty,
       required: required
@@ -2608,7 +2649,7 @@ function Timepicker(props) {
   return jsxRuntime.jsxs("div", {
     class: "fjs-datetime-subsection",
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       collapseOnEmpty: collapseLabelOnEmpty,
       required: required
@@ -2795,6 +2836,7 @@ function Datetime(props) {
     });
   }, []);
   const errorMessageId = allErrors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
+  const descriptionId = `${prefixId(id, formId)}-description`;
   const datePickerProps = {
     label: dateLabel,
     collapseLabelOnEmpty: !timeLabel,
@@ -2807,7 +2849,7 @@ function Datetime(props) {
     date: dateTime.date,
     readonly,
     setDate,
-    'aria-describedby': errorMessageId
+    'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   const timePickerProps = {
     label: timeLabel,
@@ -2822,7 +2864,7 @@ function Datetime(props) {
     timeInterval,
     time: dateTime.time,
     setTime,
-    'aria-describedby': errorMessageId
+    'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$d, {
@@ -2841,6 +2883,7 @@ function Datetime(props) {
         ...timePickerProps
       })]
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
       errors: allErrors,
@@ -2944,7 +2987,7 @@ function IFrame(props) {
       readonly
     }),
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: evaluatedLabel
     }), !evaluatedUrl && jsxRuntime.jsx(IFramePlaceholder, {
       text: "No content to show."
@@ -3490,7 +3533,6 @@ function Numberfield(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -3628,6 +3670,8 @@ function Numberfield(props) {
       e.preventDefault();
     }
   };
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$a, {
       errors,
@@ -3635,7 +3679,7 @@ function Numberfield(props) {
       readonly
     }),
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       required: required
     }), jsxRuntime.jsx(TemplatedInputAdorner, {
@@ -3669,15 +3713,17 @@ function Numberfield(props) {
           autoComplete: "off",
           step: incrementAmount,
           value: displayValue,
-          "aria-describedby": errorMessageId
+          "aria-describedby": [descriptionId, errorMessageId].join(' '),
+          required: required,
+          "aria-invalid": errors.length > 0
         }), jsxRuntime.jsxs("div", {
           class: classNames('fjs-number-arrow-container', {
             'fjs-disabled': disabled,
             'fjs-readonly': readonly
           }),
           children: [jsxRuntime.jsx("button", {
-            class: "fjs-number-arrow-up",
             type: "button",
+            class: "fjs-number-arrow-up",
             "aria-label": "Increment",
             onClick: () => increment(),
             tabIndex: -1,
@@ -3685,8 +3731,8 @@ function Numberfield(props) {
           }), jsxRuntime.jsx("div", {
             class: "fjs-number-arrow-separator"
           }), jsxRuntime.jsx("button", {
-            class: "fjs-number-arrow-down",
             type: "button",
+            class: "fjs-number-arrow-down",
             "aria-label": "Decrement",
             onClick: () => decrement(),
             tabIndex: -1,
@@ -3695,10 +3741,11 @@ function Numberfield(props) {
         })]
       })
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -3728,7 +3775,6 @@ function Radio(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -3774,6 +3820,8 @@ function Radio(props) {
     value,
     onChange: props.onChange
   });
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$9, {
       errors,
@@ -3788,7 +3836,7 @@ function Radio(props) {
       const itemDomId = `${domId}-${index}`;
       const isChecked = isEqual(option.value, value);
       return jsxRuntime.jsx(Label, {
-        id: itemDomId,
+        htmlFor: itemDomId,
         label: option.label,
         class: classNames({
           'fjs-checked': isChecked
@@ -3804,14 +3852,17 @@ function Radio(props) {
           onClick: () => onChange(option.value),
           onBlur: onRadioBlur,
           onFocus: onRadioFocus,
-          "aria-describedby": errorMessageId
+          "aria-describedby": [descriptionId, errorMessageId].join(' '),
+          required: required,
+          "aria-invalid": errors.length > 0
         })
       }, index);
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -3876,7 +3927,7 @@ function SearchableSelect(props) {
 
   // whenever we change the underlying value, set the label to it
   hooks.useEffect(() => {
-    setFilter(label);
+    setFilter(label || '');
   }, [label]);
   const filteredOptions = hooks.useMemo(() => {
     if (loadState !== LOAD_STATES.LOADED) {
@@ -3956,7 +4007,7 @@ function SearchableSelect(props) {
   }, [onFocus]);
   const onInputBlur = hooks.useCallback(() => {
     setIsDropdownExpanded(false);
-    setFilter(label);
+    setFilter(label || '');
     onBlur && onBlur();
   }, [onBlur, label]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -4052,6 +4103,9 @@ function SimpleSelect(props) {
   }, [disabled, isDropdownExpanded, loadState, readonly, value]);
   const onMouseDown = hooks.useCallback(e => {
     const input = inputRef.current;
+    if (disabled || !input) {
+      return;
+    }
     setIsDropdownExpanded(!isDropdownExpanded);
     if (isDropdownExpanded) {
       input.blur();
@@ -4059,7 +4113,7 @@ function SimpleSelect(props) {
       input.focus();
     }
     e.preventDefault();
-  }, [isDropdownExpanded]);
+  }, [disabled, isDropdownExpanded]);
   const initialFocusIndex = hooks.useMemo(() => value && minDash.findIndex(options, o => o.value === value) || 0, [options, value]);
   const onInputFocus = hooks.useCallback(() => {
     if (!readonly) {
@@ -4131,7 +4185,6 @@ function Select(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -4149,6 +4202,8 @@ function Select(props) {
   const {
     required
   } = validate;
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   const selectProps = {
     domId,
     disabled,
@@ -4159,7 +4214,9 @@ function Select(props) {
     value,
     onChange,
     readonly,
-    'aria-describedby': errorMessageId
+    required,
+    'aria-invalid': errors.length > 0,
+    'aria-describedby': [descriptionId, errorMessageId].join(' ')
   };
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$8, {
@@ -4174,7 +4231,7 @@ function Select(props) {
       }
     },
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       required: required
     }), searchable ? jsxRuntime.jsx(SearchableSelect, {
@@ -4182,10 +4239,11 @@ function Select(props) {
     }) : jsxRuntime.jsx(SimpleSelect, {
       ...selectProps
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -4318,7 +4376,6 @@ function Taglist(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     onFocus,
     domId,
     onBlur,
@@ -4346,7 +4403,7 @@ function Taglist(props) {
   } = useOptionsAsync(field);
 
   // ensures we render based on array content instead of reference
-  const values = useDeepCompareState(value || [], []);
+  const values = useDeepCompareMemoize(value || []);
   useCleanupMultiSelectValue({
     field,
     loadState,
@@ -4454,6 +4511,8 @@ function Taglist(props) {
     inputRef.current.focus();
   };
   const shouldDisplayDropdown = hooks.useMemo(() => !disabled && loadState === LOAD_STATES.LOADED && isDropdownExpanded && !isEscapeClosed, [disabled, isDropdownExpanded, isEscapeClosed, loadState]);
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     ref: focusScopeRef,
     class: formFieldClasses(type$5, {
@@ -4470,7 +4529,7 @@ function Taglist(props) {
     children: [jsxRuntime.jsx(Label, {
       label: label,
       required: required,
-      id: domId
+      htmlFor: domId
     }), !disabled && !readonly && !!values.length && jsxRuntime.jsx(SkipLink, {
       className: "fjs-taglist-skip-link",
       label: "Skip to search",
@@ -4518,7 +4577,9 @@ function Taglist(props) {
         onMouseDown: () => setIsEscapeClose(false),
         onFocus: onInputFocus,
         onBlur: onInputBlur,
-        "aria-describedby": errorMessageId
+        "aria-describedby": [descriptionId, errorMessageId].join(' '),
+        required: required,
+        "aria-invalid": errors.length > 0
       })]
     }), jsxRuntime.jsx("div", {
       class: "fjs-taglist-anchor",
@@ -4530,10 +4591,11 @@ function Taglist(props) {
         listenerElement: inputRef.current
       })
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -4850,7 +4912,6 @@ function Textfield(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -4886,6 +4947,8 @@ function Textfield(props) {
   const onInputFocus = () => {
     onFocus && onFocus();
   };
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$2, {
       errors,
@@ -4893,7 +4956,7 @@ function Textfield(props) {
       readonly
     }),
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       required: required
     }), jsxRuntime.jsx(TemplatedInputAdorner, {
@@ -4911,13 +4974,16 @@ function Textfield(props) {
         onFocus: onInputFocus,
         type: "text",
         value: value,
-        "aria-describedby": errorMessageId
+        "aria-describedby": [descriptionId, errorMessageId].join(' '),
+        required: required,
+        "aria-invalid": errors.length > 0
       })
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -4950,7 +5016,6 @@ function Textarea(props) {
   const {
     disabled,
     errors = [],
-    errorMessageId,
     domId,
     onBlur,
     onFocus,
@@ -4994,6 +5059,8 @@ function Textarea(props) {
   hooks.useEffect(() => {
     autoSizeTextarea(textareaRef.current);
   }, []);
+  const descriptionId = `${domId}-description`;
+  const errorMessageId = `${domId}-error-message`;
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type$1, {
       errors,
@@ -5001,7 +5068,7 @@ function Textarea(props) {
       readonly
     }),
     children: [jsxRuntime.jsx(Label, {
-      id: domId,
+      htmlFor: domId,
       label: label,
       required: required
     }), jsxRuntime.jsx("textarea", {
@@ -5014,12 +5081,15 @@ function Textarea(props) {
       onFocus: onInputFocus,
       value: value,
       ref: textareaRef,
-      "aria-describedby": errorMessageId
+      "aria-describedby": [descriptionId, errorMessageId].join(' '),
+      required: required,
+      "aria-invalid": errors.length > 0
     }), jsxRuntime.jsx(Description, {
+      id: descriptionId,
       description: description
     }), jsxRuntime.jsx(Errors, {
-      errors: errors,
-      id: errorMessageId
+      id: errorMessageId,
+      errors: errors
     })]
   });
 }
@@ -5188,7 +5258,7 @@ function Table(props) {
   return jsxRuntime.jsxs("div", {
     class: formFieldClasses(type),
     children: [jsxRuntime.jsx(Label, {
-      id: prefixId(id),
+      htmlFor: prefixId(id),
       label: label
     }), jsxRuntime.jsxs("div", {
       class: classNames('fjs-table-middle-container', {
@@ -5588,7 +5658,7 @@ class FormFields {
 }
 
 const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression'];
-const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
+const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
 /**
  * @typedef { import('../types').Schema } Schema
@@ -6574,47 +6644,17 @@ class RepeatRenderManager {
     };
     const parentExpressionContextInfo = hooks.useContext(LocalExpressionContext);
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: displayValues.map((value, index) => {
-        const elementProps = hooks.useMemo(() => ({
-          ...restProps,
-          indexes: {
-            ...(indexes || {}),
-            [repeaterField.id]: index
-          }
-        }), [index]);
-        const localExpressionContextInfo = hooks.useMemo(() => ({
-          data: parentExpressionContextInfo.data,
-          this: value,
-          parent: buildExpressionContext(parentExpressionContextInfo),
-          i: [...parentExpressionContextInfo.i, index + 1]
-        }), [index, value]);
-        return !showRemove ? jsxRuntime.jsx(LocalExpressionContext.Provider, {
-          value: localExpressionContextInfo,
-          children: jsxRuntime.jsx(RowsRenderer, {
-            ...elementProps
-          })
-        }) : jsxRuntime.jsxs("div", {
-          class: "fjs-repeat-row-container",
-          children: [jsxRuntime.jsx("div", {
-            class: "fjs-repeat-row-rows",
-            children: jsxRuntime.jsx(LocalExpressionContext.Provider, {
-              value: localExpressionContextInfo,
-              children: jsxRuntime.jsx(RowsRenderer, {
-                ...elementProps
-              })
-            })
-          }), jsxRuntime.jsx("button", {
-            class: "fjs-repeat-row-remove",
-            type: "button",
-            "aria-label": `Remove list item ${index + 1}`,
-            onClick: () => onDeleteItem(index),
-            children: jsxRuntime.jsx("div", {
-              class: "fjs-repeat-row-remove-icon-container",
-              children: jsxRuntime.jsx(DeleteSvg, {})
-            })
-          })]
-        });
-      })
+      children: displayValues.map((value, index) => jsxRuntime.jsx(RepetitionScaffold, {
+        index: index,
+        value: value,
+        parentExpressionContextInfo: parentExpressionContextInfo,
+        repeaterField: repeaterField,
+        RowsRenderer: RowsRenderer,
+        indexes: indexes,
+        onDeleteItem: onDeleteItem,
+        showRemove: showRemove,
+        ...restProps
+      }, index))
     });
   }
   RepeatFooter(props) {
@@ -6677,18 +6717,18 @@ class RepeatRenderManager {
         'fjs-remove-allowed': repeaterField.allowAddRemove
       }),
       children: [showAdd ? jsxRuntime.jsx("button", {
+        type: "button",
         readOnly: readonly,
         disabled: disabled || readonly,
         class: "fjs-repeat-render-add",
-        type: "button",
         ref: addButtonRef,
         onClick: onAddItem,
         children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(AddSvg, {}), " ", 'Add new']
         })
       }) : null, collapseEnabled ? jsxRuntime.jsx("button", {
-        class: "fjs-repeat-render-collapse",
         type: "button",
+        class: "fjs-repeat-render-collapse",
         onClick: toggle,
         children: isCollapsed ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [jsxRuntime.jsx(ExpandSvg, {}), " ", `Expand all (${values.length})`]
@@ -6706,6 +6746,73 @@ class RepeatRenderManager {
     return nonCollapsedItems ? nonCollapsedItems : DEFAULT_NON_COLLAPSED_ITEMS;
   }
 }
+
+/**
+ * Individual repetition of a repeated field and context scaffolding.
+ *
+ * @param {Object} props
+ * @param {number} props.index
+ * @param {Object} props.value
+ * @param {Object} props.parentExpressionContextInfo
+ * @param {Object} props.repeaterField
+ * @param {Function} props.RowsRenderer
+ * @param {Object} props.indexes
+ * @param {Function} props.onDeleteItem
+ * @param {boolean} props.showRemove
+ */
+
+const RepetitionScaffold = props => {
+  const {
+    index,
+    value,
+    parentExpressionContextInfo,
+    repeaterField,
+    RowsRenderer,
+    indexes,
+    onDeleteItem,
+    showRemove,
+    ...restProps
+  } = props;
+  const elementProps = hooks.useMemo(() => ({
+    ...restProps,
+    indexes: {
+      ...(indexes || {}),
+      [repeaterField.id]: index
+    }
+  }), [index, indexes, repeaterField.id, restProps]);
+  const localExpressionContextInfo = hooks.useMemo(() => ({
+    data: parentExpressionContextInfo.data,
+    this: value,
+    parent: buildExpressionContext(parentExpressionContextInfo),
+    i: [...parentExpressionContextInfo.i, index + 1]
+  }), [index, parentExpressionContextInfo, value]);
+  return !showRemove ? jsxRuntime.jsx(LocalExpressionContext.Provider, {
+    value: localExpressionContextInfo,
+    children: jsxRuntime.jsx(RowsRenderer, {
+      ...elementProps
+    })
+  }) : jsxRuntime.jsxs("div", {
+    class: "fjs-repeat-row-container",
+    children: [jsxRuntime.jsx("div", {
+      class: "fjs-repeat-row-rows",
+      children: jsxRuntime.jsx(LocalExpressionContext.Provider, {
+        value: localExpressionContextInfo,
+        children: jsxRuntime.jsx(RowsRenderer, {
+          ...elementProps
+        })
+      })
+    }), jsxRuntime.jsx("button", {
+      type: "button",
+      class: "fjs-repeat-row-remove",
+      "aria-label": `Remove list item ${index + 1}`,
+      onClick: () => onDeleteItem(index),
+      children: jsxRuntime.jsx("div", {
+        class: "fjs-repeat-row-remove-icon-container",
+        children: jsxRuntime.jsx(DeleteSvg, {})
+      })
+    })]
+  });
+};
 RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
 
 const RepeatRenderModule = {