@plesk/ui-library 3.44.0 → 3.45.0

package/esm/components/Action/Action.js

@@ -6,7 +6,6 @@ import { CLS_PREFIX } from '../../constants';
 import { wrapFunction } from '../utils';
 import Icon, { ICON_SIZE_16 } from '../Icon';
 import Spinner from '../Spinner';
-import { prepareIconName } from '../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Action` component is used mostly for navigation, to go between pages, and not for immediate action or submitting data.
@@ -69,11 +68,6 @@ const Action = _ref => {
     });
   }
   const isIconOnly = !Children.toArray(children).length && !rightAddon && !bottomAddon;
-
-  // Add aria-label when only icon is defined
-  if (isIconOnly && icon) {
-    tagProps['aria-label'] = prepareIconName(icon, isIconOnly);
-  }
   return /*#__PURE__*/_jsxs(RootTag, {
     className: classNames(baseClassName, {
       [`${baseClassName}--size-${size}`]: icon || progress,

package/esm/components/Alert/Alert.js

@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Alert` component is used for highlighting important content.
@@ -18,13 +19,16 @@ const Alert = _ref => {
     onClose,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('Alert');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--${intent}`]: intent
     }, className),
     role: intent === 'warning' || intent === 'danger' ? 'alert' : 'status',
     ...props,
-    children: [onClose && /*#__PURE__*/_jsx("span", {
+    children: [onClose && /*#__PURE__*/_jsx("button", {
+      "aria-label": translate('close'),
+      type: "button",
       className: "close",
       onClick: onClose
     }), children]

package/esm/components/Button/Button.js

@@ -81,6 +81,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     caret,
     fill = false,
     tooltip,
+    tooltipAsLabel,
     children,
     arrow,
     disabled = false,
@@ -173,6 +174,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   if (tooltipElement) {
     button = /*#__PURE__*/_jsx(Tooltip, {
       title: tooltipElement,
+      asLabel: tooltipAsLabel,
       children: button
     });
   }

package/esm/components/Carousel/Carousel.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
+import { getInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const calcWidths = node => {
   const slideWidths = [].map.call(node.childNodes, el => el.getBoundingClientRect().width);
@@ -16,6 +17,7 @@ const calcWidths = node => {
     totalWidth
   };
 };
+const translate = getInternalTranslate('Carousel');
 /**
  * Carousel component is used for optimizing page space by displaying only some parts
  * of entire content in a cyclic view.
@@ -104,9 +106,12 @@ class Carousel extends Component {
         className: `${baseClassName}__dots`,
         children: Array.from({
           length: childrenCount
-        }).map((_, idx) => /*#__PURE__*/_jsx("div", {
-          role: "button",
+        }).map((_, idx) => /*#__PURE__*/_jsx("button", {
+          type: "button",
           className: classNames(`${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
@@ -132,7 +137,7 @@ class Carousel extends Component {
         className: `${baseClassName}__controls`,
         children: [/*#__PURE__*/_jsx("button", {
           type: "button",
-          "aria-label": "previous slide",
+          "aria-label": translate('previousSlide'),
           className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
           onClick: this.handlePrevClick,
           children: /*#__PURE__*/_jsx(Icon, {
@@ -142,7 +147,7 @@ class Carousel extends Component {
           })
         }), /*#__PURE__*/_jsx("button", {
           type: "button",
-          "aria-label": "next slide",
+          "aria-label": translate('nextSlide'),
           className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
           onClick: this.handleNextClick,
           children: /*#__PURE__*/_jsx(Icon, {

package/esm/components/ComboBox/ComboBox.js

@@ -8,6 +8,7 @@ import Input from '../Input';
 import Icon from '../Icon';
 import ComboBoxDropdown, { findNextSafeIndex } from '../ComboBoxDropdown';
 import ComboBoxOption from './ComboBoxOption';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const collect = function (children) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -54,6 +55,7 @@ const ComboBox = _ref => {
     children,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('ComboBox');
   const [opened, setOpened] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const inputRef = useRef(null);
@@ -135,6 +137,7 @@ const ComboBox = _ref => {
     }
   };
   const button = /*#__PURE__*/_jsx("button", {
+    "aria-label": translate(opened ? 'close' : 'open'),
     className: `${baseClassName}__dropdown-button`,
     onClick: handleToggle,
     onMouseDown: e => e.preventDefault(),

package/esm/components/ComboBoxDropdown/ComboBoxDropdown.js

@@ -24,6 +24,7 @@ export const findNextSafeIndex = (currIndex, diff, options) => {
   }
   return -1;
 };
+export const getOptionId = (listboxId, index) => `${listboxId}-option-${index}`;
 const ComboBoxDropdown = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}combobox-dropdown`,
@@ -140,6 +141,7 @@ const ComboBoxDropdown = _ref => {
               };
             }
             const menuItemProps = {
+              id: listboxId ? getOptionId(listboxId, optionIndex) : undefined,
               ...option.props,
               active: value === option.value,
               className: classNames(`${baseClassName}__option`, {
@@ -149,7 +151,8 @@ const ComboBoxDropdown = _ref => {
               onClick,
               onMouseOver,
               onMouseDown,
-              'data-index': optionIndex
+              'data-index': optionIndex,
+              'aria-selected': value === option.value
             };
             acc.push(/*#__PURE__*/_jsx(MenuItem, {
               ...menuItemProps,

package/esm/components/ComboBoxDropdown/index.js

@@ -1,3 +1,3 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-export { default, findNextSafeIndex } from './ComboBoxDropdown';
+export { default, findNextSafeIndex, getOptionId } from './ComboBoxDropdown';

package/esm/components/Dialog/Dialog.js

@@ -11,6 +11,7 @@ import Heading from '../Heading';
 import Text from '../Text';
 import { isLikeText, InternalTranslate } from '../Translate';
 import { safeInvoke } from '../utils';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/isValidElement(value);
 
@@ -40,6 +41,7 @@ const Dialog = _ref => {
     closingConfirmation,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('Dialog');
   const [isVisible, setIsVisible] = useState(isOpen);
   const {
     onCloseWithConfirmation,
@@ -187,6 +189,7 @@ const Dialog = _ref => {
           }), (actions || closable) && /*#__PURE__*/_jsxs("div", {
             className: `${baseClassName}__header-actions`,
             children: [actions, closable && /*#__PURE__*/_jsx(Button, {
+              "aria-label": translate('closeButton'),
               className: `${baseClassName}__header-close`,
               disabled: !canClose,
               ghost: true,

package/esm/components/Drawer/Header.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
 import Icon from '../Icon';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Header = _ref => {
   let {
@@ -16,8 +17,10 @@ const Header = _ref => {
     tabs,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('Drawer');
   const renderBackButton = () => /*#__PURE__*/_jsx(Button, {
     ghost: true,
+    "aria-label": translate('backButton'),
     className: classNames(`${baseClassName}__button`, `${baseClassName}__button--back`),
     size: "lg",
     icon: /*#__PURE__*/_jsx(Icon, {
@@ -29,6 +32,7 @@ const Header = _ref => {
   });
   const renderHideButton = () => /*#__PURE__*/_jsx(Button, {
     ghost: true,
+    "aria-label": translate('hideButton'),
     className: classNames(`${baseClassName}__button`, `${baseClassName}__button--hide`),
     size: "lg",
     icon: /*#__PURE__*/_jsx(Icon, {
@@ -43,6 +47,7 @@ const Header = _ref => {
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return /*#__PURE__*/_jsx(Button, {
       ghost: true,
+      "aria-label": translate('closeButton'),
       className: classNames(`${baseClassName}__button`, `${baseClassName}__button--close`),
       size: "lg",
       icon: /*#__PURE__*/_jsx(Icon, {

package/esm/components/Dropdown/Dropdown.js

@@ -133,6 +133,7 @@ const Dropdown = _ref3 => {
     menuPlacement = 'bottom-start',
     overlay = false,
     locale,
+    onToggle,
     ...props
   } = _ref3;
   const [opened, setOpened] = useState(false);
@@ -144,10 +145,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/esm/components/Form/Form.js

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

package/esm/components/FormField/FormField.js

@@ -19,7 +19,9 @@ import SectionContext from '../Section/SectionContext';
 import VerticalContext from '../VerticalContext';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DisabledContext from '../Form/DisabledContext';
+import { getInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const translate = getInternalTranslate('FormField');
 export const BASE_FORM_FIELD_CLASS_NAME = `${CLS_PREFIX}form-field`;
 const defaultValue = undefined;
 
@@ -163,8 +165,8 @@ class FormField extends Component {
     _defineProperty(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]);
@@ -174,11 +176,12 @@ class FormField extends Component {
       return /*#__PURE__*/_jsx(Button, {
         className: `${this.props.baseClassName}__remove`,
         icon: isClearable ? 'clean' : 'cross-mark',
-        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+        tooltip: locale ? /*#__PURE__*/_jsx(InternalTranslate, {
           namespace: "FormField",
           content: isClearable ? 'clear' : 'remove',
           translators: locale
-        }),
+        }) : translate(isClearable ? 'clear' : 'remove'),
+        tooltipAsLabel: true,
         onClick: () => this.handleRemove(index),
         disabled: disabled,
         ghost: true
@@ -266,7 +269,7 @@ class FormField extends Component {
           ref: _this.setTargetRef(index),
           children: innerField
         }), hasErrors && Object.keys(fieldErrors).map(key => /*#__PURE__*/_jsxs("span", {
-          id: fieldId ? `${id}-${key}` : undefined,
+          id: fieldId ? `${fieldId}-${key}` : undefined,
           className: `${baseClassName}__error`,
           children: [/*#__PURE__*/_jsx(Icon, {
             className: `${baseClassName}__error-icon`,
@@ -312,6 +315,7 @@ class FormField extends Component {
       }
       return /*#__PURE__*/_jsx(Popover, {
         target: /*#__PURE__*/_jsx(Action, {
+          "aria-label": translate('showDescription'),
           outerProps: {
             className: `${this.props.baseClassName}__full-description`
           },

package/esm/components/FormFieldPassword/FormFieldPassword.js

@@ -12,7 +12,10 @@ import { InternalTranslate } from '../Translate';
 import PasswordMeter from './PasswordMeter';
 import generatePassword from './generatePassword';
 import { copyToClipboard } from '../../utils';
+import { getInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const translate = getInternalTranslate('FormFieldPassword');
+
 /**
  * `FormFieldPassword` component provides secure way to enter a password.
  * @since 0.0.58
@@ -63,9 +66,8 @@ class FormFieldPassword extends Component {
       className: `${baseClassName}__button--copy`,
       icon: 'copy',
       onClick: () => this.handleCopyToClipboard(value),
-      tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
-        content: "FormFieldPassword.copyButtonHint"
-      }),
+      tooltip: translate('copyButtonHint'),
+      tooltipAsLabel: true,
       disabled: isDisabled()
     };
     let button;
@@ -97,9 +99,8 @@ class FormFieldPassword extends Component {
           passwordGenerated: true
         });
       },
-      tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
-        content: "FormFieldPassword.generateButtonHint"
-      }),
+      tooltip: translate('generateButtonHint'),
+      tooltipAsLabel: true,
       disabled: isDisabled(),
       children: /*#__PURE__*/_jsx(InternalTranslate, {
         content: "FormFieldPassword.generateButton"
@@ -173,11 +174,8 @@ class FormFieldPassword extends Component {
             className: `${baseClassName}__button--show`,
             onClick: this.handleToggleClick,
             icon: visible ? 'visible' : 'invisible',
-            tooltip: visible ? /*#__PURE__*/_jsx(InternalTranslate, {
-              content: "FormFieldPassword.hidePassword"
-            }) : /*#__PURE__*/_jsx(InternalTranslate, {
-              content: "FormFieldPassword.showPassword"
-            }),
+            tooltip: translate(visible ? 'hidePassword' : 'showPassword'),
+            tooltipAsLabel: true,
             ghost: true,
             disabled: isDisabled()
           }),

package/esm/components/InPlaceEdit/Editor.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import classNames from 'classnames';
 import Button from '../Button';
 import Input from '../Input';
-import { InternalTranslate } from '../Translate';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Editor = _ref => {
   let {
@@ -13,6 +13,7 @@ const Editor = _ref => {
     onCancel,
     baseClassName
   } = _ref;
+  const translate = useInternalTranslate('InPlaceEdit');
   const [value, setValue] = useState(initialValue);
   const handleChange = event => {
     setValue(event.target.value);
@@ -40,17 +41,15 @@ const Editor = _ref => {
         className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
         icon: "check-mark",
         onClick: handleSave,
-        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
-          content: "InPlaceEdit.okButtonHint"
-        })
+        tooltip: translate('okButtonHint'),
+        tooltipAsLabel: true
       }), /*#__PURE__*/_jsx(Button, {
         ghost: true,
         className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
         icon: "cross-mark",
         onClick: onCancel,
-        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
-          content: "InPlaceEdit.cancelButtonHint"
-        })
+        tooltip: translate('cancelButtonHint'),
+        tooltipAsLabel: true
       })]
     })]
   });

package/esm/components/InPlaceEdit/InPlaceEdit.js

@@ -4,8 +4,8 @@ import { useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
-import { InternalTranslate } from '../Translate';
 import Editor from './Editor';
+import { useInternalTranslate } from '../LocaleProvider';
 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
@@ -21,6 +21,7 @@ const InPlaceEdit = _ref => {
     value,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('InPlaceEdit');
   const [isEditing, setIsEditing] = useState(false);
   const toggleEditing = () => setIsEditing(current => !current);
   const handleSave = newValue => {
@@ -38,9 +39,8 @@ const InPlaceEdit = _ref => {
         name: 'pencil',
         className: `${baseClassName}__control-button-icon`
       },
-      tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
-        content: "InPlaceEdit.editButtonHint"
-      })
+      tooltip: translate('editButtonHint'),
+      tooltipAsLabel: true
     }), isEditing && /*#__PURE__*/_jsx(Editor, {
       baseClassName: baseClassName,
       value: `${value}`,

package/esm/components/InputFile/InputFile.js

@@ -62,7 +62,7 @@ const InputFile = _ref => {
     ...props,
     children: [/*#__PURE__*/_jsxs(Button, {
       className: `${baseClassName}__button`,
-      "data-testId": testId && `${testId}--browse-button`,
+      "data-testid": testId && `${testId}--browse-button`,
       disabled: disabled,
       component: "label",
       state: hasFocus ? 'focused' : undefined,
@@ -73,7 +73,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
@@ -87,14 +87,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__*/_jsx(Button, {
         icon: "cross-mark",
         ghost: true,
         onClick: handleReset,
-        "data-testId": testId && `${testId}--reset-button`,
+        "data-testid": testId && `${testId}--reset-button`,
         disabled: disabled
       })]
     })]

package/esm/components/InputNumber/InputNumber.js

@@ -6,6 +6,7 @@ import { safeInvoke } from '../utils';
 import Input from '../Input';
 import Button from '../Button';
 import { CLS_PREFIX } from '../../constants';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const fitToMinMax = function (value) {
   let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
@@ -57,6 +58,7 @@ const InputNumber = _ref => {
     incrementIcon = 'plus',
     ...props
   } = _ref;
+  const translate = useInternalTranslate('InputNumber');
   const inputRef = useRef(null);
   const isControlled = propValue !== undefined;
   const safeDefaultValue = typeof defaultValue === 'number' ? defaultValue : '';
@@ -141,6 +143,7 @@ const InputNumber = _ref => {
     className: classNames(baseClassName, className),
     innerRef: inputRef,
     prefix: /*#__PURE__*/_jsx(Button, {
+      "aria-label": translate('decrement'),
       icon: decrementIcon,
       ghost: true,
       disabled: minDisabled,
@@ -149,6 +152,7 @@ const InputNumber = _ref => {
       className: `${baseClassName}__dec`
     }),
     suffix: /*#__PURE__*/_jsx(Button, {
+      "aria-label": translate('increment'),
       icon: incrementIcon,
       ghost: true,
       disabled: maxDisabled,

package/esm/components/Layout/Layout.js

@@ -5,8 +5,10 @@ import { Component, createRef } from 'react';
 import Measure from 'react-measure';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
+import { getInternalTranslate } from '../LocaleProvider';
 import { CLS_PREFIX } from '../../constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const translate = getInternalTranslate('Layout');
 const subscribeMatchMedia = (query, handler) => {
   const mq = window.matchMedia(query);
   handler(mq);
@@ -97,6 +99,10 @@ export default class Layout extends Component {
       } = this.state;
       return isResponsive ? isSidebarClosedResponsive : isSidebarClosedDesktop;
     });
+    _defineProperty(this, "getSidebarTogglerLabel", () => {
+      const isSidebarClosed = this.getSidebarClosed();
+      return translate(isSidebarClosed ? 'openSidebar' : 'closeSidebar');
+    });
   }
   static getDerivedStateFromProps(props, state) {
     const {
@@ -181,6 +187,7 @@ export default class Layout extends Component {
                   type: "button",
                   onClick: this.handleToggle,
                   ref: this.responsiveSidebarTogglerRef,
+                  "aria-label": this.getSidebarTogglerLabel(),
                   children: /*#__PURE__*/_jsx("span", {
                     className: `${baseClassName}__responsive-sidebar-toggler-inner`,
                     children: /*#__PURE__*/_jsx("span", {
@@ -276,6 +283,7 @@ export default class Layout extends Component {
             className: `${baseClassName}__sidebar-toggler`,
             onClick: this.handleToggle,
             type: "button",
+            "aria-label": this.getSidebarTogglerLabel(),
             children: /*#__PURE__*/_jsx("span", {
               className: `${baseClassName}__sidebar-toggler-inner`
             })

package/esm/components/List/List.js

@@ -22,7 +22,10 @@ import Columns, { Column } from '../Columns';
 import { FocusVisibleManager, useFocusVisible } from 'use-focus-visible';
 import Menu, { MenuItem } from '../Menu';
 import Label from '../Label';
+import { getInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const translate = getInternalTranslate('List');
+
 // eslint-disable-next-line func-style
 function getRowKey(row, props) {
   const {
@@ -598,7 +601,6 @@ 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),
@@ -722,7 +724,6 @@ class List extends Component {
             [`${baseClassName}--expandable`]: renderRowBody,
             [`${baseClassName}__table--vertical`]: vertical
           }),
-          role: "list",
           children: element
         })
       });
@@ -770,7 +771,6 @@ 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", {
@@ -1101,7 +1101,10 @@ class List extends 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__*/_jsx(Checkbox, {
         ...headerCheckboxProps
@@ -1136,7 +1139,8 @@ class List extends 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') {
@@ -1158,6 +1162,7 @@ class List extends Component {
         },
         title: /*#__PURE__*/_jsx(Button, {
           ghost: true,
+          "aria-label": translate('toggleAllRows'),
           className: `${baseClassName}__row-expander`,
           icon: /*#__PURE__*/_jsx(Icon, {
             className: `${baseClassName}__row-expander-icon`,
@@ -1177,6 +1182,7 @@ class List extends Component {
         }),
         render: row => this.isRowExpandable(row) && /*#__PURE__*/_jsx(Button, {
           ghost: true,
+          "aria-label": translate('toggleRow'),
           className: `${baseClassName}__row-expander`,
           icon: /*#__PURE__*/_jsx(Icon, {
             className: `${baseClassName}__row-expander-icon`,
@@ -1239,7 +1245,6 @@ class List extends Component {
               [`${baseClassName}__table--vertical`]: vertical,
               [`${baseClassName}__table--reorderable`]: reorderable
             }),
-            role: "list",
             ...reorderableProps,
             children: [hasTitle && /*#__PURE__*/_jsx("thead", {
               children: /*#__PURE__*/_jsx("tr", {

package/esm/components/List/ListActions.js

@@ -8,6 +8,7 @@ import Dropdown from '../Dropdown';
 import Menu from '../Menu';
 import ListAction from './ListAction';
 import VerticalContext from '../VerticalContext';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `ListActions` component is used for performing operations on individual objects in [List](#!/List).
@@ -19,8 +20,10 @@ const ListActions = _ref => {
     className,
     children,
     locale,
+    onMenuToggle,
     ...props
   } = _ref;
+  const translate = useInternalTranslate('ListActions');
   const [overlay, setOverlay] = useState(false);
   const vertical = useContext(VerticalContext);
   useEffect(() => {
@@ -75,7 +78,9 @@ const ListActions = _ref => {
       menuPlacement: "bottom-end",
       overlay: overlay,
       locale: locale,
+      onToggle: onMenuToggle,
       children: /*#__PURE__*/_jsx(Button, {
+        "aria-label": translate('menuButton'),
         ghost: true,
         icon: "kebab"
       })