@plesk/ui-library 3.44.0 → 3.45.0

package/cjs/components/Action/Action.js

@@ -11,7 +11,6 @@ var _constants = require("../../constants");
 var _utils = require("../utils");
 var _Icon = _interopRequireWildcard(require("../Icon"));
 var _Spinner = _interopRequireDefault(require("../Spinner"));
-var _utils2 = require("../../utils");
 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.
@@ -77,11 +76,6 @@ const Action = _ref => {
     });
   }
   const isIconOnly = !_react.Children.toArray(children).length && !rightAddon && !bottomAddon;
-
-  // Add aria-label when only icon is defined
-  if (isIconOnly && icon) {
-    tagProps['aria-label'] = (0, _utils2.prepareIconName)(icon, isIconOnly);
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootTag, {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--size-${size}`]: icon || progress,

package/cjs/components/Alert/Alert.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -25,13 +26,16 @@ const Alert = _ref => {
     onClose,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Alert');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--${intent}`]: intent
     }, className),
     role: intent === 'warning' || intent === 'danger' ? 'alert' : 'status',
     ...props,
-    children: [onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: [onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      "aria-label": translate('close'),
+      type: "button",
       className: "close",
       onClick: onClose
     }), children]

package/cjs/components/Button/Button.js

@@ -87,6 +87,7 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     caret,
     fill = false,
     tooltip,
+    tooltipAsLabel,
     children,
     arrow,
     disabled = false,
@@ -179,6 +180,7 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   if (tooltipElement) {
     button = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       title: tooltipElement,
+      asLabel: tooltipAsLabel,
       children: button
     });
   }

package/cjs/components/Carousel/Carousel.js

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -23,6 +24,7 @@ const calcWidths = node => {
     totalWidth
   };
 };
