@plesk/ui-library 3.44.0 → 3.45.0

package/cjs/components/List/ListActions.js

@@ -13,6 +13,7 @@ var _Dropdown = _interopRequireDefault(require("../Dropdown"));
 var _Menu = _interopRequireDefault(require("../Menu"));
 var _ListAction = _interopRequireDefault(require("./ListAction"));
 var _VerticalContext = _interopRequireDefault(require("../VerticalContext"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -26,8 +27,10 @@ const ListActions = _ref => {
     className,
     children,
     locale,
+    onMenuToggle,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('ListActions');
   const [overlay, setOverlay] = (0, _react.useState)(false);
   const vertical = (0, _react.useContext)(_VerticalContext.default);
   (0, _react.useEffect)(() => {
@@ -82,7 +85,9 @@ const ListActions = _ref => {
       menuPlacement: "bottom-end",
       overlay: overlay,
       locale: locale,
+      onToggle: onMenuToggle,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        "aria-label": translate('menuButton'),
         ghost: true,
         icon: "kebab"
       })

package/cjs/components/LocaleProvider/LocaleProvider.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTranslate = exports.useInternalTranslate = exports.default = exports.LocaleContext = exports.LocaleBetaProvider = void 0;
+exports.useTranslate = exports.useInternalTranslate = exports.getInternalTranslate = exports.default = exports.LocaleContext = exports.LocaleBetaProvider = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -105,11 +105,21 @@ const useTranslate = namespace => {
   return (0, _react.useCallback)(
   // eslint-disable-next-line max-params
   (key, params, fallback, defaultMessages) => {
-    const lmsg = context?.locale.lmsg ?? createTranslate({});
-    return lmsg(namespace ? `${namespace}.${key}` : key, params, fallback, defaultMessages);
+    if (context || defaultMessages) {
+      const lmsg = context?.locale.lmsg ?? createTranslate({});
+      return lmsg(namespace ? `${namespace}.${key}` : key, params, fallback, defaultMessages);
+    }
+    return typeof fallback === 'string' ? applyParams(fallback, params) : `[${key}]`;
   }, [context, namespace]);
 };
 exports.useTranslate = useTranslate;
+/** Internal function to support legacy class components */
+const getInternalTranslate = namespace => {
+  const defaultMessages = (0, _Translate.getLocaleMessages)();
+  const lmsg = createTranslate(defaultMessages ?? {});
+  return (key, params) => lmsg(namespace ? `${namespace}.${key}` : key, params);
+};
+exports.getInternalTranslate = getInternalTranslate;
 const useInternalTranslate = namespace => {
   const translate = useTranslate(namespace);
   const defaultMessages = (0, _Translate.getLocaleMessages)();

package/cjs/components/Menu/MenuItem.js

@@ -48,6 +48,10 @@ const MenuItem = _ref => {
     icon: icon,
     label: label,
     ...props,
+    onKeyDown: (0, _utils.createKeyboardClickAdapter)({
+      disabled,
+      existingHandler: props.onKeyDown
+    }),
     children: children
   });
   if (tooltip) {

package/cjs/components/Overlay/Overlay.js

@@ -154,6 +154,7 @@ const Overlay = _ref2 => {
     if (!isOpenRef.current) return;
     isOpenRef.current = false;
     if (--overlaysCount === 0) (0, _utils.enableDocumentScroll)();
+    (0, _utils2.setFocusReturned)(prevFocusElementRef.current, 300);
     prevFocusElementRef.current?.focus();
   }, []);
   (0, _react.useEffect)(() => {

package/cjs/components/Panel/Panel.js

@@ -13,6 +13,7 @@ var _Translate = require("../Translate");
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -32,6 +33,7 @@ const Panel = _ref => {
     extra,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Panel');
   const rootRef = (0, _react.useRef)(null);
   const isControlled = externalCollapsed !== undefined;
   const [internalCollapsed, setInternalCollapsed] = (0, _react.useState)(false);
@@ -68,6 +70,7 @@ const Panel = _ref => {
           className: `${baseClassName}__extra`,
           children: [extra, collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
             ghost: true,
+            "aria-label": translate(collapsed ? 'expand' : 'collapse'),
             className: `${baseClassName}__control-button`,
             icon: {
               name: 'chevron-up',

package/cjs/components/Popover/Popover.js

@@ -19,9 +19,11 @@ var _utils = require("../utils");
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
 var _FocusTrap = _interopRequireDefault(require("../FocusTrap"));
 var _react = require("react");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
+const translate = (0, _LocaleProvider.getInternalTranslate)('Popover');
 const PLACEMENT_MAP = {
   'top-left': 'top-end',
   'top-right': 'top-start',
@@ -220,6 +222,7 @@ class Popover extends _react.Component {
       }
     }
     const close = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      "aria-label": translate('closeButton'),
       className: (0, _classnames.default)(`${baseClassName}__close`, title && `${baseClassName}__close--heading`),
       onClick: this.handleClose,
       ghost: true,

package/cjs/components/Section/Section.js

@@ -15,6 +15,7 @@ var _VerticalContext = _interopRequireDefault(require("../VerticalContext"));
 var _SectionContext = _interopRequireDefault(require("./SectionContext"));
 var _useCollapsed = require("./useCollapsed");
 var _useVertical = require("./useVertical");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -41,6 +42,7 @@ const Section = _ref => {
     children,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Section');
   const containerRef = (0, _react.useRef)(null);
   const collapseButtonRef = (0, _react.useRef)(null);
   const vertical = (0, _useVertical.useVertical)(externalVertical, containerRef);
@@ -74,6 +76,7 @@ const Section = _ref => {
         children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: `${baseClassName}__header`,
           children: [collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            "aria-label": translate(collapsed ? 'expand' : 'collapse'),
             ref: collapseButtonRef,
             ghost: true,
             className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--collapse`),
@@ -97,6 +100,7 @@ const Section = _ref => {
             className: `${baseClassName}__header-buttons`,
             children: [buttons, onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
               ghost: true,
+              "aria-label": translate('closeButton'),
               className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--close`),
               onClick: onClose,
               icon: "cross-mark"

package/cjs/components/Select/Select.js

@@ -93,6 +93,10 @@ const getNextValue = (value, prevValue) => {
   }
   return value;
 };
+const getActiveDescendant = (options, listboxId, highlightedIndex) => {
+  const option = options[highlightedIndex];
+  return option?.props?.id ?? (0, _ComboBoxDropdown.getOptionId)(listboxId, highlightedIndex);
+};
 /**
  * `Select` component is used for making a choice among a set of related options.
  * @since 2.3.0
@@ -113,13 +117,16 @@ const Select = _ref => {
     clearable = false,
     multiple = false,
     placeholder,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     ...props
   } = _ref;
   const [opened, setOpened] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)(null);
   const emitterRef = (0, _react.useRef)(new _utils.EventEmitter());
   const uid = (0, _react.useId)();
-  const listboxId = `${baseClassName}-listbox-${id || uid}`;
+  const ariaId = id || uid;
+  const listboxId = `${baseClassName}-listbox-${ariaId}`;
   let [value, setValue] = (0, _react.useState)(() => {
     if (typeof defaultValue === 'undefined') {
       return multiple ? [] : undefined;
@@ -297,7 +304,11 @@ const Select = _ref => {
     onValueRemove: handleValueRemove,
     placeholder: placeholder,
     opened: opened,
+    ariaId: ariaId,
     listboxId: listboxId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-activedescendant": opened ? getActiveDescendant(options, listboxId, highlightedIndex) : undefined,
     ref: controlRef
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboBoxDropdown.default, {

package/cjs/components/Select/SelectControl.js

@@ -58,7 +58,11 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     onValueRemove,
     placeholder,
     opened = false,
+    ariaId,
     listboxId,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-activedescendant': ariaActiveDescendant,
     ...props
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
@@ -82,6 +86,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     values = [current.value];
   }
   const hasValue = values.length > 0;
+  const valueId = `${ariaId}-value`;
   (0, _react.useLayoutEffect)(() => {
     if (filterValue === '') {
       setInputWidth(DEFAULT_INPUT_WIDTH);
@@ -109,6 +114,15 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
   };
   const handleKeyDown = e => {
     switch (e.key) {
+      case ' ':
+        if (searchable) break;
+        e.preventDefault();
+        if (opened) {
+          onHighlightConfirm();
+        } else {
+          onHighlightChange(0);
+        }
+        break;
       case 'ArrowUp':
         e.preventDefault();
         onHighlightChange(-1);
@@ -171,6 +185,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     onClick: handleClick,
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      id: valueId,
       className: `${baseClassName}__value-container`,
       children: [Array.isArray(current) && current.map(_ref3 => {
         let {
@@ -200,12 +215,15 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
         style: {
           width: inputWidth
         },
-        role: searchable ? 'combobox' : undefined,
-        "aria-autocomplete": searchable ? 'list' : undefined,
-        "aria-haspopup": searchable ? 'listbox' : 'listbox',
+        role: "combobox",
+        "aria-haspopup": "listbox",
         "aria-expanded": opened,
         "aria-controls": listboxId,
-        autoComplete: "off"
+        "aria-autocomplete": searchable ? 'list' : undefined,
+        "aria-activedescendant": ariaActiveDescendant,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": hasValue ? valueId : undefined
       }), !filterValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
         children: [!Array.isArray(current) && current && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: `${baseClassName}__value`,
@@ -218,6 +236,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: `${baseClassName}__indicators`,
       children: [clearable && hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "aria-label": translate('clearButton'),
         type: "button",
         className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--clear`),
         tabIndex: -1,
@@ -242,14 +261,12 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
         type: "button",
         className: (0, _classnames.default)(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
         tabIndex: -1,
-        "aria-haspopup": "listbox",
-        "aria-expanded": opened,
+        "aria-hidden": "true",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           className: `${baseClassName}__indicator-icon`,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "-4 -5 16 16",
-            "aria-hidden": "true",
             focusable: "false",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
               d: "M4 4.048L.847.895a.496.496 0 1 0-.702.702l3.452 3.451a.5.5 0 0 0 .806 0l3.452-3.451a.496.496 0 0 0-.702-.702L4 4.048z"

package/cjs/components/Spinner/Spinner.js

@@ -21,6 +21,7 @@ const Spinner = _ref => {
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    "aria-hidden": true,
     className: (0, _classnames.default)(baseClassName, className, {
       [`${baseClassName}--color-animation`]: colorAnimation
     }),

package/cjs/components/SwitchesPanelItem/SwitchesPanelItem.js

@@ -10,6 +10,7 @@ var _constants = require("../../constants");
 var _Switch = _interopRequireDefault(require("../Switch"));
 var _Action = _interopRequireDefault(require("../Action"));
 var _Popover = _interopRequireDefault(require("../Popover"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -32,6 +33,7 @@ const SwitchesPanelItem = _ref => {
     baseClassName = `${_constants.CLS_PREFIX}switches-panel-item`,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('SwitchesPanelItem');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--${intent}`]: intent
@@ -56,6 +58,7 @@ const SwitchesPanelItem = _ref => {
         children: [children, fullDescription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
           intent: "info",
           target: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Action.default, {
+            "aria-label": translate('showDescription'),
             icon: "question-mark-circle",
             outerProps: {
               className: `${baseClassName}__full-description-toggle`

package/cjs/components/Tabs/SearchBar.js

@@ -17,10 +17,13 @@ var _Input = _interopRequireDefault(require("../Input"));
 var _Menu = _interopRequireWildcard(require("../Menu"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
 var _utils2 = require("../utils");
+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)('SearchBar');
+
 /**
  * `SearchBar` component is used for providing type-as-you-go search.
  * @since 0.0.58
@@ -359,6 +362,7 @@ class SearchBar extends _react.Component {
         intent: "info",
         hidden: !value,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          "aria-label": translate('expandSearch'),
           icon: "search",
           onClick: this.handleExpand
         })
@@ -375,6 +379,7 @@ class SearchBar extends _react.Component {
           ...inputProps,
           value: value,
           prefix: (collapsable && !isCollapsed || distractionFreeModeEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            "aria-label": translate('collapseSearch'),
             icon: {
               name: 'chevron-right',
               flipHorizontal: (0, _utils.isRtl)()
@@ -384,10 +389,12 @@ class SearchBar extends _react.Component {
           }),
           suffix: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              "aria-label": translate('clearButton'),
               icon: "remove",
               onClick: this.handleReset,
               ghost: true
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              "aria-label": translate('searchButton'),
               icon: "search",
               onClick: this.handleSearch,
               state: loading ? 'loading' : undefined,

package/cjs/components/Tabs/TabClose.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -15,10 +16,12 @@ const TabClose = _ref => {
     onClose,
     baseClassName
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Tabs');
   if (typeof onClose !== 'function') {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    "aria-label": translate('closeButton'),
     className: `${baseClassName}__${tabMode}-close`,
     type: "button",
     onClick: e => {

package/cjs/components/Toast/Toast.js

@@ -12,6 +12,7 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _intentIconMap = require("../intentIconMap");
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
 var _useAutoClose = require("./useAutoClose");
+var _LocaleProvider = require("../LocaleProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
@@ -33,6 +34,7 @@ const Toast = _ref => {
     groupKey,
     ...props
   } = _ref;
+  const translate = (0, _LocaleProvider.useInternalTranslate)('Toast');
   (0, _useAutoClose.useAutoClose)({
     autoClosable,
     autoCloseTimeout,
@@ -56,6 +58,7 @@ const Toast = _ref => {
       className: `${baseClassName}__action`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         ghost: true,
+        "aria-label": translate('closeButton'),
         icon: {
           name: 'cross-mark',
           size: '12'