@elastic/eui 122.1.0 → 123.0.0

package/optimize/lib/components/flyout/flyout.component.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFlyoutComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
@@ -61,6 +61,52 @@ var resolveContainer = function resolveContainer(raw) {
   if (typeof HTMLElement === 'undefined') return null;
   return raw instanceof HTMLElement ? raw : null;
 };
+
+/**
+ * Per-target push-flyout offset bookkeeping, shared across every flyout React root (they all
+ * render from this one module). Keyed by the element the offset is applied to — a `container` or
+ * `document.body` — so flyouts targeting different elements never contend.
+ *
+ * Instead of a single owner per side, every currently-pushed flyout records its width as a
+ * contribution and the applied offset is derived from the set (the widest contribution). Closing,
+ * resizing, or backgrounding any one flyout just updates its own entry, so the result no longer
+ * depends on open/close order or on cross-root effect ordering. The target's base (pre-flyout)
+ * inline padding is captured when the first contribution arrives and restored when the last one
+ * leaves. See https://github.com/elastic/eui/issues/9788.
+ */
+
+var euiPushPaddingRegistry = new WeakMap();
+var euiSideStyleKey = function euiSideStyleKey(side) {
+  return side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+};
+var euiSideCssVarKey = function euiSideCssVarKey(side) {
+  return side === 'left' ? '--euiPushFlyoutOffsetInlineStart' : '--euiPushFlyoutOffsetInlineEnd';
+};
+var euiGetPushPaddingSideState = function euiGetPushPaddingSideState(target, side) {
+  var state = euiPushPaddingRegistry.get(target);
+  if (!state) {
+    state = {
+      left: {
+        base: '',
+        contributions: new Map()
+      },
+      right: {
+        base: '',
+        contributions: new Map()
+      }
+    };
+    euiPushPaddingRegistry.set(target, state);
+  }
+  return state[side];
+};
+var euiMaxContribution = function euiMaxContribution(contributions) {
+  var filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return true;
+  };
+  return Math.max.apply(Math, [0].concat((0, _toConsumableArray2.default)(Array.from(contributions.values(), function (contribution) {
+    return filter(contribution) ? contribution.width : 0;
+  }))));
+};
 var defaultElement = 'div';
 var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _maskProps$headerZind, _managerSessions, _managerState$layoutM, _managerState$current, _managerState$flyouts, _managerState$pushPad;
@@ -115,8 +161,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var container = resolveContainer(containerProp);
   var hasAnimationDefault = type === 'overlay';
   var hasAnimation = _hasAnimation !== null && _hasAnimation !== void 0 ? _hasAnimation : hasAnimationDefault;
-  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
-    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
 
@@ -133,10 +177,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     pushMinBreakpoint: pushMinBreakpoint,
     containerWidth: containerReferenceWidth
   });
-  // When no explicit container is provided, push padding targets
-  // document.body and global push-offset CSS vars are set. When a
-  // container is provided, only that element receives padding.
-  var shouldSetGlobalPushVars = container == null;
   if ('container' in props && ('maskProps' in props || 'includeFixedHeadersInFocusTrap' in props) && process.env.NODE_ENV === 'development') {
     if ('maskProps' in props) {
       console.warn('EuiFlyout: `maskProps` is deprecated. Prefer using the `container` prop to scope flyouts.');
@@ -207,22 +247,33 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     }
   }, [isInManagedContext, flyoutId]);
 
-  // Derive flyout identity and sibling info from the single context read
+  // Derive flyout identity and sibling info from the session this flyout
+  // belongs to. Not the current (top-most) session: a newly opened main
+  // renders once before it registers its own session, and a backgrounded
+  // main is not in the current session at all. Reading the current session
+  // in those cases would treat the other session's main as this flyout's
+  // sibling and clamp the resizable width against it.
+  var ownSession = (0, _react.useMemo)(function () {
+    var _managerSessions$find;
+    return (_managerSessions$find = managerSessions === null || managerSessions === void 0 ? void 0 : managerSessions.find(function (session) {
+      return session.mainFlyoutId === flyoutId || session.childFlyoutId === flyoutId;
+    })) !== null && _managerSessions$find !== void 0 ? _managerSessions$find : null;
+  }, [managerSessions, flyoutId]);
   var flyoutIdentity = (0, _react.useMemo)(function () {
-    if (!flyoutId || !currentSession) {
+    if (!flyoutId || !ownSession) {
       return {
         isMainFlyout: false,
         siblingFlyoutId: null,
         hasValidSession: false
       };
     }
-    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
+    var siblingFlyoutId = ownSession.mainFlyoutId === flyoutId ? ownSession.childFlyoutId : ownSession.mainFlyoutId;
     return {
-      isMainFlyout: currentSession.mainFlyoutId === flyoutId,
+      isMainFlyout: ownSession.mainFlyoutId === flyoutId,
       siblingFlyoutId: siblingFlyoutId,
       hasValidSession: true
     };
-  }, [flyoutId, currentSession]);
+  }, [flyoutId, ownSession]);
 
   // Destructure for easier use
   var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
@@ -303,17 +354,24 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   // the document element so that the child (fill) flyout can track it
   // synchronously during drag resize, avoiding the 1-frame lag that
   // results from the async ResizeObserver → manager-state pipeline.
+  // Only the active session's main publishes: a backgrounded main keeps its
+  // `isMainFlyout` role but must not leave its width behind for the new
+  // session's child to read.
   (0, _react.useLayoutEffect)(function () {
-    if (!isMainFlyout) return;
+    if (!isMainFlyout || !isActiveManagedFlyout) return;
 
     // Only set when we have a computed percentage (during active resize)
-    if (typeof size === 'string' && size.endsWith('%')) {
-      document.documentElement.style.setProperty('--euiFlyoutMainWidth', size);
-    }
+    if (typeof size !== 'string' || !size.endsWith('%')) return;
+    var style = document.documentElement.style;
+    style.setProperty('--euiFlyoutMainWidth', size);
     return function () {
-      document.documentElement.style.removeProperty('--euiFlyoutMainWidth');
+      // Flyouts in separate React roots can run this cleanup after another
+      // main has already published its own width; leave that value alone.
+      if (style.getPropertyValue('--euiFlyoutMainWidth') === size) {
+        style.removeProperty('--euiFlyoutMainWidth');
+      }
     };
-  }, [isMainFlyout, size]);
+  }, [isMainFlyout, isActiveManagedFlyout, size]);
 
   /**
    * Setting up the refs on the actual flyout element in order to
@@ -333,45 +391,61 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
    * Uses useLayoutEffect so padding is applied before child render.
    */
   (0, _react.useLayoutEffect)(function () {
-    if (!isPushed) {
-      return;
-    }
     var paddingTarget = container !== null && container !== void 0 ? container : document.body;
-    var shouldApplyPadding = !isInManagedContext || isActiveManagedFlyout;
-    var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
-    var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
     var managerSide = side === 'left' ? 'left' : 'right';
+    var styleKey = euiSideStyleKey(managerSide);
+    var state = euiGetPushPaddingSideState(paddingTarget, managerSide);
 
-    // Capture pre-existing inline padding so it can be restored on cleanup
-    var previousPadding = paddingTarget.style[paddingSide];
-    var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
-    if (shouldApplyPadding) {
-      paddingTarget.style[paddingSide] = "".concat(paddingWidth, "px");
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(paddingWidth, "px")));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
-      }
-    } else {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, null));
+    // Write the offset derived from all current contributions: the widest pushed flyout on
+    // this target.
+    var apply = function apply() {
+      var total = euiMaxContribution(state.contributions);
+      var isPushing = state.contributions.size > 0;
+      paddingTarget.style[styleKey] = isPushing ? "".concat(total, "px") : state.base;
+      // Without a `container` the offset is also exposed as a global CSS variable. It is
+      // written inline on `<html>` rather than through `EuiProvider`, because every React root
+      // has its own provider rendering its own `:root` block and the last one inserted would
+      // win regardless of which root's flyouts are still open.
+      if (container == null) {
+        var cssVar = euiSideCssVarKey(managerSide);
+        if (isPushing) {
+          document.documentElement.style.setProperty(cssVar, "".concat(total, "px"));
+        } else {
+          document.documentElement.style.removeProperty(cssVar);
+        }
       }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, 0);
