@plesk/ui-library 3.43.2 → 3.44.0

package/esm/components/Action/Action.js

@@ -6,6 +6,7 @@ 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.
@@ -59,6 +60,7 @@ const Action = _ref => {
   // accessibility
   if (onClick) {
     tagProps.tabIndex = tagProps.tabIndex || 0;
+    tagProps.role = 'button';
     tagProps.onKeyDown = wrapFunction(tagProps.onKeyDown, e => {
       if (e.key === 'Enter') {
         e.preventDefault();
@@ -66,13 +68,19 @@ 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,
       [`${baseClassName}--progress`]: progress,
       [`${baseClassName}--primary`]: primary,
       [`${baseClassName}--nowrap`]: nowrap,
-      [`${baseClassName}--icon`]: !Children.toArray(children).length && !rightAddon && !bottomAddon
+      [`${baseClassName}--icon`]: isIconOnly
     }, className),
     ...restOuterProps,
     children: [/*#__PURE__*/_jsxs(Tag, {

package/esm/components/Alert/Alert.js

@@ -22,6 +22,7 @@ const Alert = _ref => {
     className: classNames(baseClassName, {
       [`${baseClassName}--${intent}`]: intent
     }, className),
+    role: intent === 'warning' || intent === 'danger' ? 'alert' : 'status',
     ...props,
     children: [onClose && /*#__PURE__*/_jsx("span", {
       className: "close",

package/esm/components/AutoClosable/AutoClosable.js

@@ -1,18 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-import { findDOMNode } from 'react-dom';
-import { Component, Children, createContext } from 'react';
+import { useContext, useEffect, useRef, createContext } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-const AutoClosableContext = /*#__PURE__*/createContext(null);
-/**
- * This is helper component for handling outside clicks.
- * @since 0.0.42
- */
-class AutoClosable extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "context", void 0);
+class AutoClosableContextApi {
+  constructor(ignoreNodesRef) {
+    this.ignoreNodesRef = ignoreNodesRef;
     _defineProperty(this, "children", []);
     _defineProperty(this, "addChild", child => {
       this.children.push(child);
@@ -21,61 +14,54 @@ class AutoClosable extends Component {
       this.children = this.children.filter(item => item !== child);
     });
     _defineProperty(this, "getIgnoreNodes", () => {
-      const {
-        ignoreNodes
-      } = this.props;
-      const nodes = typeof ignoreNodes === 'function' ? ignoreNodes() : [];
-      nodes.push(this);
-      this.children.forEach(child => child.getIgnoreNodes().forEach(node => nodes.push(node)));
-      return nodes;
+      const nodes = [...this.ignoreNodesRef.current(), ...this.children.map(child => child.getIgnoreNodes()).flat()];
+      return nodes.filter(node => node instanceof Node);
     });
-    _defineProperty(this, "onOutsideClick", event => {
-      const el = event.target;
-      const isClickOnIgnoredNode = this.getIgnoreNodes().map(node => {
-        if (node instanceof AutoClosable && node.props.nodeRef && node.props.nodeRef.current) {
-          return node.props.nodeRef.current;
-        }
-        if (node instanceof Component) {
-          return findDOMNode(node);
-        }
-        if (node instanceof Node) {
-          return node;
-        }
-        if (node && node.current instanceof Node) {
-          return node.current;
-        }
-        return null;
-      }).some(node => Boolean(node && el instanceof Node && node.contains(el)));
+  }
+}
+const AutoClosableContext = /*#__PURE__*/createContext(null);
+/**
+ * This is helper component for handling outside clicks.
+ * @since 0.0.42
+ */
+const AutoClosable = _ref => {
+  let {
+    onClose,
+    ignoreNodes,
+    nodeRef,
+    children
+  } = _ref;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const getIgnoreNodes = () => [nodeRef?.current ?? null, ...(ignoreNodes?.() ?? [])];
+  const ignoreNodesRef = useRef(getIgnoreNodes);
+  ignoreNodesRef.current = getIgnoreNodes;
+  const parentContext = useContext(AutoClosableContext);
+  const autoClosableApi = useRef(new AutoClosableContextApi(ignoreNodesRef)).current;
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const element = event.target;
+      const ignoreNodes = autoClosableApi.getIgnoreNodes();
+      const isClickOnIgnoredNode = element instanceof Node && ignoreNodes.some(node => node.contains(element));
       if (isClickOnIgnoredNode) {
         return;
       }
-      if (this.props.onClose) {
-        this.props.onClose();
-      }
-    });
-  }
-  componentDidMount() {
-    document.body.addEventListener('click', this.onOutsideClick, {
+      onCloseRef.current?.();
+    };
+    parentContext?.addChild(autoClosableApi);
+    document.body.addEventListener('click', handleClickOutside, {
       capture: true
     });
-    if (this.context) {
-      this.context.addChild(this);
-    }
-  }
-  componentWillUnmount() {
-    document.body.removeEventListener('click', this.onOutsideClick, {
-      capture: true
-    });
-    if (this.context) {
-      this.context.removeChild(this);
-    }
-  }
-  render() {
-    return /*#__PURE__*/_jsx(AutoClosableContext.Provider, {
-      value: this,
-      children: Children.only(this.props.children)
-    });
-  }
-}
-AutoClosable.contextType = AutoClosableContext;
+    return () => {
+      parentContext?.removeChild(autoClosableApi);
+      document.body.removeEventListener('click', handleClickOutside, {
+        capture: true
+      });
+    };
+  }, [parentContext, autoClosableApi]);
+  return /*#__PURE__*/_jsx(AutoClosableContext.Provider, {
+    value: autoClosableApi,
+    children: children
+  });
+};
 export default AutoClosable;

package/esm/components/AuxiliaryActions/AuxiliaryActions.js

@@ -22,10 +22,19 @@ const AuxiliaryActions = _ref => {
   return /*#__PURE__*/_jsx("span", {
     className: classNames(baseClassName, className),
     ...props,
-    children: Children.toArray(children).reduce((accu, elem, index) => accu.length === 0 ? [elem] : [...accu, /*#__PURE__*/isValidElement(separator) ? /*#__PURE__*/cloneElement(separator, {
-      key: index
-    }) // eslint-disable-line react/no-array-index-key
-    : separator, elem], [])
+    children: Children.toArray(children).reduce((accu, elem, index) => {
+      let elementWithRole = elem;
+      if (/*#__PURE__*/isValidElement(elem)) {
+        // @ts-expect-error
+        elementWithRole = /*#__PURE__*/cloneElement(elem, {
+          role: 'button'
+        });
+      }
+      return accu.length === 0 ? [elementWithRole] : [...accu, /*#__PURE__*/isValidElement(separator) ? /*#__PURE__*/cloneElement(separator, {
+        key: index
+      }) // eslint-disable-line react/no-array-index-key
+      : separator, elementWithRole];
+    }, [])
   });
 };
 export default AuxiliaryActions;

package/esm/components/Button/Button.js

@@ -132,6 +132,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
   let button = /*#__PURE__*/_jsxs(Tag, {
     ref: ref,
+    role: Tag === 'button' ? undefined : 'button',
     className: classNames(baseClassName, {
       [`${baseClassName}--${size}`]: size,
       [`${baseClassName}--${intent}`]: intent && !ghost,

package/esm/components/Card/Card.js

@@ -9,7 +9,7 @@ import { CSSTransition } from 'react-transition-group';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import ContentLoader from '../ContentLoader';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import CardButton from './CardButton';
 import PreviewPanel from './PreviewPanel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -68,9 +68,8 @@ class Card extends Component {
         onChange: isSelected => onSelectionChange({
           isSelected
         }),
-        children: this.isExtended() ? /*#__PURE__*/_jsx(Translate, {
-          content: "Card.select",
-          fallback: "Select"
+        children: this.isExtended() ? /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "Card.select"
         }) : null
       })
     });
@@ -92,9 +91,8 @@ class Card extends Component {
       }), titleLinkProps && /*#__PURE__*/_jsx(CardButton, {
         component: "a",
         icon: "chain",
-        tooltip: /*#__PURE__*/_jsx(Translate, {
-          content: "Card.titleLinkTooltip",
-          fallback: "Go to page"
+        tooltip: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "Card.titleLinkTooltip"
         }),
         ...titleLinkProps
       }), this.isExtended() && this.renderTitleLabels()]
@@ -214,12 +212,10 @@ class Card extends Component {
           flipVertical: this.isExtended()
         },
         onClick: this.handleToggleView,
-        tooltip: this.isExtended() ? /*#__PURE__*/_jsx(Translate, {
-          content: "Card.collapseCardTooltip",
-          fallback: "Collapse the card"
-        }) : /*#__PURE__*/_jsx(Translate, {
-          content: "Card.expandCardTooltip",
-          fallback: "Expand the card"
+        tooltip: this.isExtended() ? /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "Card.collapseCardTooltip"
+        }) : /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "Card.expandCardTooltip"
         })
       }, "toggleView"));
     }

