@plesk/ui-library 3.43.2 → 3.44.0

package/cjs/components/Drawer/Drawer.js

@@ -125,6 +125,7 @@ const Drawer = _ref => {
       })
     });
   };
+  const titleContainerId = (0, _react.useId)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Overlay.default, {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--form`]: form
@@ -134,6 +135,9 @@ const Drawer = _ref => {
     isOpen: isOpen,
     placement: placement,
     size: size,
+    containerProps: {
+      'aria-labelledby': titleContainerId
+    },
     ...props,
     children: [takeApart(_ref5 => {
       let {
@@ -146,13 +150,16 @@ const Drawer = _ref => {
           hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
           onClose: onCloseWithConfirmation,
           tabs: tabs,
-          children: [(0, _Translate.isLikeText)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
-            level: 2,
-            className: `${baseClassName}__title`,
-            children: title
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `${baseClassName}__title`,
-            children: title
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            id: titleContainerId,
+            children: (0, _Translate.isLikeText)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
+              level: 2,
+              className: `${baseClassName}__title`,
+              children: title
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${baseClassName}__title`,
+              children: title
+            })
           }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: `${baseClassName}__subtitle`,
             children: subtitle

package/cjs/components/Drawer/DrawerProgress.js

@@ -9,14 +9,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ButtonContext = require("../Button/ButtonContext");
-var _Translate = _interopRequireDefault(require("../Translate"));
+var _Translate = require("../Translate");
 var _Progress = _interopRequireDefault(require("../Progress"));
 var _ProgressStep = _interopRequireWildcard(require("../ProgressStep"));
 var _constants = require("../../constants");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const additionalButtonsConfig = (0, _ButtonContext.getButtonContextValue)({
@@ -137,9 +136,8 @@ class DrawerProgress extends _react.Component {
       }), canCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         onClick: this.handleCancel,
         size: "lg",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-          content: "DrawerProgress.cancelButton",
-          fallback: "Cancel"
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+          content: "DrawerProgress.cancelButton"
         })
       })]
     }) : null;

package/cjs/components/Dropdown/Dropdown.js

@@ -15,15 +15,16 @@ var _AutoClosable = _interopRequireDefault(require("../AutoClosable"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _Layer = _interopRequireDefault(require("../Layer"));
 var _Menu = require("../Menu");
-var _Translate = _interopRequireDefault(require("../Translate"));
-var _enUS = _interopRequireDefault(require("./locale/en-US"));
+var _Translate = _interopRequireWildcard(require("../Translate"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const createTarget = (node, _ref) => {
   let {
     onToggle,
-    targetRef
+    targetRef,
+    opened
   } = _ref;
   if (!(/*#__PURE__*/(0, _react.isValidElement)(node) && node.type !== _Translate.default)) {
     node = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
@@ -41,7 +42,8 @@ const createTarget = (node, _ref) => {
       onToggle(isKeyboardEvent);
       isKeyboardEvent = false;
     }),
-    'aria-haspopup': true
+    'aria-haspopup': 'listbox',
+    'aria-expanded': opened
   });
 };
 const computePlacement = placement => {
@@ -101,11 +103,10 @@ const useEnhancedMenu = (menu, _ref2) => {
       className: `${baseClassName}__overlay-menu-divider`
     }, "divider"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
       onClick: handleClose,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
         namespace: "Dropdown",
         content: "close",
-        translators: locale,
-        fallback: _enUS.default.close
+        translators: locale
       })
     }, "close")];
   }
