@plesk/ui-library 3.44.0 → 3.45.0

package/esm/components/LocaleProvider/LocaleProvider.js

@@ -98,10 +98,19 @@ export const useTranslate = namespace => {
   return 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]);
 };
+/** Internal function to support legacy class components */
+export const getInternalTranslate = namespace => {
+  const defaultMessages = getLocaleMessages();
+  const lmsg = createTranslate(defaultMessages ?? {});
+  return (key, params) => lmsg(namespace ? `${namespace}.${key}` : key, params);
+};
 export const useInternalTranslate = namespace => {
   const translate = useTranslate(namespace);
   const defaultMessages = getLocaleMessages();

package/esm/components/Menu/MenuItem.js

@@ -4,7 +4,7 @@ import { cloneElement } from 'react';
 import classNames from 'classnames';
 import Tooltip from '../Tooltip';
 import { CLS_PREFIX } from '../../constants';
-import { createProxyProps } from '../utils';
+import { createKeyboardClickAdapter, createProxyProps } from '../utils';
 import MenuBaseItem from './MenuBaseItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -41,6 +41,10 @@ const MenuItem = _ref => {
     icon: icon,
     label: label,
     ...props,
+    onKeyDown: createKeyboardClickAdapter({
+      disabled,
+      existingHandler: props.onKeyDown
+    }),
     children: children
   });
   if (tooltip) {

package/esm/components/Overlay/Overlay.js

@@ -3,7 +3,7 @@
 import { disableDocumentScroll, enableDocumentScroll } from '../../utils';
 import { isValidElement, useRef, useState, useLayoutEffect, useCallback, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { safeInvoke } from '../utils';
+import { safeInvoke, setFocusReturned } from '../utils';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_OVERLAY } from '../../constants';
 import Layer from '../Layer';
@@ -147,6 +147,7 @@ const Overlay = _ref2 => {
     if (!isOpenRef.current) return;
     isOpenRef.current = false;
     if (--overlaysCount === 0) enableDocumentScroll();
+    setFocusReturned(prevFocusElementRef.current, 300);
     prevFocusElementRef.current?.focus();
   }, []);
   useEffect(() => {

package/esm/components/Panel/Panel.js

@@ -8,6 +8,7 @@ import { isLikeText } from '../Translate';
 import Heading from '../Heading';
 import Button from '../Button';
 import { isClickable } from '../utils';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Panel` component is used for visually grouping some content.
@@ -25,6 +26,7 @@ const Panel = _ref => {
     extra,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('Panel');
   const rootRef = useRef(null);
   const isControlled = externalCollapsed !== undefined;
   const [internalCollapsed, setInternalCollapsed] = useState(false);
@@ -61,6 +63,7 @@ const Panel = _ref => {
           className: `${baseClassName}__extra`,
           children: [extra, collapsible && /*#__PURE__*/_jsx(Button, {
             ghost: true,
+            "aria-label": translate(collapsed ? 'expand' : 'collapse'),
             className: `${baseClassName}__control-button`,
             icon: {
               name: 'chevron-up',

package/esm/components/Popover/Popover.js

@@ -14,7 +14,9 @@ import { wrapFunction } from '../utils';
 import OnDarkContext from '../OnDarkContext';
 import FocusTrap from '../FocusTrap';
 import { cloneElement, Component, createRef } from 'react';
+import { getInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const translate = getInternalTranslate('Popover');
 const PLACEMENT_MAP = {
   'top-left': 'top-end',
   'top-right': 'top-start',
@@ -213,6 +215,7 @@ class Popover extends Component {
       }
     }
     const close = /*#__PURE__*/_jsx(Button, {
+      "aria-label": translate('closeButton'),
       className: classNames(`${baseClassName}__close`, title && `${baseClassName}__close--heading`),
       onClick: this.handleClose,
       ghost: true,

package/esm/components/Section/Section.js

@@ -10,6 +10,7 @@ import VerticalContext from '../VerticalContext';
 import SectionContext from './SectionContext';
 import { useCollapsed } from './useCollapsed';
 import { useVertical } from './useVertical';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SECTION_BASE_CLASS_NAME = `${CLS_PREFIX}section`;
 
@@ -34,6 +35,7 @@ const Section = _ref => {
     children,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('Section');
   const containerRef = useRef(null);
   const collapseButtonRef = useRef(null);
   const vertical = useVertical(externalVertical, containerRef);
@@ -67,6 +69,7 @@ const Section = _ref => {
         children: [title && /*#__PURE__*/_jsxs("div", {
           className: `${baseClassName}__header`,
           children: [collapsible && /*#__PURE__*/_jsx(Button, {
+            "aria-label": translate(collapsed ? 'expand' : 'collapse'),
             ref: collapseButtonRef,
             ghost: true,
             className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--collapse`),
@@ -90,6 +93,7 @@ const Section = _ref => {
             className: `${baseClassName}__header-buttons`,
             children: [buttons, onClose && /*#__PURE__*/_jsx(Button, {
               ghost: true,
+              "aria-label": translate('closeButton'),
               className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--close`),
               onClick: onClose,
               icon: "cross-mark"

package/esm/components/Select/Select.js

@@ -4,7 +4,7 @@ import { Children, useState, useRef, isValidElement, useId } from 'react';
 import classNames from 'classnames';
 import { safeInvoke, EventEmitter } from '../utils';
 import { CLS_PREFIX } from '../../constants';
-import ComboBoxDropdown, { findNextSafeIndex } from '../ComboBoxDropdown';
+import ComboBoxDropdown, { findNextSafeIndex, getOptionId } from '../ComboBoxDropdown';
 import { InternalTranslate } from '../Translate';
 import SelectControl from './SelectControl';
 import SelectOptionGroup from './SelectOptionGroup';
@@ -85,6 +85,10 @@ const getNextValue = (value, prevValue) => {
   }
   return value;
 };
+const getActiveDescendant = (options, listboxId, highlightedIndex) => {
+  const option = options[highlightedIndex];
+  return option?.props?.id ?? getOptionId(listboxId, highlightedIndex);
+};
 /**
  * `Select` component is used for making a choice among a set of related options.
  * @since 2.3.0
@@ -105,13 +109,16 @@ const Select = _ref => {
     clearable = false,
     multiple = false,
     placeholder,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     ...props
   } = _ref;
   const [opened, setOpened] = useState(false);
   const controlRef = useRef(null);
   const emitterRef = useRef(new EventEmitter());
   const uid = useId();
-  const listboxId = `${baseClassName}-listbox-${id || uid}`;
+  const ariaId = id || uid;
+  const listboxId = `${baseClassName}-listbox-${ariaId}`;
   let [value, setValue] = useState(() => {
     if (typeof defaultValue === 'undefined') {
       return multiple ? [] : undefined;
@@ -289,7 +296,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__*/_jsx(ComboBoxDropdown, {

package/esm/components/Select/SelectControl.js

@@ -51,7 +51,11 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
     onValueRemove,
     placeholder,
     opened = false,
+    ariaId,
     listboxId,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-activedescendant': ariaActiveDescendant,
     ...props
   } = _ref;
   const inputRef = useRef(null);
@@ -75,6 +79,7 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
     values = [current.value];
   }
   const hasValue = values.length > 0;
+  const valueId = `${ariaId}-value`;
   useLayoutEffect(() => {
     if (filterValue === '') {
       setInputWidth(DEFAULT_INPUT_WIDTH);
@@ -102,6 +107,15 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
   };
   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);
@@ -164,6 +178,7 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
     onClick: handleClick,
     ref: ref,
     children: [/*#__PURE__*/_jsxs("span", {
+      id: valueId,
       className: `${baseClassName}__value-container`,
       children: [Array.isArray(current) && current.map(_ref3 => {
         let {
@@ -193,12 +208,15 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
         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__*/_jsxs(Fragment, {
         children: [!Array.isArray(current) && current && /*#__PURE__*/_jsx("span", {
           className: `${baseClassName}__value`,
@@ -211,6 +229,7 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
     }), /*#__PURE__*/_jsxs("span", {
       className: `${baseClassName}__indicators`,
       children: [clearable && hasValue && /*#__PURE__*/_jsx("button", {
+        "aria-label": translate('clearButton'),
         type: "button",
         className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--clear`),
         tabIndex: -1,
@@ -235,14 +254,12 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
         type: "button",
         className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
         tabIndex: -1,
-        "aria-haspopup": "listbox",
-        "aria-expanded": opened,
+        "aria-hidden": "true",
         children: /*#__PURE__*/_jsx(Icon, {
           className: `${baseClassName}__indicator-icon`,
           children: /*#__PURE__*/_jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "-4 -5 16 16",
-            "aria-hidden": "true",
             focusable: "false",
             children: /*#__PURE__*/_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/esm/components/Spinner/Spinner.js

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

package/esm/components/SwitchesPanelItem/SwitchesPanelItem.js

@@ -5,6 +5,7 @@ import { CLS_PREFIX } from '../../constants';
 import Switch from '../Switch';
 import Action from '../Action';
 import Popover from '../Popover';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `SwitchesPanelItem` component is used for combining [Switch](#!/Switch) component with text title and description.
@@ -25,6 +26,7 @@ const SwitchesPanelItem = _ref => {
     baseClassName = `${CLS_PREFIX}switches-panel-item`,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('SwitchesPanelItem');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--${intent}`]: intent
@@ -49,6 +51,7 @@ const SwitchesPanelItem = _ref => {
         children: [children, fullDescription && /*#__PURE__*/_jsx(Popover, {
           intent: "info",
           target: /*#__PURE__*/_jsx(Action, {
+            "aria-label": translate('showDescription'),
             icon: "question-mark-circle",
             outerProps: {
               className: `${baseClassName}__full-description-toggle`

package/esm/components/Tabs/SearchBar.js

@@ -12,7 +12,10 @@ import Input from '../Input';
 import Menu, { MenuItem, MenuSelectableItem } from '../Menu';
 import ResponsiveContext from '../ResponsiveContext';
 import { safeInvoke } from '../utils';
+import { getInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const translate = getInternalTranslate('SearchBar');
+
 /**
  * `SearchBar` component is used for providing type-as-you-go search.
  * @since 0.0.58
@@ -351,6 +354,7 @@ class SearchBar extends Component {
         intent: "info",
         hidden: !value,
         children: /*#__PURE__*/_jsx(Button, {
+          "aria-label": translate('expandSearch'),
           icon: "search",
           onClick: this.handleExpand
         })
@@ -367,6 +371,7 @@ class SearchBar extends Component {
           ...inputProps,
           value: value,
           prefix: (collapsable && !isCollapsed || distractionFreeModeEnabled) && /*#__PURE__*/_jsx(Button, {
+            "aria-label": translate('collapseSearch'),
             icon: {
               name: 'chevron-right',
               flipHorizontal: isRtl()
@@ -376,10 +381,12 @@ class SearchBar extends Component {
           }),
           suffix: /*#__PURE__*/_jsxs(_Fragment, {
             children: [value && /*#__PURE__*/_jsx(Button, {
+              "aria-label": translate('clearButton'),
               icon: "remove",
               onClick: this.handleReset,
               ghost: true
             }), /*#__PURE__*/_jsx(Button, {
+              "aria-label": translate('searchButton'),
               icon: "search",
               onClick: this.handleSearch,
               state: loading ? 'loading' : undefined,

package/esm/components/Tabs/TabClose.js

@@ -1,6 +1,7 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 import Icon from '../Icon';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TabClose = _ref => {
   let {
@@ -8,10 +9,12 @@ const TabClose = _ref => {
     onClose,
     baseClassName
   } = _ref;
+  const translate = useInternalTranslate('Tabs');
   if (typeof onClose !== 'function') {
     return null;
   }
   return /*#__PURE__*/_jsx("button", {
+    "aria-label": translate('closeButton'),
     className: `${baseClassName}__${tabMode}-close`,
     type: "button",
     onClick: e => {

package/esm/components/Toast/Toast.js

@@ -7,6 +7,7 @@ import Button from '../Button';
 import { intentIconMap } from '../intentIconMap';
 import OnDarkContext from '../OnDarkContext';
 import { useAutoClose } from './useAutoClose';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Toast = _ref => {
   let {
@@ -26,6 +27,7 @@ const Toast = _ref => {
     groupKey,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('Toast');
   useAutoClose({
     autoClosable,
     autoCloseTimeout,
@@ -49,6 +51,7 @@ const Toast = _ref => {
       className: `${baseClassName}__action`,
       children: /*#__PURE__*/_jsx(Button, {
         ghost: true,
+        "aria-label": translate('closeButton'),
         icon: {
           name: 'cross-mark',
           size: '12'