package/esm/components/CardList/CardList.js

@@ -12,7 +12,7 @@ import Grid from '../Grid';
 import GridCol from '../GridCol';
 import Button from '../Button';
 import Spinner from '../Spinner';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import CardListToolbar from './CardListToolbar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const VIEW_TILE = 'tile';
@@ -185,9 +185,8 @@ class CardList extends Component {
         className: `${baseClassName}__pagination`,
         children: /*#__PURE__*/_jsx(Button, {
           onClick: () => this.loadMore(),
-          children: /*#__PURE__*/_jsx(Translate, {
-            content: 'CardList.loadMore',
-            fallback: 'Load more'
+          children: /*#__PURE__*/_jsx(InternalTranslate, {
+            content: 'CardList.loadMore'
           })
         })
       });
@@ -306,9 +305,8 @@ class CardList extends Component {
           }), this.state.items.length > 0 && /*#__PURE__*/_jsx("div", {
             className: `${baseClassName}__list ${baseClassName}__list--${this.state.view}`,
             children: content
-          }), this.state.items.length === 0 && !loading && /*#__PURE__*/_jsx(Translate, {
-            content: "CardList.notFound",
-            fallback: "No items found."
+          }), this.state.items.length === 0 && !loading && /*#__PURE__*/_jsx(InternalTranslate, {
+            content: "CardList.notFound"
           }), this.renderPagination(), this.renderLoader()]
         });
       }

