@elastic/eui 90.0.0 → 91.0.0

package/lib/components/toast/global_toast_list.js

@@ -284,7 +284,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = (0, _classnames.default)('euiGlobalToastList', className);
   return (0, _react2.jsx)("div", _extends({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes
@@ -322,6 +322,16 @@ EuiGlobalToastList.propTypes = {
      * Optional callback that fires when a user clicks the "Clear all" button.
      */
   onClearAllToasts: _propTypes.default.func,
+  /**
+     * Defaults to the [log role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/log_role).
+     *
+     * The [alert role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)
+     * can be considered only if *all* toasts in this list will require immediate user attention.
+     * Several alerts at once, and unnecessary alerts, will a create bad screen reader user experience.
+     *
+     * @default log
+     */
+  role: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/global_styling/mixins/_states.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiFocusRing = exports.euiOutline = exports.euiFocusRing = void 0;
 var _services = require("../../services");
+var _functions = require("../functions");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,7 +36,9 @@ var euiOutline = function euiOutline(_ref) {
   } else if (offset === 'outset') {
     outlineOffset = "".concat(outlineWidth);
   } else if (offset === 'center') {
-    outlineOffset = "calc(".concat(outlineWidth, " / -2);");
+    outlineOffset = (0, _functions.mathWithUnits)(outlineWidth, function (x) {
+      return x / -2;
+    });
   }
 
   // This is a separate function from `euiFocusRing` because some EUI components

package/lib/services/color/eui_palettes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplimentary = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
+exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color_palette = require("./color_palette");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -164,14 +164,7 @@ var euiPaletteComplementary = function euiPaletteComplementary(steps) {
   }
   return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
 };
-
-/**
- * The old typo'd name for this palette remains exported until the end of its deprecation period
- * @deprecated Use euiPaletteComplementary instead
- */
 exports.euiPaletteComplementary = euiPaletteComplementary;
-var euiPaletteComplimentary = euiPaletteComplementary;
-exports.euiPaletteComplimentary = euiPaletteComplimentary;
 var euiPaletteNegative = function euiPaletteNegative(steps) {
   if (steps === 1) {
     return [lightNegativeColor];

package/lib/services/color/index.js

@@ -23,7 +23,6 @@ var _exportNames = {
   euiPaletteColorBlindBehindText: true,
   euiPaletteForStatus: true,
   euiPaletteForTemperature: true,
-  euiPaletteComplimentary: true,
   euiPaletteComplementary: true,
   euiPaletteNegative: true,
   euiPalettePositive: true,
@@ -80,12 +79,6 @@ Object.defineProperty(exports, "euiPaletteComplementary", {
     return _eui_palettes.euiPaletteComplementary;
   }
 });
-Object.defineProperty(exports, "euiPaletteComplimentary", {
-  enumerable: true,
-  get: function get() {
-    return _eui_palettes.euiPaletteComplimentary;
-  }
-});
 Object.defineProperty(exports, "euiPaletteCool", {
   enumerable: true,
   get: function get() {

package/lib/services/hooks/useCombinedRefs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCombinedRefs = void 0;
+exports.useCombinedRefs = exports.setMultipleRefs = void 0;
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -22,14 +22,23 @@ var _react = require("react");
  */
 var useCombinedRefs = function useCombinedRefs(refs) {
   return (0, _react.useCallback)(function (node) {
-    return refs.forEach(function (ref) {
-      if (!ref) return;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    });
+    return setMultipleRefs(refs, node);
   }, [refs]);
 };
-exports.useCombinedRefs = useCombinedRefs;
+
+/**
+ * Non-hook util for setting multiple refs/ref types.
+ * Useful for non-functional components
+ */
+exports.useCombinedRefs = useCombinedRefs;
+var setMultipleRefs = function setMultipleRefs(refs, node) {
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
+      ref.current = node;
+    }
+  });
+};
+exports.setMultipleRefs = setMultipleRefs;

package/lib/services/index.js

@@ -27,7 +27,6 @@ var _exportNames = {
   desaturate: true,
   euiPaletteColorBlind: true,
   euiPaletteColorBlindBehindText: true,
-  euiPaletteComplimentary: true,
   euiPaletteComplementary: true,
   euiPaletteCool: true,
   euiPaletteForDarkBackground: true,
@@ -72,7 +71,6 @@ var _exportNames = {
   Pager: true,
   calculatePopoverPosition: true,
   findPopoverPosition: true,
-  Random: true,
   getSecureRelForTarget: true,
   Comparators: true,
   PropertySortType: true,
@@ -155,12 +153,6 @@ Object.defineProperty(exports, "RIGHT_ALIGNMENT", {
     return _alignment.RIGHT_ALIGNMENT;
   }
 });
-Object.defineProperty(exports, "Random", {
-  enumerable: true,
-  get: function get() {
-    return _random.Random;
-  }
-});
 Object.defineProperty(exports, "SortDirection", {
   enumerable: true,
   get: function get() {
@@ -257,12 +249,6 @@ Object.defineProperty(exports, "euiPaletteComplementary", {
     return _color.euiPaletteComplementary;
   }
 });
-Object.defineProperty(exports, "euiPaletteComplimentary", {
-  enumerable: true,
-  get: function get() {
-    return _color.euiPaletteComplimentary;
-  }
-});
 Object.defineProperty(exports, "euiPaletteCool", {
   enumerable: true,
   get: function get() {
@@ -643,7 +629,6 @@ Object.keys(_hooks).forEach(function (key) {
 var _number = require("./number");
 var _paging = require("./paging");
 var _popover = require("./popover");
-var _random = require("./random");
 var _security = require("./security");
 var _sort = require("./sort");
 var _string = require("./string");

package/lib/test/rtl/component_helpers.d.ts

@@ -10,3 +10,5 @@ export declare const waitForEuiToolTipVisible: () => Promise<void>;
 export declare const waitForEuiToolTipHidden: () => Promise<void>;
 
 export declare const showEuiComboBoxOptions: () => Promise<void>;
+
+export declare const waitForEuiContextMenuPanelTransition: () => Promise<void>;

package/lib/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.showEuiComboBoxOptions = void 0;
+exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.showEuiComboBoxOptions = void 0;
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
 var _custom_render = require("./custom_render");
@@ -122,7 +122,7 @@ var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
 exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
 var showEuiComboBoxOptions = /*#__PURE__*/function () {
@@ -148,4 +148,42 @@ var showEuiComboBoxOptions = /*#__PURE__*/function () {
     return _ref5.apply(this, arguments);
   };
 }();
-exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+
+/**
+ * EuiContextMenu
+ */
+exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    var getPanels;
+    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          // Used document instead of container or screen due to context menus living in portals
+          getPanels = function getPanels() {
+            return document.querySelectorAll('.euiContextMenuPanel');
+          }; // 2 panels will appear for the transition animation
+          _context6.next = 3;
+          return (0, _react.waitFor)(function () {
+            expect(getPanels().length).toEqual(2);
+          });
+        case 3:
+          // Outgoing panel will be removed on animation end
+          _react.fireEvent.animationEnd(getPanels()[0]);
+          if (getPanels().length > 1) {
+            _react.fireEvent.animationEnd(getPanels()[1]);
+          }
+
+          // Transition/animation is done once we're back to 1 panel
+          expect(getPanels().length).toEqual(1);
+        case 6:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  }));
+  return function waitForEuiContextMenuPanelTransition() {
+    return _ref6.apply(this, arguments);
+  };
+}();
+exports.waitForEuiContextMenuPanelTransition = waitForEuiContextMenuPanelTransition;

package/optimize/es/components/accordion/accordion.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "id", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
+var _excluded = ["children", "className", "id", "role", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -96,6 +96,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         className = _this$props3.className,
         id = _this$props3.id,
+        role = _this$props3.role,
         _this$props3$element = _this$props3.element,
         Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
         buttonElement = _this$props3.buttonElement,
@@ -141,6 +142,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? ___EmotionJSX(EuiLoadingSpinner, null) : extraAction
       }), ___EmotionJSX(EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -162,6 +164,7 @@ _defineProperty(EuiAccordionClass, "defaultProps", {
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 export var EuiAccordion = withEuiTheme(EuiAccordionClass);

package/optimize/es/components/accordion/accordion_children/accordion_children.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +18,8 @@ import { EuiAccordionChildrenLoading } from './accordion_children_loading';
 import { euiAccordionChildrenStyles, euiAccordionChildWrapperStyles } from './accordion_children.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
-  var children = _ref.children,
+  var role = _ref.role,
+    children = _ref.children,
     accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
@@ -63,7 +64,7 @@ export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
     css: wrapperCssStyles,
     style: heightInlineStyle,
     ref: accordionChildrenRef,
-    role: "region",
+    role: role,
     tabIndex: -1
     // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged
     ,

package/optimize/es/components/button/button_group/button_group.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelected
 
 import classNames from 'classnames';
 import React from 'react';
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiTheme } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
 import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
@@ -49,9 +49,6 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
-  var nameIfSingle = useGeneratedHtmlId({
-    conditionalId: name
-  });
   return ___EmotionJSX("fieldset", _extends({
     css: wrapperCssStyles,
     className: classes
@@ -63,15 +60,17 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
   }, options.map(function (option, index) {
     return ___EmotionJSX(EuiButtonGroupButton, _extends({
       key: index,
-      name: nameIfSingle,
       isDisabled: isDisabled
     }, option, {
-      element: typeIsSingle ? 'label' : 'button',
+      onClick: typeIsSingle ? function () {
+        return onChange(option.id, option.value);
+      } : function () {
+        return onChange(option.id);
+      },
       isSelected: typeIsSingle ? option.id === idSelected : idToSelectedMap[option.id],
       color: color,
       size: buttonSize,
-      isIconOnly: isIconOnly,
-      onChange: onChange
+      isIconOnly: isIconOnly
     }));
   })));
 };

package/optimize/es/components/button/button_group/button_group_button.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "name", "onChange", "size", "value", "color", "element", "type"];
+var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "value", "size", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,44 +26,11 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     label = _ref.label,
-    name = _ref.name,
-    _onChange = _ref.onChange,
-    size = _ref.size,
     value = _ref.value,
+    size = _ref.size,
     _ref$color = _ref.color,
     _color = _ref$color === void 0 ? 'primary' : _ref$color,
-    _ref$element = _ref.element,
-    _element = _ref$element === void 0 ? 'button' : _ref$element,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // Force element to be a button if disabled
-  var element = isDisabled ? 'button' : _element;
-  var elementProps = {};
-  var singleInput;
-  if (element === 'label') {
-    singleInput = ___EmotionJSX("input", {
-      className: "euiScreenReaderOnly",
-      name: name,
-      checked: isSelected,
-      disabled: isDisabled,
-      value: value,
-      type: "radio",
-      onChange: function onChange() {
-        return _onChange(id, value);
-      },
-      "data-test-subj": id
-    });
-  } else {
-    elementProps = {
-      'data-test-subj': id,
-      isSelected: isSelected,
-      type: type,
-      onClick: function onClick() {
-        return _onChange(id);
-      }
-    };
-  }
   var isCompressed = size === 'compressed';
   var color = isDisabled ? 'disabled' : _color;
   var display = isSelected ? 'fill' : isCompressed ? 'empty' : 'base';
@@ -93,7 +60,6 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   return ___EmotionJSX(EuiButtonDisplay, _extends({
     css: cssStyles,
     className: buttonClasses,
-    element: element,
     isDisabled: isDisabled,
     size: size === 'compressed' ? 's' : size,
     contentProps: {
@@ -104,6 +70,8 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       ref: buttonTextRef,
       'data-text': innerText
     },
-    title: innerText
-  }, elementProps, rest), singleInput, label);
+    title: innerText,
+    "data-test-subj": id,
+    isSelected: isSelected
+  }, rest), label);
 };

package/optimize/es/components/button/button_group/button_group_button.styles.js

@@ -50,22 +50,12 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
     }
   };
 };
-
-/**
- * Focus utilities - made complex by the two different button styles
- * and the fact that `label`/`input` combos need :focus-within,
- * but `button` does not
- */
-var _outlineSelectors = function _outlineSelectors(outlineCss) {
-  return /*#__PURE__*/css("&:is(button){&:focus-visible{", outlineCss, ";}}&:is(label){&:focus-within{", outlineCss, ";}@supports selector(:has(*)){/* Once all evergreen browsers support :has, we can remove\n           @supports and the outline: none reset just use this selector */&:focus-within{outline:none;}&:has(:focus-visible){", outlineCss, ";}}}");
-};
 export var _compressedButtonFocusColor = function _compressedButtonFocusColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme;
   var _euiButtonFillColor = euiButtonFillColor(euiThemeContext, color),
     backgroundColor = _euiButtonFillColor.backgroundColor;
-  return _outlineSelectors("outline: ".concat(euiTheme.focus.width, " solid ").concat(backgroundColor, ";"));
+  return /*#__PURE__*/css("&:focus-visible{", euiOutline(euiThemeContext, 'center', backgroundColor), " &:is(.euiButtonGroupButton-isSelected){outline-offset:0;}}");
 };
 export var _uncompressedButtonFocus = function _uncompressedButtonFocus(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return _outlineSelectors(euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade));