+      // The manager only learns about managed flyouts, so it must not be told about a standalone
+      // flyout's width: nothing would ever reset it once that flyout closes.
+      if (isInManagedContext) {
+        var _flyoutManagerRef$cur5;
+        (_flyoutManagerRef$cur5 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur5 === void 0 || _flyoutManagerRef$cur5.setPushPadding(managerSide, euiMaxContribution(state.contributions, function (c) {
+          return c.managed;
+        }));
       }
+    };
+    var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
+
+    // A standalone flyout pushes whenever it is in push mode. A managed flyout only pushes while
+    // it is the active session's flyout; a backgrounded push flyout (e.g. under a new overlay
+    // session) withdraws its contribution so the page is not left pushed for it.
+    var shouldPush = isPushed && (!isInManagedContext || isActiveManagedFlyout);
+    if (!shouldPush) {
+      return;
     }
+    if (state.contributions.size === 0) {
+      // First pushed flyout on this side: capture the app's own inline padding to restore later.
+      state.base = paddingTarget.style[styleKey];
+    }
+    state.contributions.set(flyoutId, {
+      width: paddingWidth,
+      managed: isInManagedContext
+    });
+    apply();
     return function () {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, null));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, 0);
-      }
+      state.contributions.delete(flyoutId);
+      apply();
     };
-  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, shouldSetGlobalPushVars, container]);
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, container, flyoutId]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)

package/optimize/lib/components/flyout/flyout_menu/action_button.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuActionButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _button = require("../../button");
 var _tool_tip = require("../../tool_tip");
 var _react2 = require("@emotion/react");
+var _excluded = ["toolTipContent", "toolTipProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,32 +19,22 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 var MenuActionButton = exports.MenuActionButton = function MenuActionButton(_ref) {
   var action = _ref.action;
-  var iconType = action.iconType,
-    onClick = action.onClick,
-    ariaLabel = action['aria-label'],
-    toolTipContent = action.toolTipContent,
+  var toolTipContent = action.toolTipContent,
     toolTipProps = action.toolTipProps,
-    isDisabled = action.isDisabled,
-    isLoading = action.isLoading,
-    href = action.href,
-    target = action.target;
-  var sharedProps = {
-    'aria-label': ariaLabel,
-    iconType: iconType,
-    onClick: onClick,
-    color: 'text',
-    size: 'xs',
-    isDisabled: isDisabled,
-    // Keeps the button focusable so tooltip-on-disabled works for keyboard users
-    isLoading: isLoading,
-    href: href,
-    target: target
-  };
+    buttonProps = (0, _objectWithoutProperties2.default)(action, _excluded);
+  var button = (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({}, buttonProps, {
+    // The menu bar sets these props itself so every action looks the same.
+    // Anything set here also belongs in `EuiFlyoutMenuOwnedActionProps`.
+    color: "text",
+    size: "xs",
+    display: "empty",
+    iconSize: "m",
+    isSelected: undefined
+  }));
   return toolTipContent ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
     content: toolTipContent,
     disableScreenReaderOutput: true
-  }, toolTipProps), (0, _react2.jsx)(_button.EuiButtonIcon, sharedProps)) : (0, _react2.jsx)(_button.EuiButtonIcon, sharedProps);
+  }, toolTipProps), button) : button;
 };

package/optimize/lib/components/flyout/manager/flyout_managed.js

@@ -172,6 +172,24 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     flyoutExistsInManagerRef.current = flyoutExistsInManager;
   }, [flyoutExistsInManager]);
 
+  // Closing a main closes its whole history group via `closeAllFlyouts`, which always targets
+  // the *current* session. A main that has been backgrounded by a newer session (e.g. closed
+  // programmatically from another React root) must only remove its own session, otherwise it
+  // tears down the foreground session and leaves its own stale session behind.
+  var closeOwnFlyouts = (0, _react.useCallback)(function () {
+    if (level !== _const.LEVEL_MAIN) {
+      closeFlyout(flyoutId);
+      return;
+    }
+    var _getFlyoutManagerStor = (0, _store.getFlyoutManagerStore)().getState(),
+      sessions = _getFlyoutManagerStor.sessions;
+    var ownSession = sessions.find(function (session) {
+      return session.mainFlyoutId === flyoutId;
+    });
+    var isBackgroundedMain = ownSession != null && ownSession !== sessions[sessions.length - 1];
+    isBackgroundedMain ? closeFlyout(flyoutId) : closeAllFlyouts();
+  }, [level, flyoutId, closeFlyout, closeAllFlyouts]);
+
   // Register with flyout manager context when open, remove when closed
   // Using useLayoutEffect to run synchronously before DOM updates
   (0, _react.useLayoutEffect)(function () {
@@ -183,7 +201,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       });
       if (stillInStore) {
         // Normal cleanup (deps changed or explicit close via isOpen=false)
-        level === _const.LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+        closeOwnFlyouts();
       } else if (wasRegisteredRef.current) {
         var _onCloseCallbackRef$c, _store$consumeCloseMe;
         // Removed externally while mounted: forward the store-stamped reason
@@ -194,7 +212,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       }
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, minWidth, historyKey, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, addFlyout, closeFlyout, closeAllFlyouts]);
+  }, [flyoutId, title, level, size, minWidth, historyKey, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, addFlyout, closeOwnFlyouts]);
 
   // Detect when flyout has been removed from manager state (e.g., via Back button)
   // and trigger onClose callback to notify the parent component