package/esm/components/CardList/CardListToolbar.js

@@ -3,7 +3,7 @@
 import React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { CLS_PREFIX } from '../../constants';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Button from '../Button';
 import Toolbar, { ToolbarGroup, ToolbarExpander } from '../Toolbar';
 import Dropdown from '../Dropdown';
@@ -66,9 +66,8 @@ const renderSelection = (_ref, baseClassName) => {
     });
   }
   return /*#__PURE__*/_jsx(ToolbarGroup, {
-    title: /*#__PURE__*/_jsx(Translate, {
-      content: "CardList.toolbarSelect",
-      fallback: "Select"
+    title: /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "CardList.toolbarSelect"
     }),
     children: button
   }, "selection");
@@ -76,30 +75,26 @@ const renderSelection = (_ref, baseClassName) => {
 const renderView = (onViewChange, currentView) => {
   const viewButtons = [{
     value: VIEW_EXTENDED,
-    title: /*#__PURE__*/_jsx(Translate, {
-      content: "CardList.viewCards",
-      fallback: "Cards"
+    title: /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "CardList.viewCards"
     }),
     icon: 'site-page'
   }, {
     value: VIEW_TILE,
-    title: /*#__PURE__*/_jsx(Translate, {
-      content: "CardList.viewTiles",
-      fallback: "Tiles"
+    title: /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "CardList.viewTiles"
     }),
     icon: 'four-squares'
   }, {
     value: VIEW_ROW,
-    title: /*#__PURE__*/_jsx(Translate, {
-      content: "CardList.viewList",
-      fallback: "List"
+    title: /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "CardList.viewList"
     }),
     icon: 'list'
   }];
   return /*#__PURE__*/_jsx(ToolbarGroup, {
-    title: /*#__PURE__*/_jsx(Translate, {
-      content: "CardList.toolbarView",
-      fallback: "View"
+    title: /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "CardList.toolbarView"
     }),
     children: /*#__PURE__*/_jsx(SegmentedControl, {
       buttons: viewButtons,

package/esm/components/ClosingConfirmation/useClosingConfirmation.js

@@ -4,9 +4,8 @@ import { useState } from 'react';
 import Button from '../Button';
 import Dialog from '../Dialog';
 import Paragraph from '../Paragraph';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import { safeInvoke } from '../utils';
-import locale from './locale/en-US';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useClosingConfirmation = _ref => {
   let {
@@ -42,22 +41,19 @@ const useClosingConfirmation = _ref => {
       buttons: [/*#__PURE__*/_jsx(Button, {
         intent: "primary",
         onClick: handleCancel,
-        children: /*#__PURE__*/_jsx(Translate, {
-          content: "ClosingConfirmation.cancel",
-          fallback: locale.cancel
+        children: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "ClosingConfirmation.cancel"
         })
       }, "cancel"), /*#__PURE__*/_jsx(Button, {
         onClick: handleConfirm,
-        children: /*#__PURE__*/_jsx(Translate, {
-          content: "ClosingConfirmation.confirm",
-          fallback: locale.confirm
+        children: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "ClosingConfirmation.confirm"
         })
       }, "confirm")],
       cancelButton: false,
       children: /*#__PURE__*/_jsx(Paragraph, {
-        children: /*#__PURE__*/_jsx(Translate, {
-          content: "ClosingConfirmation.content",
-          fallback: locale.content
+        children: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "ClosingConfirmation.content"
         })
       })
     });

package/esm/components/ComboBoxDropdown/ComboBoxDropdown.js

@@ -41,6 +41,7 @@ const ComboBoxDropdown = _ref => {
     onSelect,
     noOptions,
     emitter,
+    listboxId,
     ...props
   } = _ref;
   const rootRef = useRef(null);
@@ -111,6 +112,8 @@ const ComboBoxDropdown = _ref => {
         },
         ref: menuRef,
         className: `${baseClassName}__menu`,
+        role: "listbox",
+        id: listboxId,
         children: [groups.reduce((acc, group) => {
           if (group.label) {
             acc.push(/*#__PURE__*/_createElement(MenuHeader, {

package/esm/components/Cuttable/Cuttable.js

@@ -3,7 +3,7 @@
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Link from '../Link';
 import { useContentOverflow } from './useContentOverflow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +16,7 @@ const Cuttable = _ref => {
     children,
     collapsed: externalCollapsed = true,
     maxHeight = '7rem',
-    locale = {
-      showMore: 'Show more',
-      showLess: 'Show less'
-    },
+    locale,
     className,
     baseClassName = `${CLS_PREFIX}cuttable`,
     ...props
@@ -63,9 +60,10 @@ const Cuttable = _ref => {
       className: `${baseClassName}__action`,
       children: /*#__PURE__*/_jsx(Link, {
         onClick: toggle,
-        children: /*#__PURE__*/_jsx(Translate, {
-          content: `Cuttable.${actionLocaleKey}`,
-          fallback: locale[actionLocaleKey]
+        children: /*#__PURE__*/_jsx(InternalTranslate, {
+          namespace: "Cuttable",
+          content: actionLocaleKey,
+          translators: locale
         })
       })
     })]

package/esm/components/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-import { isValidElement, cloneElement, useEffect, useState } from 'react';
+import { isValidElement, cloneElement, useEffect, useState, useId } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
@@ -9,7 +9,7 @@ import Form from '../Form';
 import Button from '../Button';
 import Heading from '../Heading';
 import Text from '../Text';
-import Translate, { isLikeText } from '../Translate';
+import { isLikeText, InternalTranslate } from '../Translate';
 import { safeInvoke } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/isValidElement(value);
@@ -91,9 +91,8 @@ const Dialog = _ref => {
     }
     let props = {
       onClick: onCloseWithConfirmation,
-      children: cancelTitle || /*#__PURE__*/_jsx(Translate, {
-        content: "Dialog.cancelButton",
-        fallback: "Cancel"
+      children: cancelTitle || /*#__PURE__*/_jsx(InternalTranslate, {
+        content: "Dialog.cancelButton"
       })
     };
     if (formProps && isProps(formProps.cancelButton)) {
@@ -148,6 +147,7 @@ const Dialog = _ref => {
   } else {
     childrenElement = children;
   }
+  const titleContainerId = useId();
   return /*#__PURE__*/_jsxs(Overlay, {
     className: classNames(baseClassName, className),
     isOpen: isVisible,
@@ -155,6 +155,9 @@ const Dialog = _ref => {
     canCloseOnBackdropClick: canClose && closable,
     canCloseOnEscapePress: canClose && closable,
     size: size,
+    containerProps: {
+      'aria-labelledby': title ? titleContainerId : undefined
+    },
     ...props,
     children: [(title || subtitle || actions) && /*#__PURE__*/_jsxs("header", {
       className: `${baseClassName}__header`,
@@ -164,13 +167,16 @@ const Dialog = _ref => {
           className: `${baseClassName}__header-body`,
           children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClassName}__header-content`,
-            children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-              level: 2,
-              className: `${baseClassName}__title`,
-              children: title
-            }) : /*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}__title`,
-              children: title
+            children: [/*#__PURE__*/_jsx("div", {
+              id: titleContainerId,
+              children: isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
+                level: 2,
+                className: `${baseClassName}__title`,
+                children: title
+              }) : /*#__PURE__*/_jsx("div", {
+                className: `${baseClassName}__title`,
+                children: title
+              })
             }), subtitle && /*#__PURE__*/_jsx("div", {
               className: `${baseClassName}__subtitle`,
               children: isLikeText(subtitle) ? /*#__PURE__*/_jsx(Text, {

package/esm/components/Drawer/Drawer.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-import { Fragment, isValidElement, cloneElement, useRef, useState } from 'react';
+import { Fragment, isValidElement, cloneElement, useRef, useState, useId } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
@@ -118,6 +118,7 @@ const Drawer = _ref => {
       })
     });
   };
+  const titleContainerId = useId();
   return /*#__PURE__*/_jsxs(Overlay, {
     className: classNames(baseClassName, {
       [`${baseClassName}--form`]: form
@@ -127,6 +128,9 @@ const Drawer = _ref => {
     isOpen: isOpen,
     placement: placement,
     size: size,
+    containerProps: {
+      'aria-labelledby': titleContainerId
+    },
     ...props,
     children: [takeApart(_ref5 => {
       let {
@@ -139,13 +143,16 @@ const Drawer = _ref => {
           hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
           onClose: onCloseWithConfirmation,
           tabs: tabs,
-          children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-            level: 2,
-            className: `${baseClassName}__title`,
-            children: title
-          }) : /*#__PURE__*/_jsx("div", {
-            className: `${baseClassName}__title`,
-            children: title
+          children: [/*#__PURE__*/_jsx("div", {
+            id: titleContainerId,
+            children: isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
+              level: 2,
+              className: `${baseClassName}__title`,
+              children: title
+            }) : /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__title`,
+              children: title
+            })
           }), subtitle && /*#__PURE__*/_jsx("div", {
             className: `${baseClassName}__subtitle`,
             children: subtitle

package/esm/components/Drawer/DrawerProgress.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Component, Fragment } from 'react';
 import Button from '../Button';
 import { ButtonContext, getButtonContextValue } from '../Button/ButtonContext';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Progress from '../Progress';
 import ProgressStep, { STATUS_DONE, STATUS_ERROR, STATUS_NOT_STARTED } from '../ProgressStep';
 import { CLS_PREFIX } from '../../constants';
@@ -128,9 +128,8 @@ class DrawerProgress extends Component {
       }), canCancel && /*#__PURE__*/_jsx(Button, {
         onClick: this.handleCancel,
         size: "lg",
-        children: /*#__PURE__*/_jsx(Translate, {
-          content: "DrawerProgress.cancelButton",
-          fallback: "Cancel"
+        children: /*#__PURE__*/_jsx(InternalTranslate, {
+          content: "DrawerProgress.cancelButton"
         })
       })]
     }) : null;

package/esm/components/Dropdown/Dropdown.js

@@ -10,13 +10,13 @@ import AutoClosable from '../AutoClosable';
 import Popper from '../Popper';
 import Layer from '../Layer';
 import { MenuItem, MenuDivider } from '../Menu';
-import Translate from '../Translate';
-import localeFallback from './locale/en-US';
+import Translate, { InternalTranslate } from '../Translate';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const createTarget = (node, _ref) => {
   let {
     onToggle,
-    targetRef
+    targetRef,
+    opened
   } = _ref;
   if (!(/*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
     node = /*#__PURE__*/_jsx(Button, {
@@ -34,7 +34,8 @@ const createTarget = (node, _ref) => {
       onToggle(isKeyboardEvent);
       isKeyboardEvent = false;
     }),
-    'aria-haspopup': true
+    'aria-haspopup': 'listbox',
+    'aria-expanded': opened
   });
 };
 const computePlacement = placement => {
@@ -94,11 +95,10 @@ const useEnhancedMenu = (menu, _ref2) => {
       className: `${baseClassName}__overlay-menu-divider`
     }, "divider"), /*#__PURE__*/_jsx(MenuItem, {
       onClick: handleClose,
-      children: /*#__PURE__*/_jsx(Translate, {
+      children: /*#__PURE__*/_jsx(InternalTranslate, {
         namespace: "Dropdown",
         content: "close",
-        translators: locale,
-        fallback: localeFallback.close
+        translators: locale
       })
     }, "close")];
   }
@@ -109,7 +109,8 @@ const useEnhancedMenu = (menu, _ref2) => {
     ref: menuRef,
     children,
     onKeyDown: handleKeyDown,
-    autoFocus
+    autoFocus,
+    role: 'listbox'
   });
   return {
     enhancedMenu: clone,
@@ -162,7 +163,8 @@ const Dropdown = _ref3 => {
   const targetRef = useRef();
   const target = createTarget(children, {
     onToggle: handleOpen,
-    targetRef
+    targetRef,
+    opened
   });
   return /*#__PURE__*/_jsx("div", {
     className: classNames(baseClassName, {

package/esm/components/ExtendedStatusMessage/ExtendedStatusMessage.js

@@ -26,6 +26,7 @@ const ExtendedStatusMessage = _ref => {
         [`${baseClassName}--${intent}`]: intent,
         [`${baseClassName}--loading`]: loading
       }, className),
+      role: intent === 'warning' || intent === 'danger' ? 'alert' : 'status',
       ...props,
       children: [image ? /*#__PURE__*/_jsx("div", {
         className: `${baseClassName}__image`,