+  return /*#__PURE__*/css("&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";}");
 };

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js

@@ -11,7 +11,7 @@ var _excluded = ["items", "className", "wrapperProps"];
 
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiCollapsibleNavContext } from '../context';
 import { EuiCollapsibleNavItem, EuiCollapsibleNavSubItems } from '../collapsible_nav_item/collapsible_nav_item';
 import { EuiCollapsedNavPopover } from '../collapsible_nav_item/collapsed/collapsed_nav_popover';
@@ -33,16 +33,21 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavGroupStyles(euiTheme);
   var cssStyles = [styles.euiCollapsibleNavGroup, isPush && isCollapsed ? styles.euiCollapsibleNavGroup__title : styles.isWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  var labelledById = useGeneratedHtmlId();
   return ___EmotionJSX("div", _extends({}, wrapperProps, {
     className: classes,
     css: cssStyles
   }), isCollapsed && isPush ? ___EmotionJSX(EuiCollapsedNavPopover, _extends({
     className: classes,
     items: items
-  }, props)) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCollapsibleNavItem, _extends({}, props, {
+  }, props)) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCollapsibleNavItem, _extends({
+    id: labelledById
+  }, props, {
     css: styles.euiCollapsibleNavGroup__title
   })), ___EmotionJSX(EuiCollapsibleNavSubItems, {
     items: items,
-    isGroup: true
+    isGroup: true,
+    role: "group",
+    "aria-labelledby": props.id || labelledById
   })));
 };

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "header", "href", "items", "isSubItem", "isSelecte
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiCollapsibleNavSubItems } from './collapsible_nav_item';
 import { euiCollapsibleNavItemVariables } from './collapsible_nav_item.styles';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
@@ -44,10 +44,12 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
     }
   } : undefined; // Prevents Emotion from generating a selector if no styles need to be applied
 
+  var labelledById = useGeneratedHtmlId();
   return ___EmotionJSX("div", _extends({
     className: classes
   }, cssStyles, rest), ___EmotionJSX(EuiCollapsibleNavLink, _extends({
-    href: href
+    href: href,
+    id: labelledById
   }, linkProps, {
     isSelected: isSelected,
     isSubItem: isSubItem,
@@ -55,6 +57,8 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   }), header), ___EmotionJSX(EuiCollapsibleNavSubItems, {
     items: items,
     isSubItem: isSubItem,
-    className: "euiCollapsibleNavGroup__children"
+    className: "euiCollapsibleNavGroup__children",
+    role: "group",
+    "aria-labelledby": (linkProps === null || linkProps === void 0 ? void 0 : linkProps.id) || labelledById
   }));
 };

package/optimize/es/components/combo_box/combo_box.js

@@ -405,14 +405,16 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       var _this$props10 = _this.props,
         onSearchChange = _this$props10.onSearchChange,
         delimiter = _this$props10.delimiter;
-      if (onSearchChange) {
-        var _hasMatchingOptions = _this.state.matchingOptions.length > 0;
-        onSearchChange(searchValue, _hasMatchingOptions);
-      }
       _this.setState({
         searchValue: searchValue
       }, function () {
-        if (searchValue && _this.state.isListOpen === false) _this.openList();
+        if (searchValue && _this.state.isListOpen === false) {
+          _this.openList();
+        }
+        if (onSearchChange) {
+          var _hasMatchingOptions = _this.state.matchingOptions.length > 0;
+          onSearchChange(searchValue, _hasMatchingOptions);
+        }
       });
       if (delimiter && searchValue.endsWith(delimiter)) {
         _this.setCustomOptions(false);