@@ -116,7 +117,8 @@ const useEnhancedMenu = (menu, _ref2) => {
     ref: menuRef,
     children,
     onKeyDown: handleKeyDown,
-    autoFocus
+    autoFocus,
+    role: 'listbox'
   });
   return {
     enhancedMenu: clone,
@@ -169,7 +171,8 @@ const Dropdown = _ref3 => {
   const targetRef = (0, _react.useRef)();
   const target = createTarget(children, {
     onToggle: handleOpen,
-    targetRef
+    targetRef,
+    opened
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)(baseClassName, {

package/cjs/components/Dropdown/index.js

@@ -22,5 +22,4 @@ Object.keys(_Dropdown).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/ExtendedStatusMessage/ExtendedStatusMessage.js

@@ -33,6 +33,7 @@ const ExtendedStatusMessage = _ref => {
         [`${baseClassName}--${intent}`]: intent,
         [`${baseClassName}--loading`]: loading
       }, className),
+      role: intent === 'warning' || intent === 'danger' ? 'alert' : 'status',
       ...props,
       children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: `${baseClassName}__image`,

package/cjs/components/Figure/index.js

@@ -22,5 +22,4 @@ Object.keys(_Figure).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/Form/Form.js

@@ -15,14 +15,13 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _ButtonContext = require("../Button/ButtonContext");
 var _FormField = _interopRequireDefault(require("../FormField"));
 var _Section = _interopRequireDefault(require("../Section"));
-var _Translate = _interopRequireDefault(require("../Translate"));
+var _Translate = require("../Translate");
 var _FormContext = _interopRequireDefault(require("./FormContext"));
 var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
 var _DisabledContext = _interopRequireDefault(require("./DisabledContext"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const actionButtonsConfig = (0, _ButtonContext.getButtonContextValue)({
@@ -257,19 +256,22 @@ class Form extends _react.Component {
       errors
     } = this.props;
     if (errors !== prevProps.errors) {
-      let field;
+      let fieldWithError;
       let fieldErrors;
-      Object.keys(this.fields).every(name => {
+      Object.keys(this.fields).forEach(name => {
         const foundError = (0, _utils.getIn)(errors, name);
-        if (foundError && typeof foundError === 'object' && Object.keys(foundError).length > 0) {
-          field = this.fields[name];
+        if (!foundError || typeof foundError !== 'object' || Object.keys(foundError).length === 0) {
+          return;
+        }
+        const field = this.fields[name];
+        field.sectionContext?.expand();
+        if (!fieldWithError) {
+          fieldWithError = field;
           fieldErrors = foundError;
-          return false;
         }
-        return true;
       });
-      if (field) {
-        field.focus(fieldErrors);
+      if (fieldWithError) {
+        fieldWithError.focus(fieldErrors);
       }
     }
   }
@@ -291,9 +293,8 @@ class Form extends _react.Component {
       onClick: this.handleSubmitClick
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-        content: "Form.submitButton",
-        fallback: "Save"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+        content: "Form.submitButton"
       }),
       ...(typeof submitButton === 'object' ? submitButton : {})
     });
@@ -313,9 +314,8 @@ class Form extends _react.Component {
       onClick: this.handleApplyClick
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-        content: "Form.applyButton",
-        fallback: "Apply"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+        content: "Form.applyButton"
       }),
       ...(typeof applyButton === 'object' ? applyButton : {})
     });
@@ -333,9 +333,8 @@ class Form extends _react.Component {
       disabled: !!state
       // eslint-disable-next-line react/no-children-prop
       ,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-        content: "Form.cancelButton",
-        fallback: "Cancel"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+        content: "Form.cancelButton"
       }),
       ...(typeof cancelButton === 'object' ? cancelButton : {})
     });

package/cjs/components/Form/index.js

@@ -38,5 +38,4 @@ Object.keys(_Form).forEach(function (key) {
   });
 });
 var _utils = require("./utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/FormField/FormField.js

@@ -17,9 +17,10 @@ var _Link = _interopRequireDefault(require("../Link"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Popover = _interopRequireDefault(require("../Popover"));
 var _Action = _interopRequireDefault(require("../Action"));
-var _Translate = _interopRequireDefault(require("../Translate"));
+var _Translate = require("../Translate");
 var _Focuser = _interopRequireDefault(require("../Overlay/Focuser"));
 var _FormContext = _interopRequireDefault(require("../Form/FormContext"));
+var _SectionContext = _interopRequireDefault(require("../Section/SectionContext"));
 var _VerticalContext = _interopRequireDefault(require("../VerticalContext"));
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
 var _DisabledContext = _interopRequireDefault(require("../Form/DisabledContext"));
@@ -62,12 +63,26 @@ class FormField extends _react.Component {
       if (!this.props.multi) {
         return this.fieldApi;
       }
+      const getErrors = () => {
+        const errors = this.fieldApi.getErrors();
+        if (errors instanceof Array && errors[index]) {
+          return errors[index];
+        }
+        return {};
+      };
+      const getFullDescription = () => {
+        if (index === 0) {
+          return this.fieldApi.getFullDescription();
+        }
+        return null;
+      };
       return {
         getValues: () => this.fieldApi.getValues(),
         getId: () => {
           const id = this.fieldApi.getId();
           return id ? `${id}-${index}` : id;
         },
+        getDescriptionLabelId: () => this.fieldApi.getDescriptionLabelId(),
         getName: () => {
           const name = this.fieldApi.getName();
           return name ? `${name}[${index}]` : name;
@@ -83,13 +98,7 @@ class FormField extends _react.Component {
           const values = getArrayHelper(this.fieldApi.getValue(), true);
           return this.fieldApi.setValue(values.map((v, i) => i === index ? value : v));
         },
-        getErrors: () => {
-          const errors = this.fieldApi.getErrors();
-          if (errors instanceof Array && errors[index]) {
-            return errors[index];
-          }
-          return {};
-        },
+        getErrors,
         getRequiredMark: () => {
           if (index === 0) {
             return this.fieldApi.getRequiredMark();
@@ -100,12 +109,7 @@ class FormField extends _react.Component {
           className: `${this.props.baseClassName}__separator`
         }),
         isDisabled: () => !!this.props.disabled,
-        getFullDescription: () => {
-          if (index === 0) {
-            return this.fieldApi.getFullDescription();
-          }
-          return null;
-        }
+        getFullDescription
       };
     });
     (0, _defineProperty2.default)(this, "focus", errors => {
@@ -118,9 +122,11 @@ class FormField extends _react.Component {
       } = this.props;
       const target = this.targetRefs[index];
       if (target) {
-        (0, _utils.scrollIntoView)(target, {
-          boundary: scrollableElement
-        });
+        setTimeout(() => {
+          (0, _utils.scrollIntoView)(target, {
+            boundary: scrollableElement
+          });
+        }, 0);
         this.focusTimer = setTimeout(() => {
           if (target) {
             new _Focuser.default().focusFirstDescendant(target);
@@ -175,10 +181,9 @@ class FormField extends _react.Component {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         className: `${this.props.baseClassName}__remove`,
         icon: isClearable ? 'clean' : 'cross-mark',
-        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
           namespace: "FormField",
           content: isClearable ? 'clear' : 'remove',
-          fallback: isClearable ? 'Clear' : 'Remove',
           translators: locale
         }),
         onClick: () => this.handleRemove(index),
@@ -189,7 +194,7 @@ class FormField extends _react.Component {
     /**
      * Renders description for last row.
      */
-    (0, _defineProperty2.default)(this, "renderDescription", index => {
+    (0, _defineProperty2.default)(this, "renderDescription", (index, id) => {
       const {
         baseClassName,
         description,
@@ -199,6 +204,7 @@ class FormField extends _react.Component {
         return null;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Hint.default, {
+        id: id ? `${id}-description` : undefined,
         component: "div",
         className: `${baseClassName}__description`,
         children: description
@@ -228,6 +234,7 @@ class FormField extends _react.Component {
         onRemoveRow,
         locale,
         form,
+        section,
         vertical,
         scrollableElement,
         fullDescription,
@@ -247,6 +254,7 @@ class FormField extends _react.Component {
           children: [innerField, ` `, _this.renderRemoveButton(index)]
         });
       }
+      const fieldId = fieldApi.getId();
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Section.SectionItem, {
         className: (0, _classnames.default)(baseClassName, {
           [`${baseClassName}--error`]: hasErrors,
@@ -255,7 +263,7 @@ class FormField extends _react.Component {
         title: label === null ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: `${baseClassName}__label`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            htmlFor: fieldApi.getId(),
+            htmlFor: fieldId,
             children: label
           }), fieldApi.getFullDescription(), required ? fieldApi.getRequiredMark() : null]
         }),
@@ -265,21 +273,21 @@ class FormField extends _react.Component {
           ref: _this.setTargetRef(index),
           children: innerField
         }), hasErrors && Object.keys(fieldErrors).map(key => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          id: fieldId ? `${id}-${key}` : undefined,
           className: `${baseClassName}__error`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             className: `${baseClassName}__error-icon`,
             name: "exclamation-mark-circle-filled",
             size: "12"
           }), fieldErrors[key]]
-        }, key)), _this.renderDescription(index), renderAddMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+        }, key)), _this.renderDescription(index, fieldId), renderAddMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
           role: "button",
           onClick: _this.handleAddMore,
           className: `${baseClassName}__add-more`,
           disabled: disabled,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
             namespace: "FormField",
             content: "addMore",
-            fallback: "Add one more",
             translators: locale
           })
         })]
@@ -299,6 +307,32 @@ class FormField extends _react.Component {
       value: valueInState,
       errors: this.props.errors
     };
+    const _getErrors = () => {
+      if (this.props.form && this.props.name) {
+        return this.props.form.getErrors(this.props.name);
+      }
+      return this.state.errors;
+    };
+    const _getFullDescription = () => {
+      if (!this.props.fullDescription) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+        target: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
+          outerProps: {
+            className: `${this.props.baseClassName}__full-description`
+          },
+          icon: {
+            name: 'info-circle',
+            size: '12',
+            className: `${this.props.baseClassName}__full-description-icon`
+          }
+        }),
+        placement: "right",
+        intent: "info",
+        children: this.props.fullDescription
+      });
+    };
     this.fieldApi = {
       getId: () => {
         if (this.props.id) {
@@ -309,6 +343,19 @@ class FormField extends _react.Component {
         }
         return undefined;
       },
+      getDescriptionLabelId: () => {
+        const errors = _getErrors();
+        const id = this.fieldApi.getId();
+        if (!id) {
+          return undefined;
+        }
+        if (errors && Object.keys(errors).length > 0) {
+          const [errorKey] = Object.keys(errors);
+          return `${id}-${errorKey}`;
+        }
+        const hasDescription = !!this.props.description;
+        return hasDescription ? `${id}-description` : undefined;
+      },
       getName: () => this.props.name,
       getValues: () => {
         if (this.props.form) {
@@ -331,12 +378,7 @@ class FormField extends _react.Component {
         }
         (0, _utils.safeInvoke)(this.props.onChange, value);
       },
-      getErrors: () => {
-        if (this.props.form && this.props.name) {
-          return this.props.form.getErrors(this.props.name);
-        }
-        return this.state.errors;
-      },
+      getErrors: _getErrors,
       getRequiredMark: () => {
         if (this.props.form) {
           return this.props.form.getRequiredMark();
@@ -344,26 +386,7 @@ class FormField extends _react.Component {
         return null;
       },
       isDisabled: () => Boolean(this.props.disabled),
-      getFullDescription: () => {
-        if (!this.props.fullDescription) {
-          return null;
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
-          target: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
-            outerProps: {
-              className: `${this.props.baseClassName}__full-description`
-            },
-            icon: {
-              name: 'info-circle',
-              size: '12',
-              className: `${this.props.baseClassName}__full-description-icon`
-            }
-          }),
-          placement: "right",
-          intent: "info",
-          children: this.props.fullDescription
-        });
-      }
+      getFullDescription: _getFullDescription
     };
     this.targetRefs = [];
   }