+const translate = (0, _LocaleProvider.getInternalTranslate)('Carousel');
 /**
  * Carousel component is used for optimizing page space by displaying only some parts
  * of entire content in a cyclic view.
@@ -111,9 +113,12 @@ class Carousel extends _react.Component {
         className: `${baseClassName}__dots`,
         children: Array.from({
           length: childrenCount
-        }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          role: "button",
+        }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
           className: (0, _classnames.default)(`${baseClassName}__dot`, current === idx ? `${baseClassName}__dot--current` : null),
+          "aria-label": translate('viewSlide', {
+            slideNumber: idx + 1
+          }),
           "aria-current": current === idx,
           onClick: () => this.setCurrentSlide(idx)
           // eslint-disable-next-line react/no-array-index-key
@@ -139,7 +144,7 @@ class Carousel extends _react.Component {
         className: `${baseClassName}__controls`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           type: "button",
-          "aria-label": "previous slide",
+          "aria-label": translate('previousSlide'),
           className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--previous`),
           onClick: this.handlePrevClick,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -149,7 +154,7 @@ class Carousel extends _react.Component {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           type: "button",
-          "aria-label": "next slide",
+          "aria-label": translate('nextSlide'),
           className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--next`),
           onClick: this.handleNextClick,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/cjs/components/ComboBox/ComboBox.js

@@ -13,6 +13,7 @@ var _Input = _interopRequireDefault(require("../Input"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ComboBoxDropdown = _interopRequireWildcard(require("../ComboBoxDropdown"));
 var _ComboBoxOption = _interopRequireDefault(require("./ComboBoxOption"));
+var _LocaleProvider = require("../LocaleProvider");
 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.
@@ -62,6 +63,7 @@ const ComboBox = _ref => {
     children,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('ComboBox');
   const [opened, setOpened] = (0, _react.useState)(false);
   const [highlightedIndex, setHighlightedIndex] = (0, _react.useState)(-1);
   const inputRef = (0, _react.useRef)(null);
@@ -143,6 +145,7 @@ const ComboBox = _ref => {
     }
   };
   const button = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    "aria-label": translate(opened ? 'close' : 'open'),
     className: `${baseClassName}__dropdown-button`,
     onClick: handleToggle,
     onMouseDown: e => e.preventDefault(),

package/cjs/components/ComboBoxDropdown/ComboBoxDropdown.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findNextSafeIndex = exports.default = void 0;
+exports.getOptionId = exports.findNextSafeIndex = exports.default = void 0;
 var _react = require("react");
 var _constants = require("../../constants");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -33,6 +33,8 @@ const findNextSafeIndex = (currIndex, diff, options) => {
   return -1;
 };
 exports.findNextSafeIndex = findNextSafeIndex;
+const getOptionId = (listboxId, index) => `${listboxId}-option-${index}`;
+exports.getOptionId = getOptionId;
 const ComboBoxDropdown = _ref => {
   let {
     baseClassName = `${_constants.CLS_PREFIX}combobox-dropdown`,
@@ -149,6 +151,7 @@ const ComboBoxDropdown = _ref => {
               };
             }
             const menuItemProps = {
+              id: listboxId ? getOptionId(listboxId, optionIndex) : undefined,
               ...option.props,
               active: value === option.value,
               className: (0, _classnames.default)(`${baseClassName}__option`, {
@@ -158,7 +161,8 @@ const ComboBoxDropdown = _ref => {
               onClick,
               onMouseOver,
               onMouseDown,
-              'data-index': optionIndex
+              'data-index': optionIndex,
+              'aria-selected': value === option.value
             };
             acc.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
               ...menuItemProps,

package/cjs/components/ComboBoxDropdown/index.js

@@ -15,5 +15,11 @@ Object.defineProperty(exports, "findNextSafeIndex", {
     return _ComboBoxDropdown.findNextSafeIndex;
   }
 });
+Object.defineProperty(exports, "getOptionId", {
+  enumerable: true,
+  get: function () {
+    return _ComboBoxDropdown.getOptionId;
+  }
+});
 var _ComboBoxDropdown = _interopRequireWildcard(require("./ComboBoxDropdown"));
 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/Dialog/Dialog.js

@@ -16,6 +16,7 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _Translate = require("../Translate");
 var _utils = require("../utils");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -47,6 +48,7 @@ const Dialog = _ref => {
     closingConfirmation,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Dialog');
   const [isVisible, setIsVisible] = (0, _react.useState)(isOpen);
   const {
     onCloseWithConfirmation,
@@ -194,6 +196,7 @@ const Dialog = _ref => {
           }), (actions || closable) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: `${baseClassName}__header-actions`,
             children: [actions, closable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              "aria-label": translate('closeButton'),
               className: `${baseClassName}__header-close`,
               disabled: !canClose,
               ghost: true,

package/cjs/components/Drawer/Header.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Button = _interopRequireDefault(require("../Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -23,8 +24,10 @@ const Header = _ref => {
     tabs,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Drawer');
   const renderBackButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     ghost: true,
+    "aria-label": translate('backButton'),
     className: (0, _classnames.default)(`${baseClassName}__button`, `${baseClassName}__button--back`),
     size: "lg",
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -36,6 +39,7 @@ const Header = _ref => {
   });
   const renderHideButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     ghost: true,
+    "aria-label": translate('hideButton'),
     className: (0, _classnames.default)(`${baseClassName}__button`, `${baseClassName}__button--hide`),
     size: "lg",
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -50,6 +54,7 @@ const Header = _ref => {
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       ghost: true,
+      "aria-label": translate('closeButton'),
       className: (0, _classnames.default)(`${baseClassName}__button`, `${baseClassName}__button--close`),
       size: "lg",
       icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/cjs/components/Dropdown/Dropdown.js

@@ -141,6 +141,7 @@ const Dropdown = _ref3 => {
     menuPlacement = 'bottom-start',
     overlay = false,
     locale,
+    onToggle,
     ...props
   } = _ref3;
   const [opened, setOpened] = (0, _react.useState)(false);
@@ -152,10 +153,12 @@ const Dropdown = _ref3 => {
   const handleOpen = isKeyboardEvent => {
     setAutoFocus(isKeyboardEvent);
     setOpened(true);
+    onToggle?.(true);
   };
   const handleClose = () => {
     closeTimerRef.current = setTimeout(() => {
       setOpened(false);
+      onToggle?.(false);
     }, 0);
   };
   const {

package/cjs/components/Form/Form.js

@@ -185,7 +185,9 @@ class Form extends _react.Component {
                       height: 0,
                       width: 0,
                       position: 'absolute'
-                    }
+                    },
+                    "aria-hidden": "true",
+                    tabIndex: -1
                   })]
                 });
               }

package/cjs/components/FormField/FormField.js

@@ -24,9 +24,11 @@ var _SectionContext = _interopRequireDefault(require("../Section/SectionContext"
 var _VerticalContext = _interopRequireDefault(require("../VerticalContext"));
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
 var _DisabledContext = _interopRequireDefault(require("../Form/DisabledContext"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
+const translate = (0, _LocaleProvider.getInternalTranslate)('FormField');
 const BASE_FORM_FIELD_CLASS_NAME = exports.BASE_FORM_FIELD_CLASS_NAME = `${_constants.CLS_PREFIX}form-field`;
 const defaultValue = undefined;
 
@@ -170,8 +172,8 @@ class FormField extends _react.Component {
     (0, _defineProperty2.default)(this, "renderRemoveButton", index => {
       const {
         multi,
-        locale,
-        disabled
+        disabled,
+        locale
       } = this.props;
       const value = getArrayHelper(this.fieldApi.getValue());
       const isClearable = multi && value.length === 1 && !isEmpty(value[0]);
@@ -181,11 +183,12 @@ 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.InternalTranslate, {
+        tooltip: locale ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
           namespace: "FormField",
           content: isClearable ? 'clear' : 'remove',
           translators: locale
-        }),
+        }) : translate(isClearable ? 'clear' : 'remove'),
+        tooltipAsLabel: true,
         onClick: () => this.handleRemove(index),
         disabled: disabled,
         ghost: true
@@ -273,7 +276,7 @@ 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,
+          id: fieldId ? `${fieldId}-${key}` : undefined,
           className: `${baseClassName}__error`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             className: `${baseClassName}__error-icon`,
@@ -319,6 +322,7 @@ class FormField extends _react.Component {
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
         target: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
+          "aria-label": translate('showDescription'),
           outerProps: {
             className: `${this.props.baseClassName}__full-description`
           },

package/cjs/components/FormFieldPassword/FormFieldPassword.js

@@ -17,9 +17,12 @@ var _Translate = require("../Translate");
 var _PasswordMeter = _interopRequireDefault(require("./PasswordMeter"));
 var _generatePassword = _interopRequireDefault(require("./generatePassword"));
 var _utils = require("../../utils");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
+const translate = (0, _LocaleProvider.getInternalTranslate)('FormFieldPassword');
+
 /**
  * `FormFieldPassword` component provides secure way to enter a password.
  * @since 0.0.58
@@ -70,9 +73,8 @@ class FormFieldPassword extends _react.Component {
       className: `${baseClassName}__button--copy`,
       icon: 'copy',
       onClick: () => this.handleCopyToClipboard(value),
-      tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-        content: "FormFieldPassword.copyButtonHint"
-      }),
+      tooltip: translate('copyButtonHint'),
+      tooltipAsLabel: true,
       disabled: isDisabled()
     };
     let button;
@@ -104,9 +106,8 @@ class FormFieldPassword extends _react.Component {
           passwordGenerated: true
         });
       },
-      tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-        content: "FormFieldPassword.generateButtonHint"
-      }),
+      tooltip: translate('generateButtonHint'),
+      tooltipAsLabel: true,
       disabled: isDisabled(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
         content: "FormFieldPassword.generateButton"
@@ -180,11 +181,8 @@ class FormFieldPassword extends _react.Component {
             className: `${baseClassName}__button--show`,
             onClick: this.handleToggleClick,
             icon: visible ? 'visible' : 'invisible',
-            tooltip: visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-              content: "FormFieldPassword.hidePassword"
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-              content: "FormFieldPassword.showPassword"
-            }),
+            tooltip: translate(visible ? 'hidePassword' : 'showPassword'),
+            tooltipAsLabel: true,
             ghost: true,
             disabled: isDisabled()
           }),

package/cjs/components/InPlaceEdit/Editor.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Input = _interopRequireDefault(require("../Input"));
-var _Translate = require("../Translate");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -20,6 +20,7 @@ const Editor = _ref => {
     onCancel,
     baseClassName
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('InPlaceEdit');
   const [value, setValue] = (0, _react.useState)(initialValue);
   const handleChange = event => {
     setValue(event.target.value);
@@ -47,17 +48,15 @@ const Editor = _ref => {
         className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
         icon: "check-mark",
         onClick: handleSave,
-        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-          content: "InPlaceEdit.okButtonHint"
-        })
+        tooltip: translate('okButtonHint'),
+        tooltipAsLabel: true
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         ghost: true,
         className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
         icon: "cross-mark",
         onClick: onCancel,
-        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-          content: "InPlaceEdit.cancelButtonHint"
-        })
+        tooltip: translate('cancelButtonHint'),
+        tooltipAsLabel: true
       })]
     })]
   });

package/cjs/components/InPlaceEdit/InPlaceEdit.js

@@ -9,8 +9,8 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Button = _interopRequireDefault(require("../Button"));
-var _Translate = require("../Translate");
 var _Editor = _interopRequireDefault(require("./Editor"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -28,6 +28,7 @@ const InPlaceEdit = _ref => {
     value,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('InPlaceEdit');
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
   const toggleEditing = () => setIsEditing(current => !current);
   const handleSave = newValue => {
@@ -45,9 +46,8 @@ const InPlaceEdit = _ref => {
         name: 'pencil',
         className: `${baseClassName}__control-button-icon`
       },
-      tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
-        content: "InPlaceEdit.editButtonHint"
-      })
+      tooltip: translate('editButtonHint'),
+      tooltipAsLabel: true
     }), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Editor.default, {
       baseClassName: baseClassName,
       value: `${value}`,

package/cjs/components/InputFile/InputFile.js

@@ -69,7 +69,7 @@ const InputFile = _ref => {
     ...props,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
       className: `${baseClassName}__button`,
-      "data-testId": testId && `${testId}--browse-button`,
+      "data-testid": testId && `${testId}--browse-button`,
       disabled: disabled,
       component: "label",
       state: hasFocus ? 'focused' : undefined,
@@ -80,7 +80,7 @@ const InputFile = _ref => {
         onChange: handleChange,
         className: `${baseClassName}__input`,
         ref: inputRef,
-        "data-testId": testId && `${testId}--file-input`,
+        "data-testid": testId && `${testId}--file-input`,
         onFocus: handleFocus,
         onBlur: handleBlur,
         accept: accept
@@ -94,14 +94,14 @@ const InputFile = _ref => {
         truncate: true,
         nowrap: true,
         className: `${baseClassName}__name`,
-        "data-testId": testId && `${testId}--file-name`,
+        "data-testid": testId && `${testId}--file-name`,
         intent: disabled ? 'muted' : undefined,
         children: file.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         icon: "cross-mark",
         ghost: true,
         onClick: handleReset,
-        "data-testId": testId && `${testId}--reset-button`,
+        "data-testid": testId && `${testId}--reset-button`,
         disabled: disabled
       })]
     })]

package/cjs/components/InputNumber/InputNumber.js

@@ -11,6 +11,7 @@ var _utils = require("../utils");
 var _Input = _interopRequireDefault(require("../Input"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _constants = require("../../constants");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -64,6 +65,7 @@ const InputNumber = _ref => {
     incrementIcon = 'plus',
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('InputNumber');
   const inputRef = (0, _react.useRef)(null);
   const isControlled = propValue !== undefined;
   const safeDefaultValue = typeof defaultValue === 'number' ? defaultValue : '';
@@ -148,6 +150,7 @@ const InputNumber = _ref => {
     className: (0, _classnames.default)(baseClassName, className),
     innerRef: inputRef,
     prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      "aria-label": translate('decrement'),
       icon: decrementIcon,
       ghost: true,
       disabled: minDisabled,
@@ -156,6 +159,7 @@ const InputNumber = _ref => {
       className: `${baseClassName}__dec`
     }),
     suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      "aria-label": translate('increment'),
       icon: incrementIcon,
       ghost: true,
       disabled: maxDisabled,

package/cjs/components/Layout/Layout.js

@@ -10,10 +10,12 @@ var _react = require("react");
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactTransitionGroup = require("react-transition-group");
+var _LocaleProvider = require("../LocaleProvider");
 var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
+const translate = (0, _LocaleProvider.getInternalTranslate)('Layout');
 const subscribeMatchMedia = (query, handler) => {
   const mq = window.matchMedia(query);
   handler(mq);
@@ -104,6 +106,10 @@ class Layout extends _react.Component {
       } = this.state;
       return isResponsive ? isSidebarClosedResponsive : isSidebarClosedDesktop;
     });
+    (0, _defineProperty2.default)(this, "getSidebarTogglerLabel", () => {
+      const isSidebarClosed = this.getSidebarClosed();
+      return translate(isSidebarClosed ? 'openSidebar' : 'closeSidebar');
+    });
   }
   static getDerivedStateFromProps(props, state) {
     const {
@@ -188,6 +194,7 @@ class Layout extends _react.Component {
                   type: "button",
                   onClick: this.handleToggle,
                   ref: this.responsiveSidebarTogglerRef,
+                  "aria-label": this.getSidebarTogglerLabel(),
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                     className: `${baseClassName}__responsive-sidebar-toggler-inner`,
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -283,6 +290,7 @@ class Layout extends _react.Component {
             className: `${baseClassName}__sidebar-toggler`,
             onClick: this.handleToggle,
             type: "button",
+            "aria-label": this.getSidebarTogglerLabel(),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: `${baseClassName}__sidebar-toggler-inner`
             })

package/cjs/components/List/List.js

@@ -27,8 +27,11 @@ var _Columns = _interopRequireWildcard(require("../Columns"));
 var _useFocusVisible = require("use-focus-visible");
 var _Menu = _interopRequireWildcard(require("../Menu"));
 var _Label = _interopRequireDefault(require("../Label"));
+var _LocaleProvider = require("../LocaleProvider");
 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 translate = (0, _LocaleProvider.getInternalTranslate)('List');
+
 // eslint-disable-next-line func-style
 function getRowKey(row, props) {
   const {
@@ -604,7 +607,6 @@ class List extends _react.Component {
       ...(Wrapper === Tbody && !isDragged ? reorderableProps : undefined),
       key: getRowKey(row, this.props)
     }, /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
-      role: "listitem",
       className: (0, _classnames.default)({
         'is-selected': this.isRowSelected(row),
         [`${baseClassName}__row--expanded`]: this.isRowExpanded(row),
@@ -728,7 +730,6 @@ class List extends _react.Component {
             [`${baseClassName}--expandable`]: renderRowBody,
             [`${baseClassName}__table--vertical`]: vertical
           }),
-          role: "list",
           children: element
         })
       });
@@ -776,7 +777,6 @@ class List extends _react.Component {
       classNames: `${baseClassName}__row-body-`,
       nodeRef: trRef,
       children: state => /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-        role: "listitem",
         className: `${baseClassName}__row-body`,
         ref: trRef,
         children: [reorderable ? /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
@@ -1107,7 +1107,10 @@ class List extends _react.Component {
       const headerCheckboxProps = {
         checked: headerChecked,
         indeterminate: onAllRowsSelectedChange && shouldBePagination ? this.state.selectAllActive : undefined,
-        onChange: onAllRowsSelectedChange && shouldBePagination ? () => this.toggleSelectionMenu() : this.handleGlobalSelectionChange
+        onChange: onAllRowsSelectedChange && shouldBePagination ? () => this.toggleSelectionMenu() : this.handleGlobalSelectionChange,
+        inputProps: {
+          'aria-label': translate('selectAllRows')
+        }
       };
       let title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
         ...headerCheckboxProps
@@ -1142,7 +1145,8 @@ class List extends _react.Component {
             disabled: row.disabled,
             onChange: checked => this.handleRowSelectionChange(checked, getRowKey(row, this.props)),
             inputProps: {
-              value: getRowKey(row, this.props)
+              value: getRowKey(row, this.props),
+              'aria-label': translate('selectRow')
             }
           };
           if (typeof renderSelectionCheckbox === 'function') {
@@ -1164,6 +1168,7 @@ class List extends _react.Component {
         },
         title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           ghost: true,
+          "aria-label": translate('toggleAllRows'),
           className: `${baseClassName}__row-expander`,
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             className: `${baseClassName}__row-expander-icon`,
@@ -1183,6 +1188,7 @@ class List extends _react.Component {
         }),
         render: row => this.isRowExpandable(row) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           ghost: true,
+          "aria-label": translate('toggleRow'),
           className: `${baseClassName}__row-expander`,
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             className: `${baseClassName}__row-expander-icon`,
@@ -1245,7 +1251,6 @@ class List extends _react.Component {
               [`${baseClassName}__table--vertical`]: vertical,
               [`${baseClassName}__table--reorderable`]: reorderable
             }),
-            role: "list",
             ...reorderableProps,
             children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {