@elastic/eui 90.0.0 → 91.0.0

package/optimize/lib/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -76,9 +76,11 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
     setPopoverIsOpen(false);
     _closePopover && _closePopover();
   };
-  var togglePopover = function togglePopover() {
-    setPopoverIsOpen(!popoverIsOpen);
-  };
+  var togglePopover = (0, _react.useCallback)(function () {
+    setPopoverIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
 
   // Width applied to the internal div
   var popoverWidth = width || 600;
@@ -153,16 +155,16 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
     if (!currentBreakpoint) return false;
     return popoverButtonBreakpoints.includes(currentBreakpoint);
   }, [currentBreakpoint, popoverButtonBreakpoints]);
-  var popoverTrigger;
-  if (popoverButton && canShowPopoverButton) {
-    popoverTrigger = /*#__PURE__*/_react.default.cloneElement(popoverButton, _objectSpread(_objectSpread({}, popoverButton.props), {}, {
+  var popoverTrigger = (0, _react.useMemo)(function () {
+    if (!popoverButton || !canShowPopoverButton) return;
+    return (0, _react2.jsx)("span", {
+      className: "euiSelectableTemplateSitewide__popoverTrigger",
       onClick: togglePopover,
       onKeyDown: function onKeyDown(e) {
-        // Selectable preventsDefault on Enter which kills browser controls for pressing the button
-        e.stopPropagation();
+        return e.stopPropagation();
       }
-    }));
-  }
+    }, popoverButton);
+  }, [popoverButton, canShowPopoverButton, togglePopover]);
   return (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
     isLoading: isLoading,
     options: formattedOptions,

package/optimize/lib/components/toast/global_toast_list.js

@@ -275,7 +275,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = (0, _classnames.default)('euiGlobalToastList', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes

package/optimize/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/optimize/lib/services/color/eui_palettes.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color_palette = require("./color_palette");
@@ -161,14 +161,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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/lib/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 require("@testing-library/jest-dom");
@@ -123,7 +123,7 @@ var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
 exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
 var showEuiComboBoxOptions = /*#__PURE__*/function () {
@@ -149,4 +149,42 @@ var showEuiComboBoxOptions = /*#__PURE__*/function () {
     return _ref5.apply(this, arguments);
   };
 }();
-exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+
+/**
+ * EuiContextMenu
+ */
+exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
+  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+    var getPanels;
+    return _regenerator.default.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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "90.0.0",
+  "version": "91.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -121,13 +121,13 @@
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/blocks": "^7.3.1",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-webpack5": "^7.3.1",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -192,7 +192,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -238,7 +238,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^7.3.1",
+    "storybook": "^7.5.2",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/components/combo_box/_combo_box.scss

@@ -45,9 +45,32 @@
       height: auto;  /* 3 */
       flex-wrap: wrap; /* 1 */
       align-content: flex-start;
+      cursor: text;
+    }
+
+    &.euiComboBox__inputWrap--noWrap {
+      align-items: center;
+    }
+
+    // Match placeholder and plain text position to EuiFieldText
+    &.euiComboBox__inputWrap--plainText {
+      padding-inline-start: $euiSizeS;
+    }
+
+    .euiComboBoxPlainTextSelection {
+      &__prepend,
+      &__append {
+        flex-shrink: 0;
+        margin-inline: $euiSizeXS / 2;
+        display: flex; /* Vertically centers any icons */
+      }
+
+      &__prepend {
+        margin-inline-start: $euiSizeXS;
+      }
 
-      &:hover {
-        cursor: text;
+      &__append {
+        margin-inline-end: $euiSizeXS;
       }
     }
   }
@@ -56,6 +79,7 @@
    * 1. Force field height to match other field heights.
    * 2. Force input height to expand to fill this element.
    * 3. Reset input appearance to mimic text
+   * 4. Ensure that no input states are visible on the hidden input
    */
   .euiComboBox__input {
     block-size: $euiSizeL; /* 2 */
@@ -64,11 +88,20 @@
     margin: $euiSizeXS;
 
     /* 3 */
-    appearance: none;
-    outline: none;
-    border: none;
     background: transparent;
-    color: $euiTextColor;
+    @include euiFormControlText;
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    /* 4 */
+    // stylelint-disable declaration-no-important
+    appearance: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+    // stylelint-enable declaration-no-important
   }
 
   &.euiComboBox-isOpen {
@@ -94,13 +127,9 @@
       -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
     }
 
-    .euiComboBoxPlaceholder,
-    .euiComboBoxPill--plainText {
-      @include euiFormControlDisabledTextStyle;
-    }
-
     // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
-    .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+    .euiComboBox__inputWrap,
+    .euiComboBoxPill {
       cursor: not-allowed;
     }
   }
@@ -108,8 +137,11 @@
   &.euiComboBox--compressed {
     .euiComboBox__inputWrap {
       line-height: $euiFormControlCompressedHeight; /* 2 */
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-block: 0;
+
+      &--plainText {
+        padding-inline-start: $euiSizeXS;
+      }
     }
   }
 }

package/src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -18,22 +18,6 @@
     margin: ($euiSizeXS + 1px) $euiSizeXS 0 0;
   }
 
-  .euiComboBox--compressed &--plainText {
-    margin-top: $euiSizeXS;
-  }
-
-  &--plainText {
-    @include euiFont;
-
-    line-height: $euiSizeL;
-    font-size: $euiFontSizeS;
-    padding: 0;
-    color: $euiTextColor;
-    vertical-align: middle;
-    display: inline-flex;
-    align-items: center;
-  }
-
   &__prepend {
     margin-right: $euiSizeXS;
   }
@@ -43,7 +27,6 @@
   }
 
   /* Fix append/prepend vertical alignment */
-  &--plainText,
   .euiBadge__text {
     display: flex;
     align-items: center;

package/src/components/combo_box/combo_box_input/_index.scss

@@ -1,3 +1 @@
-@import 'combo_box_input';
 @import 'combo_box_pill';
-@import 'combo_box_placeholder';

package/src/components/datagrid/_data_grid_data_row.scss

@@ -124,8 +124,7 @@
 .euiDataGridRowCell__numericalHeight {
   // Without this rule, popover anchors content that overflows off the page
   [data-euiportal],
-  .euiPopover,
-  .euiPopover__anchor {
+  .euiPopover {
     height: 100%;
   }
 }

package/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss

@@ -1,3 +1,24 @@
 .euiSuperDatePicker__absoluteDateFormRow {
   padding: 0 $euiSizeS $euiSizeS;
+
+  /* A bit of a visual trickery to make the format "hint" become an "error" text.
+     NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
+     but as the help text is already read out via `aria-describedby`, and the error text
+     is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
+  .euiFormRow__fieldWrapper {
+    display: flex;
+    flex-direction: column;
+  };
+
+  .euiFormControlLayout {
+    order: 0;
+  }
+
+  .euiFormHelpText {
+    order: 1;
+  }
+
+  .euiFormErrorText {
+    order: 2;
+  }
 }

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -29,10 +29,6 @@
   gap: $euiSizeXS;
 }
 
-.euiQuickSelectPopover__anchor {
-  height: 100%;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;

package/src/components/form/form_control_layout/_form_control_layout.scss

@@ -49,7 +49,6 @@
 
   // Force the stretch of any children so they expand the full height of the control
   > *,
-  .euiPopover__anchor,
   .euiButtonEmpty,
   .euiText,
   .euiFormLabel,

package/src/global_styling/variables/_typography.scss

@@ -1,6 +1,6 @@
 // Families
-$euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
+$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
+$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;

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

@@ -24,7 +24,7 @@ var _accordion_trigger = require("./accordion_trigger");
 var _accordion_children = require("./accordion_children");
 var _accordion = require("./accordion.styles");
 var _react2 = require("@emotion/react");
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -106,6 +106,7 @@ 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,
@@ -151,6 +152,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? (0, _react2.jsx)(_loading.EuiLoadingSpinner, null) : extraAction
       }), (0, _react2.jsx)(_accordion_children.EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -173,7 +175,8 @@ exports.EuiAccordionClass = EuiAccordionClass;
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 EuiAccordionClass.propTypes = {
   className: _propTypes.default.string,
@@ -186,6 +189,14 @@ EuiAccordionClass.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: _propTypes.default.oneOf(["div", "fieldset"]),
+  /**
+       * Defaults to the [group role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role).
+       *
+       * If your accordion contains significant enough content to be a document
+       * [landmark role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role#accessibility_concerns), consider using the `region` role instead.
+       * @default group
+       */
+  role: _propTypes.default.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */

package/test-env/components/accordion/accordion_children/accordion_children.js

@@ -17,7 +17,7 @@ var _resize_observer = require("../../observer/resize_observer");
 var _accordion_children_loading = require("./accordion_children_loading");
 var _accordion_children = require("./accordion_children.styles");
 var _react2 = require("@emotion/react");
-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
@@ -28,7 +28,8 @@ var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading",
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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,
@@ -73,7 +74,7 @@ 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/test-env/components/breadcrumbs/breadcrumb.js

@@ -182,6 +182,8 @@ EuiBreadcrumbContent.propTypes = {
   popoverProps: _propTypes.default.shape({
     /**
        * Class name passed to the direct parent of the button
+       *
+       * @deprecated Use `className` instead
        */
     anchorClassName: _propTypes.default.string,
     /**
@@ -193,6 +195,9 @@ EuiBreadcrumbContent.propTypes = {
        * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: _propTypes.default.bool,
+    /**
+       * @deprecated Use `popoverRef` instead
+       */
     buttonRef: _propTypes.default.any,
     /**
        * Restrict the popover's position within this element
@@ -261,11 +266,6 @@ EuiBreadcrumbContent.propTypes = {
          */
       grow: _propTypes.default.bool,
       panelRef: _propTypes.default.any,
-      /**
-         * Background color of the panel;
-         * Usually a lightened form of the brand colors
-         */
-      color: _propTypes.default.any,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,

package/test-env/components/button/button_display/_button_display.js

@@ -123,7 +123,7 @@ exports.EuiButtonDisplay = EuiButtonDisplay;
 EuiButtonDisplay.propTypes = {
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
-  element: _propTypes.default.oneOf(["a", "button", "span", "label"]),
+  element: _propTypes.default.oneOf(["a", "button", "span"]),
   children: _propTypes.default.node,
   size: _propTypes.default.any,
   /**