@plesk/ui-library 3.43.2 → 3.44.0

package/esm/components/FormFieldRadioButtons/FormFieldRadioButtons.js

@@ -28,50 +28,57 @@ const FormFieldRadioButtons = _ref => {
         getName,
         getValue,
         setValue,
-        isDisabled
+        isDisabled,
+        getErrors,
+        getDescriptionLabelId
       } = _ref2;
-      return options.map((_ref3, index) => {
-        let {
-          value,
-          label,
-          description,
-          disabled,
-          indentFields = []
-        } = _ref3;
-        return /*#__PURE__*/_jsxs("div", {
-          className: `${baseClassName}__radio`,
-          children: [/*#__PURE__*/_jsx(Radio, {
-            name: getName(),
-            checked: getValue() === value,
-            onChange: isChecked => {
-              if (isChecked) {
-                setValue(value);
-              }
-            },
-            disabled: isDisabled() || disabled,
-            inputProps: {
-              id: getId() ? `${getId()}-${value}` : undefined,
+      return /*#__PURE__*/_jsx("fieldset", {
+        "aria-invalid": !!Object.keys(getErrors() ?? {}).length,
+        "aria-describedby": getDescriptionLabelId(),
+        className: `${baseClassName}__fieldset`,
+        children: options.map((_ref3, index) => {
+          let {
+            value,
+            label,
+            description,
+            disabled,
+            indentFields = []
+          } = _ref3;
+          return /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__radio`,
+            children: [/*#__PURE__*/_jsx(Radio, {
               name: getName(),
-              value,
-              autoFocus: index === 0 && autoFocus ? true : undefined
-            },
-            children: label || value
-          }), description || indentFields ? /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}__content`,
-            children: [description && /*#__PURE__*/_jsx(Hint, {
-              component: "div",
-              className: `${BASE_FORM_FIELD_CLASS_NAME}__description`,
-              children: description
-            }), indentFields.map(field => {
-              if (isDisabled() || disabled || getValue() !== value) {
-                return /*#__PURE__*/cloneElement(field, {
-                  disabled: true
-                });
-              }
-              return field;
-            })]
-          }) : null]
-        }, value);
+              checked: getValue() === value,
+              onChange: isChecked => {
+                if (isChecked) {
+                  setValue(value);
+                }
+              },
+              disabled: isDisabled() || disabled,
+              inputProps: {
+                id: getId() ? `${getId()}-${value}` : undefined,
+                name: getName(),
+                value,
+                autoFocus: index === 0 && autoFocus ? true : undefined
+              },
+              children: label || value
+            }), description || indentFields ? /*#__PURE__*/_jsxs("div", {
+              className: `${baseClassName}__content`,
+              children: [description && /*#__PURE__*/_jsx(Hint, {
+                component: "div",
+                className: `${BASE_FORM_FIELD_CLASS_NAME}__description`,
+                children: description
+              }), indentFields.map(field => {
+                if (isDisabled() || disabled || getValue() !== value) {
+                  return /*#__PURE__*/cloneElement(field, {
+                    disabled: true
+                  });
+                }
+                return field;
+              })]
+            }) : null]
+          }, value);
+        })
       });
     }
   });

package/esm/components/FormFieldSelect/FormFieldSelect.js

@@ -6,7 +6,7 @@ import FormField from '../FormField';
 import Select from '../Select';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * `FormFieldSelect` componentis is used for making a choice among a set of related options.