@@ -396,7 +419,8 @@ class FormField extends _react.Component {
     if (this.props.form && this.props.name) {
       this.props.form.setRequiredField(this.props.name, !!this.props.required);
       this.props.form.registerField(this.props.name, {
-        focus: this.focus
+        focus: this.focus,
+        sectionContext: this.props.section
       });
     }
   }
@@ -442,6 +466,7 @@ const FormFieldWrapper = _ref => {
     ...props
   } = _ref;
   const form = (0, _react.useContext)(_FormContext.default);
+  const section = (0, _react.useContext)(_SectionContext.default);
   const verticalContext = (0, _react.useContext)(_VerticalContext.default);
   const vertical = props.vertical === undefined ? verticalContext : props.vertical;
   const scrollableElement = (0, _react.useContext)(_ScrollableElementFormContext.default);
@@ -449,6 +474,7 @@ const FormFieldWrapper = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormField, {
     ...props,
     form: form,
+    section: section,
     vertical: vertical,
     scrollableElement: scrollableElement,
     disabled: props.disabled || disabled,

package/cjs/components/FormField/index.js

@@ -16,5 +16,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _FormField = _interopRequireWildcard(require("./FormField"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/FormFieldCheckbox/FormFieldCheckbox.js

@@ -42,7 +42,9 @@ const FormFieldCheckbox = _ref => {
         setValue,
         getRequiredMark,
         getFullDescription,
-        isDisabled
+        isDisabled,
+        getErrors,
+        getDescriptionLabelId
       } = _ref2;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
@@ -56,7 +58,9 @@ const FormFieldCheckbox = _ref => {
             id: getId(),
             name: getName(),
             value: checkedValue.toString(),
-            autoFocus
+            autoFocus,
+            'aria-invalid': !!Object.keys(getErrors() ?? {}).length,
+            'aria-describedby': getDescriptionLabelId()
           },
           disabled: isDisabled(),
           rightAddon: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {