@elastic/eui 113.0.0 → 113.1.0

package/es/components/breadcrumbs/_breadcrumb_content.js

@@ -246,7 +246,7 @@ EuiBreadcrumbContent.propTypes = {
        * however, the popover will attempt to reposition itself along the secondary
        * cross axis if there is room there instead.
        *
-       * If you do not not want this repositioning to occur (and it is acceptable for
+       * If you do not want this repositioning to occur (and it is acceptable for
        * the popover to appear offscreen), set this to false to disable this behavior.
        *
        * @default true

package/es/components/breadcrumbs/breadcrumbs.js

@@ -257,7 +257,7 @@ EuiBreadcrumbs.propTypes = {
          * however, the popover will attempt to reposition itself along the secondary
          * cross axis if there is room there instead.
          *
-         * If you do not not want this repositioning to occur (and it is acceptable for
+         * If you do not want this repositioning to occur (and it is acceptable for
          * the popover to appear offscreen), set this to false to disable this behavior.
          *
          * @default true

package/es/components/flyout/flyout_menu.js

@@ -46,7 +46,8 @@ var BackButton = function BackButton(props) {
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     size: "xs",
     color: "text",
-    iconType: "editorUndo"
+    iconType: "editorUndo",
+    "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), ___EmotionJSX(EuiI18n, {
     token: "euiFlyoutMenu.back",
     default: "Back"
@@ -65,7 +66,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
     button: ___EmotionJSX(EuiButtonIcon, {
       iconType: "arrowDown",
       color: "text",
-      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History')
+      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History'),
+      "data-test-subj": "euiFlyoutMenuHistoryButton"
     }),
     isOpen: isPopoverOpen,
     onClick: handlePopoverButtonClick,
@@ -84,7 +86,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);
-      }
+      },
+      "data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
     }, item.title);
   })));
 };

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -203,7 +203,7 @@ EuiHeaderBreadcrumbs.propTypes = {
          * however, the popover will attempt to reposition itself along the secondary
          * cross axis if there is room there instead.
          *
-         * If you do not not want this repositioning to occur (and it is acceptable for
+         * If you do not want this repositioning to occur (and it is acceptable for
          * the popover to appear offscreen), set this to false to disable this behavior.
          *
          * @default true

package/es/components/header/header_links/header_links.js

@@ -240,7 +240,7 @@ EuiHeaderLinks.propTypes = {
        * however, the popover will attempt to reposition itself along the secondary
        * cross axis if there is room there instead.
        *
-       * If you do not not want this repositioning to occur (and it is acceptable for
+       * If you do not want this repositioning to occur (and it is acceptable for
        * the popover to appear offscreen), set this to false to disable this behavior.
        *
        * @default true

package/es/components/page/page_header/page_header_content.js

@@ -417,7 +417,7 @@ EuiPageHeaderContent.propTypes = {
          * however, the popover will attempt to reposition itself along the secondary
          * cross axis if there is room there instead.
          *
-         * If you do not not want this repositioning to occur (and it is acceptable for
+         * If you do not want this repositioning to occur (and it is acceptable for
          * the popover to appear offscreen), set this to false to disable this behavior.
          *
          * @default true

package/es/components/popover/popover.js

@@ -112,7 +112,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "closingTransitionAnimationFrame", void 0);
     _defineProperty(_this, "button", null);
     _defineProperty(_this, "panel", null);
-    _defineProperty(_this, "descriptionId", htmlIdGenerator()());
+    _defineProperty(_this, "idGenerator", htmlIdGenerator('euiPopover'));
+    _defineProperty(_this, "panelId", _this.idGenerator('panelId'));
+    _defineProperty(_this, "descriptionId", _this.idGenerator('descriptionId'));
     _defineProperty(_this, "closePopover", function () {
       if (_this.props.isOpen) {
         _this.props.closePopover();
@@ -126,6 +128,19 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         _this.handleStrandedFocus();
       }
     });
+    _defineProperty(_this, "getFocusableToggleButton", function () {
+      if (_this.button) {
+        try {
+          var focusableItems = focusable(_this.button);
+          if (focusableItems.length) {
+            return focusableItems[0];
+          }
+        } catch (_unused) {
+          // tabbable's focusable() can throw in environments that don't
+          // fully support CSS selector parsing (e.g. jsdom with :has())
+        }
+      }
+    });
     _defineProperty(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
         var _this$panel;
@@ -135,11 +150,10 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         // it will be on the panel instead on mount when isOpen=true
         if (document.activeElement === document.body || (_this$panel = _this.panel) !== null && _this$panel !== void 0 && _this$panel.contains(document.activeElement) // if focus is on OR within this.panel
         ) {
-          if (!_this.button) return;
-          var focusableItems = focusable(_this.button);
-          if (!focusableItems.length) return;
-          var toggleButton = focusableItems[0];
-          toggleButton.focus(returnFocusConfig);
+          var toggleButton = _this.getFocusableToggleButton();
+          if (toggleButton) {
+            toggleButton.focus(returnFocusConfig);
+          }
         }
       }, closingTransitionTime);
     });
@@ -195,6 +209,25 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         });
       }, durationMatch + delayMatch);
     });
+    /**
+     * Updates ARIA attributes on the popover trigger button
+     * Only applies ARIA when the trigger is button-like (semantic <button> or role="button").
+     * Avoids adding incorrect ARIA on inputs or other non-button elements.
+     */
+    _defineProperty(_this, "updateTriggerButtonAriaAttributes", function (toggleButton, isOpen) {
+      var _toggleButton$tagName, _toggleButton$getAttr;
+      if (!toggleButton) return;
+      var tag = (_toggleButton$tagName = toggleButton.tagName) === null || _toggleButton$tagName === void 0 ? void 0 : _toggleButton$tagName.toLowerCase();
+      var role = (_toggleButton$getAttr = toggleButton.getAttribute('role')) === null || _toggleButton$getAttr === void 0 ? void 0 : _toggleButton$getAttr.toLowerCase();
+      var isButtonLike = tag === 'button' || role === 'button';
+      if (!isButtonLike) return;
+      toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+      if (isOpen) {
+        toggleButton.setAttribute('aria-controls', _this.panelId);
+      } else {
+        toggleButton.removeAttribute('aria-controls');
+      }
+    });
     _defineProperty(_this, "onMutation", function (records) {
       var waitDuration = getWaitDuration(records);
       _this.positionPopoverFixed();
@@ -314,7 +347,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
   return _createClass(EuiPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
+      var _this2 = this,
+        _this$props$isOpen;
       if (this.state.suppressingPopover) {
         // component was created with isOpen=true; now that it's mounted
         // stop suppressing and start opening
@@ -325,6 +359,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           _this2.onOpenPopover();
         });
       }
+      this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : false);
       this.repositionOnScroll.subscribe();
     }
   }, {
@@ -336,6 +371,12 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         this.onOpenPopover();
       }
 
+      // Update ARIA attributes on the toggle when open state changes
+      if (prevProps.isOpen !== this.props.isOpen) {
+        var _this$props$isOpen2;
+        this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen2 = this.props.isOpen) !== null && _this$props$isOpen2 !== void 0 ? _this$props$isOpen2 : false);
+      }
+
       // ensure recalculation of panel position on prop updates
       if (this.props.isOpen && (prevProps.anchorPosition !== this.props.anchorPosition || prevProps.buffer !== this.props.buffer || prevProps.offset !== this.props.offset || prevProps.panelPaddingSize !== this.props.panelPaddingSize)) {
         this.positionPopoverFluid();
@@ -455,7 +496,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {
+        }, focusTrapProps), ___EmotionJSX(EuiPopoverPanel, _extends({
+          id: this.panelId
+        }, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,
@@ -664,7 +707,7 @@ EuiPopover.propTypes = {
      * however, the popover will attempt to reposition itself along the secondary
      * cross axis if there is room there instead.
      *
-     * If you do not not want this repositioning to occur (and it is acceptable for
+     * If you do not want this repositioning to occur (and it is acceptable for
      * the popover to appear offscreen), set this to false to disable this behavior.
      *
      * @default true

package/es/components/tour/tour_step.js

@@ -254,7 +254,7 @@ EuiTourStep.propTypes = {
      * however, the popover will attempt to reposition itself along the secondary
      * cross axis if there is room there instead.
      *
-     * If you do not not want this repositioning to occur (and it is acceptable for
+     * If you do not want this repositioning to occur (and it is acceptable for
      * the popover to appear offscreen), set this to false to disable this behavior.
      *
      * @default true

package/eui.d.ts

@@ -14525,6 +14525,7 @@ declare module '@elastic/eui/src/components/popover/popover_panel' {
 }
 declare module '@elastic/eui/src/components/popover/popover' {
 	import React, { Component, KeyboardEvent, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback, PropsWithChildren, ContextType } from 'react';
+	import { type FocusableElement } from 'tabbable';
 	import { CommonProps, NoArgCallback } from '@elastic/eui/src/components/common';
 	import { FocusTarget, EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
 	import { EuiPopoverPosition } from '@elastic/eui/src/services/popover';
@@ -14632,7 +14633,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	     * however, the popover will attempt to reposition itself along the secondary
 	     * cross axis if there is room there instead.
 	     *
-	     * If you do not not want this repositioning to occur (and it is acceptable for
+	     * If you do not want this repositioning to occur (and it is acceptable for
 	     * the popover to appear offscreen), set this to false to disable this behavior.
 	     *
 	     * @default true
@@ -14708,14 +14709,23 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    private closingTransitionAnimationFrame;
 	    private button;
 	    private panel;
+	    private idGenerator;
+	    private panelId;
 	    private descriptionId;
 	    constructor(props: Props);
 	    closePopover: () => void;
 	    onEscapeKey: (event: Event) => void;
+	    getFocusableToggleButton: () => FocusableElement | undefined;
 	    handleStrandedFocus: () => void;
 	    onKeyDown: (event: KeyboardEvent) => void;
 	    onClickOutside: (event: Event) => void;
 	    onOpenPopover: () => void;
+	    /**
+	     * Updates ARIA attributes on the popover trigger button
+	     * Only applies ARIA when the trigger is button-like (semantic <button> or role="button").
+	     * Avoids adding incorrect ARIA on inputs or other non-button elements.
+	     */
+	    private updateTriggerButtonAriaAttributes;
 	    componentDidMount(): void;
 	    componentDidUpdate(prevProps: Props): void;
 	    componentWillUnmount(): void;

package/lib/components/breadcrumbs/_breadcrumb_content.js

@@ -255,7 +255,7 @@ EuiBreadcrumbContent.propTypes = {
        * however, the popover will attempt to reposition itself along the secondary
        * cross axis if there is room there instead.
        *
-       * If you do not not want this repositioning to occur (and it is acceptable for
+       * If you do not want this repositioning to occur (and it is acceptable for
        * the popover to appear offscreen), set this to false to disable this behavior.
        *
        * @default true

package/lib/components/flyout/flyout_menu.js

@@ -48,7 +48,8 @@ var BackButton = function BackButton(props) {
   return (0, _react2.jsx)(_button.EuiButtonEmpty, _extends({
     size: "xs",
     color: "text",
-    iconType: "editorUndo"
+    iconType: "editorUndo",
+    "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiFlyoutMenu.back",
     default: "Back"
@@ -67,7 +68,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
     button: (0, _react2.jsx)(_button.EuiButtonIcon, {
       iconType: "arrowDown",
       color: "text",
-      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History')
+      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History'),
+      "data-test-subj": "euiFlyoutMenuHistoryButton"
     }),
     isOpen: isPopoverOpen,
     onClick: handlePopoverButtonClick,
@@ -86,7 +88,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);
-      }
+      },
+      "data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
     }, item.title);
   })));
 };

package/lib/components/popover/popover.js

@@ -121,7 +121,9 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "closingTransitionAnimationFrame", void 0);
     _defineProperty(_this, "button", null);
     _defineProperty(_this, "panel", null);
-    _defineProperty(_this, "descriptionId", (0, _services.htmlIdGenerator)()());
+    _defineProperty(_this, "idGenerator", (0, _services.htmlIdGenerator)('euiPopover'));
+    _defineProperty(_this, "panelId", _this.idGenerator('panelId'));
+    _defineProperty(_this, "descriptionId", _this.idGenerator('descriptionId'));
     _defineProperty(_this, "closePopover", function () {
       if (_this.props.isOpen) {
         _this.props.closePopover();
@@ -135,6 +137,19 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         _this.handleStrandedFocus();
       }
     });
+    _defineProperty(_this, "getFocusableToggleButton", function () {
+      if (_this.button) {
+        try {
+          var focusableItems = (0, _tabbable.focusable)(_this.button);
+          if (focusableItems.length) {
+            return focusableItems[0];
+          }
+        } catch (_unused) {
+          // tabbable's focusable() can throw in environments that don't
+          // fully support CSS selector parsing (e.g. jsdom with :has())
+        }
+      }
+    });
     _defineProperty(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
         var _this$panel;
@@ -144,11 +159,10 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         // it will be on the panel instead on mount when isOpen=true
         if (document.activeElement === document.body || (_this$panel = _this.panel) !== null && _this$panel !== void 0 && _this$panel.contains(document.activeElement) // if focus is on OR within this.panel
         ) {
-          if (!_this.button) return;
-          var focusableItems = (0, _tabbable.focusable)(_this.button);
-          if (!focusableItems.length) return;
-          var toggleButton = focusableItems[0];
-          toggleButton.focus(returnFocusConfig);
+          var toggleButton = _this.getFocusableToggleButton();
+          if (toggleButton) {
+            toggleButton.focus(returnFocusConfig);
+          }
         }
       }, closingTransitionTime);
     });
@@ -204,6 +218,25 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         });
       }, durationMatch + delayMatch);
     });
+    /**
+     * Updates ARIA attributes on the popover trigger button
+     * Only applies ARIA when the trigger is button-like (semantic <button> or role="button").
+     * Avoids adding incorrect ARIA on inputs or other non-button elements.
+     */
+    _defineProperty(_this, "updateTriggerButtonAriaAttributes", function (toggleButton, isOpen) {
+      var _toggleButton$tagName, _toggleButton$getAttr;
+      if (!toggleButton) return;
+      var tag = (_toggleButton$tagName = toggleButton.tagName) === null || _toggleButton$tagName === void 0 ? void 0 : _toggleButton$tagName.toLowerCase();
+      var role = (_toggleButton$getAttr = toggleButton.getAttribute('role')) === null || _toggleButton$getAttr === void 0 ? void 0 : _toggleButton$getAttr.toLowerCase();
+      var isButtonLike = tag === 'button' || role === 'button';
+      if (!isButtonLike) return;
+      toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+      if (isOpen) {
+        toggleButton.setAttribute('aria-controls', _this.panelId);
+      } else {
+        toggleButton.removeAttribute('aria-controls');
+      }
+    });
     _defineProperty(_this, "onMutation", function (records) {
       var waitDuration = (0, _services.getWaitDuration)(records);
       _this.positionPopoverFixed();
@@ -323,7 +356,8 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
   return _createClass(EuiPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
+      var _this2 = this,
+        _this$props$isOpen;
       if (this.state.suppressingPopover) {
         // component was created with isOpen=true; now that it's mounted
         // stop suppressing and start opening
@@ -334,6 +368,7 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           _this2.onOpenPopover();
         });
       }
+      this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : false);
       this.repositionOnScroll.subscribe();
     }
   }, {
@@ -345,6 +380,12 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         this.onOpenPopover();
       }
 
+      // Update ARIA attributes on the toggle when open state changes
+      if (prevProps.isOpen !== this.props.isOpen) {
+        var _this$props$isOpen2;
+        this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen2 = this.props.isOpen) !== null && _this$props$isOpen2 !== void 0 ? _this$props$isOpen2 : false);
+      }
+
       // ensure recalculation of panel position on prop updates
       if (this.props.isOpen && (prevProps.anchorPosition !== this.props.anchorPosition || prevProps.buffer !== this.props.buffer || prevProps.offset !== this.props.offset || prevProps.panelPaddingSize !== this.props.panelPaddingSize)) {
         this.positionPopoverFluid();
@@ -464,7 +505,9 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, _extends({}, panelProps, {
+        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, _extends({
+          id: this.panelId
+        }, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,
@@ -654,7 +697,7 @@ EuiPopover.propTypes = {
      * however, the popover will attempt to reposition itself along the secondary
      * cross axis if there is room there instead.
      *
-     * If you do not not want this repositioning to occur (and it is acceptable for
+     * If you do not want this repositioning to occur (and it is acceptable for
      * the popover to appear offscreen), set this to false to disable this behavior.
      *
      * @default true

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

@@ -39,7 +39,8 @@ var BackButton = function BackButton(props) {
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     size: "xs",
     color: "text",
-    iconType: "editorUndo"
+    iconType: "editorUndo",
+    "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), ___EmotionJSX(EuiI18n, {
     token: "euiFlyoutMenu.back",
     default: "Back"
@@ -58,7 +59,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
     button: ___EmotionJSX(EuiButtonIcon, {
       iconType: "arrowDown",
       color: "text",
-      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History')
+      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History'),
+      "data-test-subj": "euiFlyoutMenuHistoryButton"
     }),
     isOpen: isPopoverOpen,
     onClick: handlePopoverButtonClick,
@@ -77,7 +79,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);
-      }
+      },
+      "data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
     }, item.title);
   })));
 };

package/optimize/es/components/popover/popover.js

@@ -96,7 +96,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "closingTransitionAnimationFrame", void 0);
     _defineProperty(_this, "button", null);
     _defineProperty(_this, "panel", null);
-    _defineProperty(_this, "descriptionId", htmlIdGenerator()());
+    _defineProperty(_this, "idGenerator", htmlIdGenerator('euiPopover'));
+    _defineProperty(_this, "panelId", _this.idGenerator('panelId'));
+    _defineProperty(_this, "descriptionId", _this.idGenerator('descriptionId'));
     _defineProperty(_this, "closePopover", function () {
       if (_this.props.isOpen) {
         _this.props.closePopover();
@@ -110,6 +112,19 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         _this.handleStrandedFocus();
       }
     });
+    _defineProperty(_this, "getFocusableToggleButton", function () {
+      if (_this.button) {
+        try {
+          var focusableItems = focusable(_this.button);
+          if (focusableItems.length) {
+            return focusableItems[0];
+          }
+        } catch (_unused) {
+          // tabbable's focusable() can throw in environments that don't
+          // fully support CSS selector parsing (e.g. jsdom with :has())
+        }
+      }
+    });
     _defineProperty(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
         var _this$panel;
@@ -119,11 +134,10 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         // it will be on the panel instead on mount when isOpen=true
         if (document.activeElement === document.body || (_this$panel = _this.panel) !== null && _this$panel !== void 0 && _this$panel.contains(document.activeElement) // if focus is on OR within this.panel
         ) {
-          if (!_this.button) return;
-          var focusableItems = focusable(_this.button);
-          if (!focusableItems.length) return;
-          var toggleButton = focusableItems[0];
-          toggleButton.focus(returnFocusConfig);
+          var toggleButton = _this.getFocusableToggleButton();
+          if (toggleButton) {
+            toggleButton.focus(returnFocusConfig);
+          }
         }
       }, closingTransitionTime);
     });
@@ -179,6 +193,25 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         });
       }, durationMatch + delayMatch);
     });
+    /**
+     * Updates ARIA attributes on the popover trigger button
+     * Only applies ARIA when the trigger is button-like (semantic <button> or role="button").
+     * Avoids adding incorrect ARIA on inputs or other non-button elements.
+     */
+    _defineProperty(_this, "updateTriggerButtonAriaAttributes", function (toggleButton, isOpen) {
+      var _toggleButton$tagName, _toggleButton$getAttr;
+      if (!toggleButton) return;
+      var tag = (_toggleButton$tagName = toggleButton.tagName) === null || _toggleButton$tagName === void 0 ? void 0 : _toggleButton$tagName.toLowerCase();
+      var role = (_toggleButton$getAttr = toggleButton.getAttribute('role')) === null || _toggleButton$getAttr === void 0 ? void 0 : _toggleButton$getAttr.toLowerCase();
+      var isButtonLike = tag === 'button' || role === 'button';
+      if (!isButtonLike) return;
+      toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+      if (isOpen) {
+        toggleButton.setAttribute('aria-controls', _this.panelId);
+      } else {
+        toggleButton.removeAttribute('aria-controls');
+      }
+    });
     _defineProperty(_this, "onMutation", function (records) {
       var waitDuration = getWaitDuration(records);
       _this.positionPopoverFixed();
@@ -298,7 +331,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
   return _createClass(EuiPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
+      var _this2 = this,
+        _this$props$isOpen;
       if (this.state.suppressingPopover) {
         // component was created with isOpen=true; now that it's mounted
         // stop suppressing and start opening
@@ -309,6 +343,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           _this2.onOpenPopover();
         });
       }
+      this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : false);
       this.repositionOnScroll.subscribe();
     }
   }, {
@@ -320,6 +355,12 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         this.onOpenPopover();
       }
 
+      // Update ARIA attributes on the toggle when open state changes
+      if (prevProps.isOpen !== this.props.isOpen) {
+        var _this$props$isOpen2;
+        this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen2 = this.props.isOpen) !== null && _this$props$isOpen2 !== void 0 ? _this$props$isOpen2 : false);
+      }
+
       // ensure recalculation of panel position on prop updates
       if (this.props.isOpen && (prevProps.anchorPosition !== this.props.anchorPosition || prevProps.buffer !== this.props.buffer || prevProps.offset !== this.props.offset || prevProps.panelPaddingSize !== this.props.panelPaddingSize)) {
         this.positionPopoverFluid();
@@ -439,7 +480,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {
+        }, focusTrapProps), ___EmotionJSX(EuiPopoverPanel, _extends({
+          id: this.panelId
+        }, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,

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

@@ -45,7 +45,8 @@ var BackButton = function BackButton(props) {
   return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
     size: "xs",
     color: "text",
-    iconType: "editorUndo"
+    iconType: "editorUndo",
+    "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiFlyoutMenu.back",
     default: "Back"
@@ -64,7 +65,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
     button: (0, _react2.jsx)(_button.EuiButtonIcon, {
       iconType: "arrowDown",
       color: "text",
-      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History')
+      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History'),
+      "data-test-subj": "euiFlyoutMenuHistoryButton"
     }),
     isOpen: isPopoverOpen,
     onClick: handlePopoverButtonClick,
@@ -83,7 +85,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);
-      }
+      },
+      "data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
     }, item.title);
   })));
 };

package/optimize/lib/components/popover/popover.js

@@ -106,7 +106,9 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "closingTransitionAnimationFrame", void 0);
     (0, _defineProperty2.default)(_this, "button", null);
     (0, _defineProperty2.default)(_this, "panel", null);
-    (0, _defineProperty2.default)(_this, "descriptionId", (0, _services.htmlIdGenerator)()());
+    (0, _defineProperty2.default)(_this, "idGenerator", (0, _services.htmlIdGenerator)('euiPopover'));
+    (0, _defineProperty2.default)(_this, "panelId", _this.idGenerator('panelId'));
+    (0, _defineProperty2.default)(_this, "descriptionId", _this.idGenerator('descriptionId'));
     (0, _defineProperty2.default)(_this, "closePopover", function () {
       if (_this.props.isOpen) {
         _this.props.closePopover();
@@ -120,6 +122,19 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         _this.handleStrandedFocus();
       }
     });
+    (0, _defineProperty2.default)(_this, "getFocusableToggleButton", function () {
+      if (_this.button) {
+        try {
+          var focusableItems = (0, _tabbable.focusable)(_this.button);
+          if (focusableItems.length) {
+            return focusableItems[0];
+          }
+        } catch (_unused) {
+          // tabbable's focusable() can throw in environments that don't
+          // fully support CSS selector parsing (e.g. jsdom with :has())
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
         var _this$panel;
@@ -129,11 +144,10 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         // it will be on the panel instead on mount when isOpen=true
         if (document.activeElement === document.body || (_this$panel = _this.panel) !== null && _this$panel !== void 0 && _this$panel.contains(document.activeElement) // if focus is on OR within this.panel
         ) {
-          if (!_this.button) return;
-          var focusableItems = (0, _tabbable.focusable)(_this.button);
-          if (!focusableItems.length) return;
-          var toggleButton = focusableItems[0];
-          toggleButton.focus(returnFocusConfig);
+          var toggleButton = _this.getFocusableToggleButton();
+          if (toggleButton) {
+            toggleButton.focus(returnFocusConfig);
+          }
         }
       }, closingTransitionTime);
     });
@@ -189,6 +203,25 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         });
       }, durationMatch + delayMatch);
     });
+    /**
+     * Updates ARIA attributes on the popover trigger button
+     * Only applies ARIA when the trigger is button-like (semantic <button> or role="button").
+     * Avoids adding incorrect ARIA on inputs or other non-button elements.
+     */
+    (0, _defineProperty2.default)(_this, "updateTriggerButtonAriaAttributes", function (toggleButton, isOpen) {
+      var _toggleButton$tagName, _toggleButton$getAttr;
+      if (!toggleButton) return;
+      var tag = (_toggleButton$tagName = toggleButton.tagName) === null || _toggleButton$tagName === void 0 ? void 0 : _toggleButton$tagName.toLowerCase();
+      var role = (_toggleButton$getAttr = toggleButton.getAttribute('role')) === null || _toggleButton$getAttr === void 0 ? void 0 : _toggleButton$getAttr.toLowerCase();
+      var isButtonLike = tag === 'button' || role === 'button';
+      if (!isButtonLike) return;
+      toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+      if (isOpen) {
+        toggleButton.setAttribute('aria-controls', _this.panelId);
+      } else {
+        toggleButton.removeAttribute('aria-controls');
+      }
+    });
     (0, _defineProperty2.default)(_this, "onMutation", function (records) {
       var waitDuration = (0, _services.getWaitDuration)(records);
       _this.positionPopoverFixed();
@@ -308,7 +341,8 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
   return (0, _createClass2.default)(EuiPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
+      var _this2 = this,
+        _this$props$isOpen;
       if (this.state.suppressingPopover) {
         // component was created with isOpen=true; now that it's mounted
         // stop suppressing and start opening
@@ -319,6 +353,7 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           _this2.onOpenPopover();
         });
       }
+      this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : false);
       this.repositionOnScroll.subscribe();
     }
   }, {
@@ -330,6 +365,12 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         this.onOpenPopover();
       }
 