+ * `FormFieldSelect` component is used for making a choice among a set of related options.
  * See description of `Select` for [the full list of properties](#!/Select) of this component.
  * @since 1.12.3
  */

package/esm/components/FormFieldText/FormFieldText.js

@@ -36,7 +36,9 @@ const FormFieldText = props => {
         getName,
         getValue,
         setValue,
-        isDisabled
+        getErrors,
+        isDisabled,
+        getDescriptionLabelId
       } = _ref;
       return props.multiline ? /*#__PURE__*/_jsx(TextArea, {
         id: getId(),
@@ -50,6 +52,8 @@ const FormFieldText = props => {
         autoFocus: autoFocus,
         autoComplete: autoComplete,
         autoheight: autoheight,
+        "aria-invalid": !!Object.keys(getErrors() ?? {}).length,
+        "aria-describedby": getDescriptionLabelId(),
         ...(props.inputProps ?? {})
       }) : /*#__PURE__*/_jsx(Input, {
         id: getId(),
@@ -62,6 +66,8 @@ const FormFieldText = props => {
         placeholder: placeholder,
         autoFocus: autoFocus,
         autoComplete: autoComplete,
+        "aria-invalid": !!Object.keys(getErrors() ?? {}).length,
+        "aria-describedby": getDescriptionLabelId(),
         ...(props.inputProps ?? {})
       });
     }

package/esm/components/Hint/Hint.js

@@ -12,9 +12,10 @@ const Hint = _ref => {
     baseClassName = `${CLS_PREFIX}hint`,
     className,
     children,
-    component: Tag = 'span',
+    component,
     ...props
   } = _ref;
+  const Tag = component || 'span';
   return /*#__PURE__*/_jsx(Tag, {
     className: classNames(baseClassName, className),
     ...props,

package/esm/components/Icon/Icon.js

@@ -43,6 +43,7 @@ const getHref = (name, size) => {
 
 const Icon = _ref => {
   let {
+    ariaLabel,
     baseClassName = `${CLS_PREFIX}icon`,
     className,
     name,
@@ -69,6 +70,11 @@ const Icon = _ref => {
       [`${baseClassName}--flip-vertical`]: flipVertical,
       [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
     }, className),
+    ...(ariaLabel || props['aria-label'] ? {
+      'aria-label': ariaLabel || props['aria-label']
+    } : {
+      'aria-hidden': 'true'
+    }),
     ...props,
     children: newName ? /*#__PURE__*/_jsx("svg", {
       focusable: "false",

package/esm/components/Icon/utils.js

@@ -9,21 +9,31 @@ export const create = function (icon) {
   if (!icon) {
     return icon;
   }
+  const computedProps = {
+    ...defaults
+  };
+
+  /* Hide the icon from assistive technologies unless labeled explicitly */
+  if (!('aria-hidden' in defaults)) {
+    if (!('aria-label' in defaults) && !('ariaLabel' in defaults)) {
+      computedProps['aria-hidden'] = 'true';
+    }
+  }
   if (/*#__PURE__*/isValidElement(icon)) {
     const {
       className,
       ...props
     } = icon.props;
     const newProps = {
-      ...defaults
+      ...computedProps
     };
     Object.keys(props).forEach(name => {
       if (props[name] !== null && props[name] !== undefined) {
         newProps[name] = props[name];
       }
     });
-    if (defaults.className || className) {
-      newProps.className = classNames(defaults.className, className);
+    if (computedProps.className || className) {
+      newProps.className = classNames(computedProps.className, className);
     }
     return /*#__PURE__*/cloneElement(icon, newProps);
   }
@@ -33,13 +43,13 @@ export const create = function (icon) {
       ...props
     } = icon;
     return /*#__PURE__*/_jsx(Icon, {
-      ...defaults,
-      className: defaults.className || className ? classNames(defaults.className, className) : null,
+      ...computedProps,
+      className: computedProps.className || className ? classNames(computedProps.className, className) : null,
       ...props
     });
   }
   return /*#__PURE__*/_jsx(Icon, {
-    ...defaults,
+    ...computedProps,
     name: icon
   });
 };

package/esm/components/InPlaceEdit/Editor.js

@@ -4,8 +4,7 @@ import { useState } from 'react';
 import classNames from 'classnames';
 import Button from '../Button';
 import Input from '../Input';
-import Translate from '../Translate';
-import locale from './locale/en-US';
+import { InternalTranslate } from '../Translate';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Editor = _ref => {
   let {
@@ -41,18 +40,16 @@ const Editor = _ref => {
         className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
         icon: "check-mark",
         onClick: handleSave,
-        tooltip: /*#__PURE__*/_jsx(Translate, {
-          content: "InPlaceEdit.okButtonHint",
-          fallback: locale.okButtonHint
+        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "InPlaceEdit.okButtonHint"
         })
       }), /*#__PURE__*/_jsx(Button, {
         ghost: true,
         className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
         icon: "cross-mark",
         onClick: onCancel,
-        tooltip: /*#__PURE__*/_jsx(Translate, {
-          content: "InPlaceEdit.cancelButtonHint",
-          fallback: locale.cancelButtonHint
+        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "InPlaceEdit.cancelButtonHint"
         })
       })]
     })]

package/esm/components/InPlaceEdit/InPlaceEdit.js

@@ -4,9 +4,8 @@ import { useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Editor from './Editor';
-import locale from './locale/en-US';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * This component allows users to edit a short text "in place" — in other words, straight in the interface, without
@@ -39,9 +38,8 @@ const InPlaceEdit = _ref => {
         name: 'pencil',
         className: `${baseClassName}__control-button-icon`
       },
-      tooltip: /*#__PURE__*/_jsx(Translate, {
-        content: "InPlaceEdit.editButtonHint",
-        fallback: locale.editButtonHint
+      tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "InPlaceEdit.editButtonHint"
       })
     }), isEditing && /*#__PURE__*/_jsx(Editor, {
       baseClassName: baseClassName,

package/esm/components/InputFile/InputFile.js

@@ -6,8 +6,7 @@ import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
 import Text from '../Text';
 import Button from '../Button';
-import Translate from '../Translate';
-import localeFallback from './locale/en-US';
+import { InternalTranslate } from '../Translate';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const generateId = () => Math.random().toString(36).slice(2);
 
@@ -63,7 +62,7 @@ const InputFile = _ref => {
     ...props,
     children: [/*#__PURE__*/_jsxs(Button, {
       className: `${baseClassName}__button`,
-      "data-test": testId && `${testId}--browse-button`,
+      "data-testId": testId && `${testId}--browse-button`,
       disabled: disabled,
       component: "label",
       state: hasFocus ? 'focused' : undefined,
@@ -74,29 +73,28 @@ const InputFile = _ref => {
         onChange: handleChange,
         className: `${baseClassName}__input`,
         ref: inputRef,
-        "data-test": testId && `${testId}--file-input`,
+        "data-testId": testId && `${testId}--file-input`,
         onFocus: handleFocus,
         onBlur: handleBlur,
         accept: accept
-      }, id), /*#__PURE__*/_jsx(Translate, {
+      }, id), /*#__PURE__*/_jsx(InternalTranslate, {
         namespace: "InputFile",
         content: "browseButton",
-        translators: locale,
-        fallback: localeFallback.browseButton
+        translators: locale
       })]
     }), file && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Text, {
         truncate: true,
         nowrap: true,
         className: `${baseClassName}__name`,
-        "data-test": testId && `${testId}--file-name`,
+        "data-testId": testId && `${testId}--file-name`,
         intent: disabled ? 'muted' : undefined,
         children: file.name
       }), /*#__PURE__*/_jsx(Button, {
         icon: "cross-mark",
         ghost: true,
         onClick: handleReset,
-        "data-test": testId && `${testId}--reset-button`,
+        "data-testId": testId && `${testId}--reset-button`,
         disabled: disabled
       })]
     })]

package/esm/components/Layout/Layout.js

@@ -299,10 +299,10 @@ export default class Layout extends Component {
       })
     });
   }
-  renderFooter(_ref10) {
+  renderFooter(_ref0) {
     let {
       footer
-    } = _ref10;
+    } = _ref0;
     const {
       baseClassName
     } = this.props;

package/esm/components/Link/Link.js

@@ -44,6 +44,7 @@ const Link = _ref => {
   if (disabled) {
     props.onClick = e => e.preventDefault();
     props.tabIndex = -1;
+    props['aria-disabled'] = true;
   }
   // accessibility
   if (onClick) {
@@ -54,6 +55,7 @@ const Link = _ref => {
         e.currentTarget.click();
       }
     });
+    props.role = 'button';
   }
   return /*#__PURE__*/_jsxs(Tag, {
     ...props,

package/esm/components/List/List.js

@@ -11,7 +11,7 @@ import Checkbox from '../Checkbox';
 import Icon from '../Icon';
 import { safeInvoke, isClickable, scrollIntoView, wrapFunction } from '../utils';
 import Button from '../Button';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Text from '../Text';
 import { ITEMS_PER_PAGE_OPTIONS } from '../Pagination';
 import Spinner from '../Spinner';
@@ -74,20 +74,18 @@ const getHumanTotalRows = _ref2 => {
   });
   switch (mode) {
     case 'totalRows':
-      return wrapToText(/*#__PURE__*/_jsx(Translate, {
+      return wrapToText(/*#__PURE__*/_jsx(InternalTranslate, {
         namespace: "List",
         content: "totalRows",
-        fallback: "%%totalRows%% items total",
         params: {
           totalRows
         },
         translators: translators
       }));
     case 'selectedRows':
-      return wrapToText(/*#__PURE__*/_jsx(Translate, {
+      return wrapToText(/*#__PURE__*/_jsx(InternalTranslate, {
         namespace: "List",
         content: "selectedRows",
-        fallback: "%%selectedRows%% of %%totalRows%% items selected",
         params: {
           selectedRows: /*#__PURE__*/_jsx(Text, {
             bold: true,
@@ -98,17 +96,15 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedAllRows':
-      return wrapToText(/*#__PURE__*/_jsx(Translate, {
+      return wrapToText(/*#__PURE__*/_jsx(InternalTranslate, {
         namespace: "List",
         content: "selectedRows",
-        fallback: "%%selectedRows%% of %%totalRows%% items selected",
         params: {
           selectedRows: /*#__PURE__*/_jsx(Text, {
             bold: true,
-            children: /*#__PURE__*/_jsx(Translate, {
+            children: /*#__PURE__*/_jsx(InternalTranslate, {
               namespace: "List",
               content: "all",
-              fallback: "All",
               translators: translators
             })
           }),
@@ -585,10 +581,10 @@ class List extends Component {
       vertical,
       reorderableItemWidths
     } = this.state;
-    const hasActions = realColumn.some(_ref10 => {
+    const hasActions = realColumn.some(_ref0 => {
       let {
         type
-      } = _ref10;
+      } = _ref0;
       return type === 'actions';
     });
     const {
@@ -602,6 +598,7 @@ class List extends Component {
       ...(Wrapper === Tbody && !isDragged ? reorderableProps : undefined),
       key: getRowKey(row, this.props)
     }, /*#__PURE__*/_jsx("tr", {
+      role: "listitem",
       className: classNames({
         'is-selected': this.isRowSelected(row),
         [`${baseClassName}__row--expanded`]: this.isRowExpanded(row),
@@ -614,7 +611,7 @@ class List extends Component {
       }, className),
       ...rowProps,
       onClick: renderRowBody ? this.createRowClickHandler(row) : undefined,
-      children: realColumn.map((_ref11, index) => {
+      children: realColumn.map((_ref1, index) => {
         let {
           key,
           title,
@@ -623,7 +620,7 @@ class List extends Component {
           cellProps,
           truncate,
           type
-        } = _ref11;
+        } = _ref1;
         if (skipCells > 0) {
           skipCells -= 1;
           return null;
@@ -725,19 +722,20 @@ class List extends Component {
             [`${baseClassName}--expandable`]: renderRowBody,
             [`${baseClassName}__table--vertical`]: vertical
           }),
+          role: "list",
           children: element
         })
       });
     }
     return element;
   }
-  renderRowBody(_ref12) {
+  renderRowBody(_ref10) {
     let {
       row,
       index,
       realColumn,
       parent
-    } = _ref12;
+    } = _ref10;
     const {
       baseClassName,
       renderRowBody
@@ -748,16 +746,16 @@ class List extends Component {
     if (!renderRowBody) {
       return null;
     }
-    const reorderable = realColumn.find(_ref13 => {
+    const reorderable = realColumn.find(_ref11 => {
       let {
         key
-      } = _ref13;
+      } = _ref11;
       return key === 'reorderable';
     });
-    const expander = realColumn.find(_ref14 => {
+    const expander = realColumn.find(_ref12 => {
       let {
         key
-      } = _ref14;
+      } = _ref12;
       return key === 'expander';
     });
     const isRowExpanded = this.isRowExpanded(row);
@@ -772,6 +770,7 @@ class List extends Component {
       classNames: `${baseClassName}__row-body-`,
       nodeRef: trRef,
       children: state => /*#__PURE__*/_jsxs("tr", {
+        role: "listitem",
         className: `${baseClassName}__row-body`,
         ref: trRef,
         children: [reorderable ? /*#__PURE__*/_jsx("td", {
@@ -821,10 +820,9 @@ class List extends Component {
     }
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const context = {
-      selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/_jsx(Translate, {
+      selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/_jsx(InternalTranslate, {
         namespace: "List",
         content: "all",
-        fallback: "all",
         translators: locale
       }) : selection.length,
       selectedRowTitle
@@ -960,10 +958,9 @@ class List extends Component {
         className: `${baseClassName}__select-all-menu`,
         children: [isAllOnPageSelected && /*#__PURE__*/_jsxs(MenuItem, {
           disabled: true,
-          children: [/*#__PURE__*/_jsx(Translate, {
+          children: [/*#__PURE__*/_jsx(InternalTranslate, {
             namespace: "List",
             content: "allItemsOnPageSelected",
-            fallback: "All items on the page selected",
             translators: locale
           }), /*#__PURE__*/_jsx(Label, {
             intent: "info",
@@ -971,10 +968,9 @@ class List extends Component {
           })]
         }), isAllSelected ? /*#__PURE__*/_jsxs(MenuItem, {
           disabled: true,
-          children: [/*#__PURE__*/_jsx(Translate, {
+          children: [/*#__PURE__*/_jsx(InternalTranslate, {
             namespace: "List",
             content: "allItemsSelected",
-            fallback: "All items selected",
             translators: locale
           }), /*#__PURE__*/_jsx(Label, {
             intent: "info",
@@ -988,10 +984,9 @@ class List extends Component {
               onSelectAll('SELECT_ALL');
             }
           },
-          children: [/*#__PURE__*/_jsx(Translate, {
+          children: [/*#__PURE__*/_jsx(InternalTranslate, {
             namespace: "List",
             content: "selectAllItems",
-            fallback: "Select all items",
             translators: locale
           }), /*#__PURE__*/_jsx(Label, {
             intent: "inactive",
@@ -1006,10 +1001,9 @@ class List extends Component {
               onSelectAll('SELECT_ALL_ON_PAGE');
             }
           },
-          children: [/*#__PURE__*/_jsx(Translate, {
+          children: [/*#__PURE__*/_jsx(InternalTranslate, {
             namespace: "List",
             content: "selectAllItemsOnPage",
-            fallback: "Select all items on the page",
             translators: locale
           }), /*#__PURE__*/_jsx(Label, {
             intent: isAllSelected ? 'info' : 'inactive',
@@ -1020,10 +1014,9 @@ class List extends Component {
             this.handleDeselectAll();
             this.toggleSelectionMenu();
           },
-          children: /*#__PURE__*/_jsx(Translate, {
+          children: /*#__PURE__*/_jsx(InternalTranslate, {
             namespace: "List",
             content: "deselectAll",
-            fallback: "Deselect",
             translators: locale
           })
         })]
@@ -1234,11 +1227,11 @@ class List extends Component {
     if (!(data && data.length > 0) && (filtered || emptyViewMode === 'items')) {
       content = this.renderEmptyView();
     } else {
-      const renderList = _ref15 => {
+      const renderList = _ref13 => {
         let {
           children,
           props: reorderableProps
-        } = _ref15;
+        } = _ref13;
         return /*#__PURE__*/_jsx(FocusVisibleManager, {
           children: /*#__PURE__*/_jsxs("table", {
             className: classNames(`${baseClassName}__table`, {
@@ -1246,13 +1239,14 @@ class List extends Component {
               [`${baseClassName}__table--vertical`]: vertical,
               [`${baseClassName}__table--reorderable`]: reorderable
             }),
+            role: "list",
             ...reorderableProps,
             children: [hasTitle && /*#__PURE__*/_jsx("thead", {
               children: /*#__PURE__*/_jsx("tr", {
                 className: classNames(`${baseClassName}__table-thead`, {
                   [`${baseClassName}__row--expanded`]: this.isAnyRowsExpanded(data, this.state.expandedRows)
                 }),
-                children: realColumn.map(_ref16 => {
+                children: realColumn.map(_ref14 => {
                   let {
                     key,
                     title,
@@ -1264,7 +1258,7 @@ class List extends Component {
                     type,
                     cellProps,
                     ...headerProps
-                  } = _ref16;
+                  } = _ref14;
                   if (sortable) {
                     title = /*#__PURE__*/_jsx("div", {
                       className: "th__action",
@@ -1295,7 +1289,7 @@ class List extends Component {
           })
         });
       };
-      const renderItem = _ref17 => {
+      const renderItem = _ref15 => {
         let {
           value: {
             row
@@ -1303,7 +1297,7 @@ class List extends Component {
           index,
           props: reorderableProps,
           isDragged
-        } = _ref17;
+        } = _ref15;
         return this.renderRow({
           row,
           index,
@@ -1318,22 +1312,22 @@ class List extends Component {
           ReorderableList
         } = this.state;
         content = /*#__PURE__*/_jsx(ReorderableList, {
-          beforeDrag: _ref18 => {
+          beforeDrag: _ref16 => {
             let {
               elements,
               index
-            } = _ref18;
+            } = _ref16;
             const cells = Array.from(elements[index].firstElementChild.children);
             const reorderableItemWidths = cells.map(cell => window.getComputedStyle(cell).width);
             this.setState({
               reorderableItemWidths
             });
           },
-          onChange: _ref19 => {
+          onChange: _ref17 => {
             let {
               oldIndex,
               newIndex
-            } = _ref19;
+            } = _ref17;
             safeInvoke(onReorderEnd, {
               oldIndex,
               newIndex
@@ -1400,10 +1394,10 @@ class List extends Component {
       return /*#__PURE__*/_jsx(Measure, {
         bounds: true,
         onResize: this.handleResize,
-        children: _ref20 => {
+        children: _ref18 => {
           let {
             measureRef
-          } = _ref20;
+          } = _ref18;
           return createRoot(measureRef);
         }
       });