@@ -209,8 +227,8 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     // any other removal (e.g. a closeAllFlyouts cascade reaching a backgrounded
     // flyout) defaults to `navigation-cascade`.
     if (wasRegisteredRef.current && !flyoutExistsInManager) {
-      var _onCloseCallbackRef$c2, _getFlyoutManagerStor;
-      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'), (_getFlyoutManagerStor = (0, _store.getFlyoutManagerStore)().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor !== void 0 ? _getFlyoutManagerStor : {
+      var _onCloseCallbackRef$c2, _getFlyoutManagerStor2;
+      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'), (_getFlyoutManagerStor2 = (0, _store.getFlyoutManagerStore)().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor2 !== void 0 ? _getFlyoutManagerStor2 : {
         reason: 'navigation-cascade'
       });
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
@@ -247,7 +265,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     // and ensures cascade close logic runs before DOM cleanup begins
     // Using flushSync to force synchronous state update completion
     (0, _reactDom.flushSync)(function () {
-      level === _const.LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+      closeOwnFlyouts();
     });
     if (onCloseCallbackRef.current) {
       var event = e || new MouseEvent('click');

package/optimize/lib/components/form/described_form_group/described_form_group.js

@@ -1,13 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDescribedFormGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _title = require("../../title");
@@ -16,7 +17,7 @@ var _flex = require("../../flex");
 var _eui_form_context = require("../eui_form_context");
 var _described_form_group = require("./described_form_group.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "titleSize", "title", "description", "descriptionFlexItemProps", "fieldFlexItemProps"];
+var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "titleSize", "title", "description", "descriptionFlexItemProps", "fieldFlexItemProps", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,6 +25,8 @@ var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "t
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @see {@link https://eui.elastic.co/docs/components/forms/layouts/described-groups/|EuiDescribedFormGroup documentation}
  */
@@ -44,7 +47,15 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
     description = props.description,
     descriptionFlexItemProps = props.descriptionFlexItemProps,
     fieldFlexItemProps = props.fieldFlexItemProps,
+    ariaLabel = props['aria-label'],
+    ariaLabelledby = props['aria-labelledby'],
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var generatedTitleId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'euiDescribedFormGroupTitle'
+  });
+  // Reuse an `id` already set on the title element, so that consumers
+  // referencing it from their own `aria-labelledby` keep working
+  var titleId = /*#__PURE__*/(0, _react.isValidElement)(title) && title.props.id || generatedTitleId;
   var styles = (0, _services.useEuiMemoizedStyles)(_described_form_group.euiDescribedFormGroupStyles);
   var cssStyles = [styles.euiDescribedFormGroup, fullWidth ? styles.fullWidth : styles.formWidth];
   var descriptionColumnStyles = [styles.euiDescribedFormGroup__descriptionColumn, descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.css];
@@ -78,7 +89,11 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
       break;
   }
   return (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
-    role: "group"
+    role: "group",
+    "aria-label": ariaLabel
+    // The title names the group, unless the consumer provides their own label
+    ,
+    "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : ariaLabel == null ? titleId : undefined
   }, rest, {
     css: cssStyles,
     className: classes,
@@ -90,6 +105,7 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
     css: descriptionColumnStyles,
     className: (0, _classnames.default)('euiDescribedFormGroup__descriptionColumn', descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.className)
   }), (0, _react2.jsx)(_title.EuiTitle, {
+    id: titleId,
     size: titleSize,
     className: "euiDescribedFormGroup__title"
   }, title), renderedDescription), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({