+      // Update ARIA attributes on the toggle when open state changes
+      if (prevProps.isOpen !== this.props.isOpen) {
+        var _this$props$isOpen2;
+        this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen2 = this.props.isOpen) !== null && _this$props$isOpen2 !== void 0 ? _this$props$isOpen2 : false);
+      }
+
       // ensure recalculation of panel position on prop updates
       if (this.props.isOpen && (prevProps.anchorPosition !== this.props.anchorPosition || prevProps.buffer !== this.props.buffer || prevProps.offset !== this.props.offset || prevProps.panelPaddingSize !== this.props.panelPaddingSize)) {
         this.positionPopoverFluid();
@@ -449,7 +490,9 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
+        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({
+          id: this.panelId
+        }, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "113.0.0",
+  "version": "113.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -21,6 +21,7 @@
     "build:i18ntokens": "node ./scripts/build_i18ntokens.mjs",
     "build": "yarn build:clean && yarn build:i18ntokens && node ./scripts/compile-eui.js",
     "build-pack": "yarn build && yarn pack",
+    "watch": "node ../../scripts/watch-eui.js --package @elastic/eui",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
     "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix",
@@ -52,7 +53,7 @@
     "directory": "packages/eui"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "8.0.0",
+    "@elastic/eui-theme-common": "8.1.0",
     "@elastic/prismjs-esql": "^1.1.2",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
@@ -107,7 +108,7 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "6.0.0",
+    "@elastic/eui-theme-borealis": "6.1.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -167,8 +168,6 @@
     "buffer": "^6.0.3",
     "buildkite-test-collector": "^1.7.2",
     "cache-loader": "^4.1.0",
-    "chalk": "^4.1.0",
-    "chokidar": "^3.4.2",
     "circular-dependency-plugin": "^5.2.2",
     "codesandbox": "^2.1.16",
     "core-js": "^3.6.5",
@@ -257,7 +256,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "6.0.0",
+    "@elastic/eui-theme-borealis": "6.1.0",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^17.0 || ^18.0",

package/test-env/components/breadcrumbs/_breadcrumb_content.js

@@ -246,7 +246,7 @@ EuiBreadcrumbContent.propTypes = {
        * however, the popover will attempt to reposition itself along the secondary
        * cross axis if there is room there instead.
        *
-       * If you do not not want this repositioning to occur (and it is acceptable for
+       * If you do not want this repositioning to occur (and it is acceptable for
        * the popover to appear offscreen), set this to false to disable this behavior.
        *
        * @default true

package/test-env/components/flyout/flyout_menu.js

@@ -46,7 +46,8 @@ var BackButton = function BackButton(props) {
   return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
     size: "xs",
     color: "text",
-    iconType: "editorUndo"
+    iconType: "editorUndo",
+    "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiFlyoutMenu.back",
     default: "Back"
@@ -65,7 +66,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
     button: (0, _react2.jsx)(_button.EuiButtonIcon, {
       iconType: "arrowDown",
       color: "text",
-      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History')
+      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History'),
+      "data-test-subj": "euiFlyoutMenuHistoryButton"
     }),
     isOpen: isPopoverOpen,
     onClick: handlePopoverButtonClick,
@@ -84,7 +86,8 @@ var HistoryPopover = function HistoryPopover(_ref) {
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);
-      }
+      },
+      "data-test-subj": "euiFlyoutMenuHistoryItem-".concat(index)
     }, item.title);
   })));
 };

package/test-env/components/popover/popover.js

@@ -107,7 +107,9 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "closingTransitionAnimationFrame", void 0);
     (0, _defineProperty2.default)(_this, "button", null);
     (0, _defineProperty2.default)(_this, "panel", null);
-    (0, _defineProperty2.default)(_this, "descriptionId", (0, _services.htmlIdGenerator)()());
+    (0, _defineProperty2.default)(_this, "idGenerator", (0, _services.htmlIdGenerator)('euiPopover'));
+    (0, _defineProperty2.default)(_this, "panelId", _this.idGenerator('panelId'));
+    (0, _defineProperty2.default)(_this, "descriptionId", _this.idGenerator('descriptionId'));
     (0, _defineProperty2.default)(_this, "closePopover", function () {
       if (_this.props.isOpen) {
         _this.props.closePopover();
@@ -121,6 +123,19 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         _this.handleStrandedFocus();
       }
     });
