@elastic/eui 122.1.0 → 123.0.0

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _excluded = ["className", "children", "as", "hideCloseButton", "flyoutMenuProps", "flyoutMenuDisplayMode", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "hasChildBackground", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "hasAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "aria-labelledby", "id", "resizable", "minWidth", "onResize", "onAnimationEnd", "container"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -18,7 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useEffect, useLayoutEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useEuiTheme, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useEuiTheme, useEuiMemoizedStyles, useGeneratedHtmlId, focusTrapPubSub } from '../../services';
 import { useIsInManagedFlyout, useFlyoutId, useFlyoutManager } from './manager';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_MAIN, PROPERTY_LEVEL } from './manager/const';
 import { EuiFocusTrap } from '../focus_trap';
@@ -53,6 +53,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(_toConsumableArray(Array.from(contributions.values(), function (contribution) {
+    return filter(contribution) ? contribution.width : 0;
+  }))));
+};
 var defaultElement = 'div';
 export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var _maskProps$headerZind, _managerSessions, _managerState$layoutM, _managerState$current, _managerState$flyouts, _managerState$pushPad;
@@ -107,8 +153,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var container = resolveContainer(containerProp);
   var hasAnimationDefault = type === 'overlay';
   var hasAnimation = _hasAnimation !== null && _hasAnimation !== void 0 ? _hasAnimation : hasAnimationDefault;
-  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
-    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = useRef(null);
 
@@ -125,10 +169,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     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.');
@@ -199,22 +239,33 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [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 = 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 = 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,
@@ -295,17 +346,24 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   // 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.
   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
@@ -325,45 +383,61 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
    * Uses useLayoutEffect so padding is applied before child render.
    */
   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 === LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
-    if (shouldApplyPadding) {
-      paddingTarget.style[paddingSide] = "".concat(paddingWidth, "px");
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
-      }
-    } else {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables(_defineProperty({}, 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 === 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(_defineProperty({}, 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/es/components/flyout/flyout_menu/action_button.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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
@@ -13,29 +15,20 @@ import { EuiToolTip } from '../../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var 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 = _objectWithoutProperties(action, _excluded);
+  var button = ___EmotionJSX(EuiButtonIcon, _extends({}, 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 ? ___EmotionJSX(EuiToolTip, _extends({
     content: toolTipContent,
     disableScreenReaderOutput: true
-  }, toolTipProps), ___EmotionJSX(EuiButtonIcon, sharedProps)) : ___EmotionJSX(EuiButtonIcon, sharedProps);
+  }, toolTipProps), button) : button;
 };

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

@@ -14,7 +14,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
 import { css } from '@emotion/react';
 import { flushSync } from 'react-dom';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
@@ -167,6 +167,24 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     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 = useCallback(function () {
+    if (level !== LEVEL_MAIN) {
+      closeFlyout(flyoutId);
+      return;
+    }
+    var _getFlyoutManagerStor = 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
   useLayoutEffect(function () {
@@ -178,7 +196,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       });
       if (stillInStore) {
         // Normal cleanup (deps changed or explicit close via isOpen=false)
-        level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+        closeOwnFlyouts();
       } else if (wasRegisteredRef.current) {
         var _onCloseCallbackRef$c, _store$consumeCloseMe;
         // Removed externally while mounted: forward the store-stamped reason
@@ -189,7 +207,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       }
       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
@@ -204,8 +222,8 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     // 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 = 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 = getFlyoutManagerStore().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor2 !== void 0 ? _getFlyoutManagerStor2 : {
         reason: 'navigation-cascade'
       });
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
@@ -242,7 +260,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     // and ensures cascade close logic runs before DOM cleanup begins
     // Using flushSync to force synchronous state update completion
     flushSync(function () {
-      level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+      closeOwnFlyouts();
     });
     if (onCloseCallbackRef.current) {
       var event = e || new MouseEvent('click');

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -9,9 +9,9 @@ var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "t
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { isValidElement } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 import { EuiTitle } from '../../title';
 import { EuiText } from '../../text';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
@@ -38,7 +38,15 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
     description = props.description,
     descriptionFlexItemProps = props.descriptionFlexItemProps,
     fieldFlexItemProps = props.fieldFlexItemProps,
+    ariaLabel = props['aria-label'],
+    ariaLabelledby = props['aria-labelledby'],
     rest = _objectWithoutProperties(props, _excluded);
+  var generatedTitleId = 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__*/isValidElement(title) && title.props.id || generatedTitleId;
   var styles = useEuiMemoizedStyles(euiDescribedFormGroupStyles);
   var cssStyles = [styles.euiDescribedFormGroup, fullWidth ? styles.fullWidth : styles.formWidth];
   var descriptionColumnStyles = [styles.euiDescribedFormGroup__descriptionColumn, descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.css];
@@ -72,7 +80,11 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
       break;
   }
   return ___EmotionJSX(EuiFlexGroup, _extends({
-    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,
@@ -84,6 +96,7 @@ export var EuiDescribedFormGroup = function EuiDescribedFormGroup(props) {
     css: descriptionColumnStyles,
     className: classNames('euiDescribedFormGroup__descriptionColumn', descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.className)
   }), ___EmotionJSX(EuiTitle, {
+    id: titleId,
     size: titleSize,
     className: "euiDescribedFormGroup__title"
   }, title), renderedDescription), ___EmotionJSX(EuiFlexItem, _extends({