+    (0, _defineProperty2.default)(_this, "getFocusableToggleButton", function () {
+      if (_this.button) {
+        try {
+          var focusableItems = (0, _tabbable.focusable)(_this.button);
+          if (focusableItems.length) {
+            return focusableItems[0];
+          }
+        } catch (_unused) {
+          // tabbable's focusable() can throw in environments that don't
+          // fully support CSS selector parsing (e.g. jsdom with :has())
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
         var _this$panel;
@@ -130,11 +145,10 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         // it will be on the panel instead on mount when isOpen=true
         if (document.activeElement === document.body || (_this$panel = _this.panel) !== null && _this$panel !== void 0 && _this$panel.contains(document.activeElement) // if focus is on OR within this.panel
         ) {
-          if (!_this.button) return;
-          var focusableItems = (0, _tabbable.focusable)(_this.button);
-          if (!focusableItems.length) return;
-          var toggleButton = focusableItems[0];
-          toggleButton.focus(returnFocusConfig);
+          var toggleButton = _this.getFocusableToggleButton();
+          if (toggleButton) {
+            toggleButton.focus(returnFocusConfig);
+          }
         }
       }, closingTransitionTime);
     });
@@ -190,6 +204,25 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         });
       }, durationMatch + delayMatch);
     });
+    /**
+     * Updates ARIA attributes on the popover trigger button
+     * Only applies ARIA when the trigger is button-like (semantic <button> or role="button").
+     * Avoids adding incorrect ARIA on inputs or other non-button elements.
+     */
+    (0, _defineProperty2.default)(_this, "updateTriggerButtonAriaAttributes", function (toggleButton, isOpen) {
+      var _toggleButton$tagName, _toggleButton$getAttr;
+      if (!toggleButton) return;
+      var tag = (_toggleButton$tagName = toggleButton.tagName) === null || _toggleButton$tagName === void 0 ? void 0 : _toggleButton$tagName.toLowerCase();
+      var role = (_toggleButton$getAttr = toggleButton.getAttribute('role')) === null || _toggleButton$getAttr === void 0 ? void 0 : _toggleButton$getAttr.toLowerCase();
+      var isButtonLike = tag === 'button' || role === 'button';
+      if (!isButtonLike) return;
+      toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+      if (isOpen) {
+        toggleButton.setAttribute('aria-controls', _this.panelId);
+      } else {
+        toggleButton.removeAttribute('aria-controls');
+      }
+    });
     (0, _defineProperty2.default)(_this, "onMutation", function (records) {
       var waitDuration = (0, _services.getWaitDuration)(records);
       _this.positionPopoverFixed();
@@ -309,7 +342,8 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
   return (0, _createClass2.default)(EuiPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
+      var _this2 = this,
+        _this$props$isOpen;
       if (this.state.suppressingPopover) {
         // component was created with isOpen=true; now that it's mounted
         // stop suppressing and start opening
@@ -320,6 +354,7 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           _this2.onOpenPopover();
         });
       }
+      this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : false);
       this.repositionOnScroll.subscribe();
     }
   }, {
@@ -331,6 +366,12 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
         this.onOpenPopover();
       }
 
+      // Update ARIA attributes on the toggle when open state changes
+      if (prevProps.isOpen !== this.props.isOpen) {
+        var _this$props$isOpen2;
+        this.updateTriggerButtonAriaAttributes(this.getFocusableToggleButton(), (_this$props$isOpen2 = this.props.isOpen) !== null && _this$props$isOpen2 !== void 0 ? _this$props$isOpen2 : false);
+      }
+
       // ensure recalculation of panel position on prop updates
       if (this.props.isOpen && (prevProps.anchorPosition !== this.props.anchorPosition || prevProps.buffer !== this.props.buffer || prevProps.offset !== this.props.offset || prevProps.panelPaddingSize !== this.props.panelPaddingSize)) {
         this.positionPopoverFluid();
@@ -450,7 +491,9 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
+        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({
+          id: this.panelId
+        }, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,
@@ -640,7 +683,7 @@ EuiPopover.propTypes = {
      * however, the popover will attempt to reposition itself along the secondary
      * cross axis if there is room there instead.
      *
-     * If you do not not want this repositioning to occur (and it is acceptable for
+     * If you do not want this repositioning to occur (and it is acceptable for
      * the popover to appear offscreen), set this to false to disable this behavior.
      *
      * @default true