@elastic/eui 90.0.0 → 91.1.0

package/optimize/lib/components/image/image.a11y.js

@@ -45,8 +45,7 @@ describe('EuiImage', function () {
       cy.checkAxe();
     });
     it('has zero violations on keyboard interaction', function () {
-      cy.realPress('Tab');
-      cy.get('button[data-test-subj="activateFullScreenButton"]').should('have.focus');
+      cy.get('button[data-test-subj="activateFullScreenButton"]').focus();
       cy.realPress('Enter');
       cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('exist');
       cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('have.focus');

package/optimize/lib/components/key_pad_menu/key_pad_menu.a11y.js

@@ -133,20 +133,20 @@ describe('EuiKeyPadMenu', function () {
     });
     it('has zero violations on item click', function () {
       cy.get('a[data-test-subj="cy-keypad-link-2"]').realClick();
-      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.attr', 'aria-current', 'true');
       cy.checkAxe();
     });
     it('has zero violations on item keypress', function () {
       cy.repeatRealPress('Tab', 3);
       cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.focus');
       cy.realPress('Space');
-      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.attr', 'aria-pressed', 'true');
       cy.checkAxe();
       cy.realPress(['Shift', 'Tab']);
-      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.focus');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.attr', 'aria-pressed', 'false');
       cy.realPress('Space');
-      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
-      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('not.have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').invoke('attr', 'aria-pressed').should('equal', 'true');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').invoke('attr', 'aria-pressed').should('equal', 'false');
       cy.checkAxe();
     });
   });

package/optimize/lib/components/link/external_link_icon.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiExternalLinkIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+var _icon = require("../icon");
+var _i18n = require("../i18n");
+var _accessibility = require("../accessibility");
+var _react2 = require("@emotion/react");
+var _excluded = ["target", "external"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/**
+ * DRY util for indicating external links both via icon and to
+ * screen readers. Used internally by at EuiLink and EuiListGroupItem
+ */
+var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref) {
+  var target = _ref.target,
+    external = _ref.external,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
+  var iconAriaLabel = (0, _i18n.useEuiI18n)('euiExternalLinkIcon.ariaLabel', 'External link');
+  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+    css: (0, _global_styling.logicalStyle)('margin-left', euiTheme.size.xs),
+    "aria-label": iconAriaLabel,
+    size: "s",
+    type: "popout"
+  }, rest)), target === '_blank' && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
+    default: "(opens in a new tab or window)"
+  }))));
+};
+exports.EuiExternalLinkIcon = EuiExternalLinkIcon;

package/optimize/lib/components/link/link.js

@@ -12,11 +12,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _link = require("./link.styles");
-var _icon = require("../icon");
-var _i18n = require("../i18n");
-var _accessibility = require("../accessibility");
 var _href_validator = require("../../services/security/href_validator");
+var _external_link_icon = require("./external_link_icon");
+var _link = require("./link.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "color", "className", "href", "external", "target", "rel", "type", "onClick", "disabled"];
 /*
@@ -49,22 +47,8 @@ var EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _link.euiLinkStyles)(euiTheme);
   var cssStyles = [styles.euiLink];
-  var cssScreenReaderTextStyles = [styles.euiLink__screenReaderText];
-  var cssExternalLinkIconStyles = [styles.euiLink__externalIcon];
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var disabled = _disabled || !isHrefValid;
-  var newTargetScreenreaderText = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, {
-    css: cssScreenReaderTextStyles
-  }, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiLink.newTarget.screenReaderOnlyText",
-    default: "(opens in a new tab or window)"
-  })));
-  var externalLinkIcon = (0, _react2.jsx)(_icon.EuiIcon, {
-    "aria-label": (0, _i18n.useEuiI18n)('euiLink.external.ariaLabel', 'External link'),
-    size: "s",
-    css: cssExternalLinkIconStyles,
-    type: "popout"
-  });
   if (href === undefined || !isHrefValid) {
     var buttonProps = _objectSpread({
       className: (0, _classnames.default)('euiLink', className),
@@ -90,10 +74,12 @@ var EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     rel: secureRel,
     onClick: onClick
   }, rest);
-  var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
   return (0, _react2.jsx)("a", (0, _extends2.default)({
     ref: ref
-  }, anchorProps), children, showExternalLinkIcon && externalLinkIcon, target === '_blank' && newTargetScreenreaderText);
+  }, anchorProps), children, (0, _react2.jsx)(_external_link_icon.EuiExternalLinkIcon, {
+    external: external,
+    target: target
+  }));
 });
 exports.EuiLink = EuiLink;
 EuiLink.displayName = 'EuiLink';

package/optimize/lib/components/link/link.styles.js

@@ -50,10 +50,7 @@ var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
     danger: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.dangerText), ";label:danger;"),
     warning: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.warningText), ";label:warning;"),
     ghost: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.ghost), ";label:ghost;"),
-    text: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.text), ";label:text;"),
-    // Children
-    euiLink__screenReaderText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', '0px'), ";;label:euiLink__screenReaderText;"),
-    euiLink__externalIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:euiLink__externalIcon;")
+    text: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.text), ";label:text;")
   };
 };
 exports.euiLinkStyles = euiLinkStyles;

package/optimize/lib/components/list_group/list_group_item.js

@@ -18,9 +18,10 @@ var _inner_text = require("../inner_text");
 var _list_group_item_extra_action = require("./list_group_item_extra_action");
 var _services = require("../../services");
 var _href_validator = require("../../services/security/href_validator");
+var _external_link_icon = require("../link/external_link_icon");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "rel", "target", "external", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -44,8 +45,9 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     _isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     href = _ref.href,
-    target = _ref.target,
     rel = _ref.rel,
+    target = _ref.target,
+    external = _ref.external,
     className = _ref.className,
     customCss = _ref.css,
     style = _ref.style,
@@ -145,7 +147,10 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
         target: target
       }),
       onClick: onClick
-    }, rest), iconNode, labelContent);
+    }, rest), iconNode, labelContent, (0, _react2.jsx)(_external_link_icon.EuiExternalLinkIcon, {
+      external: external,
+      target: target
+    }));
   } else if (href && isDisabled || onClick) {
     itemContent = (0, _react2.jsx)("button", (0, _extends2.default)({
       type: "button",

package/optimize/lib/components/list_group/list_group_item.styles.js

@@ -72,7 +72,8 @@ var euiListGroupItemInnerStyles = function euiListGroupItemInnerStyles(euiThemeC
     // Variants
     isDisabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;&,&:hover,&:focus{color:", (0, _button.euiButtonColor)(euiThemeContext, 'disabled').color, ";cursor:not-allowed;background-color:transparent;text-decoration:none;};label:isDisabled;"),
     isActive: /*#__PURE__*/(0, _react.css)(";label:isActive;"),
-    isClickable: _ref
+    isClickable: _ref,
+    externalIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:externalIcon;")
   };
 };
 exports.euiListGroupItemInnerStyles = euiListGroupItemInnerStyles;

package/optimize/lib/components/notification/notification_event.a11y.js

@@ -93,8 +93,7 @@ describe('EuiNotificationEvent', function () {
   });
   describe('Keyboard accessibility', function () {
     it('has zero violations when the popover is opened by keyboard', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').should('have.focus');
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').focus();
       cy.realPress('Enter');
       cy.get('div.euiPopover__panel').should('exist');
       cy.checkAxe();

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

@@ -178,7 +178,7 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     display: display,
     button: input,
-    buttonRef: inputRef,
+    popoverRef: inputRef,
     panelRef: panelRef,
     ref: popoverClassRef,
     closePopover: closePopover,

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

@@ -9,7 +9,6 @@ exports.EuiPopover = void 0;
 exports.getPopoverAlignFromAnchorPosition = getPopoverAlignFromAnchorPosition;
 exports.getPopoverPositionFromAnchorPosition = getPopoverPositionFromAnchorPosition;
 exports.popoverAnchorPosition = void 0;
-var _react = require("@emotion/react");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -21,11 +20,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react2 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _tabbable = require("tabbable");
 var _focus_trap = require("../focus_trap");
 var _services = require("../../services");
+var _useCombinedRefs = require("../../services/hooks/useCombinedRefs");
 var _accessibility = require("../accessibility");
 var _portal = require("../portal");
 var _mutation_observer = require("../observer/mutation_observer");
@@ -35,6 +35,7 @@ var _outside_click_detector = require("../outside_click_detector");
 var _popover_arrow = require("./popover_arrow");
 var _popover2 = require("./popover.styles");
 var _popover_panel = require("./popover_panel");
+var _react2 = require("@emotion/react");
 var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 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; }
@@ -208,9 +209,12 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           anchor: _this.button,
           popover: _this.panel,
           offset: _this.props.attachToAnchor ? offset : _this.props.hasArrow ? 16 + offset : 8 + offset,
-          arrowConfig: {
+          arrowConfig: _this.props.hasArrow ? {
             arrowWidth: 24,
             arrowBuffer: 10
+          } : {
+            arrowWidth: 0,
+            arrowBuffer: 0
           },
           returnBoundingBox: _this.props.attachToAnchor,
           allowCrossAxis: _this.props.repositionToCrossAxis,
@@ -267,9 +271,9 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         window.addEventListener('resize', _this.positionPopoverFluid);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buttonRef", function (node) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popoverRef", function (node) {
       _this.button = node;
-      _this.props.buttonRef && _this.props.buttonRef(node);
+      (0, _useCombinedRefs.setMultipleRefs)([_this.props.popoverRef, _this.props.buttonRef], node);
     });
     _this.state = {
       prevProps: {
@@ -388,12 +392,12 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       var tabIndexProp = (_panelProps$tabIndex = panelProps === null || panelProps === void 0 ? void 0 : panelProps.tabIndex) !== null && _panelProps$tabIndex !== void 0 ? _panelProps$tabIndex : _tabIndexProp;
       var styles = (0, _popover2.euiPopoverStyles)();
       var popoverStyles = [styles.euiPopover, {
-        display: display
+        display: display,
+        label: display
       }];
       var classes = (0, _classnames.default)('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className);
-      var anchorClasses = (0, _classnames.default)('euiPopover__anchor', anchorClassName);
+      }, className, anchorClassName);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
@@ -417,17 +421,17 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         var focusTrapScreenReaderText;
         if (ownFocus || popoverScreenReaderText) {
           ariaDescribedby = this.descriptionId;
-          focusTrapScreenReaderText = (0, _react.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react.jsx)("p", {
+          focusTrapScreenReaderText = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
             id: this.descriptionId
-          }, ownFocus && (0, _react.jsx)(_i18n.EuiI18n, {
+          }, ownFocus && (0, _react2.jsx)(_i18n.EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
             default: "You are in a dialog. Press Escape, or tap/click outside the dialog to close."
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = (0, _react.jsx)(_portal.EuiPortal, {
+        panel = (0, _react2.jsx)(_portal.EuiPortal, {
           insert: insert
-        }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
+        }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
           clickOutsideDisables: true,
           onClickOutside: this.onClickOutside,
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
@@ -435,7 +439,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           initialFocus: initialFocus,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }, focusTrapProps), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
+        }, focusTrapProps), (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,
@@ -455,10 +459,10 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
             // Adding `will-change` to reduce risk of a blurry animation in Chrome 86+
             willChange: !this.state.isOpenStable ? 'transform, opacity' : undefined
           })
-        }), showArrow && this.state.arrowPosition && (0, _react.jsx)(_popover_arrow.EuiPopoverArrow, {
+        }), showArrow && this.state.arrowPosition && (0, _react2.jsx)(_popover_arrow.EuiPopoverArrow, {
           position: this.state.arrowPosition,
           style: this.state.arrowStyles
-        }, arrowChildren), focusTrapScreenReaderText, (0, _react.jsx)(_mutation_observer.EuiMutationObserver, {
+        }, arrowChildren), focusTrapScreenReaderText, (0, _react2.jsx)(_mutation_observer.EuiMutationObserver, {
           observerOptions: {
             attributes: true,
             // element attribute changes
@@ -471,7 +475,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
 
           onMutation: this.onMutation
         }, function (mutationRef) {
-          return (0, _react.jsx)("div", {
+          return (0, _react2.jsx)("div", {
             ref: mutationRef
           }, children);
         }))));
@@ -480,32 +484,20 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       // react-focus-on and related do not register outside click detection
       // when disabled, so we still need to conditionally check for that ourselves
       if (ownFocus) {
-        return (0, _react.jsx)("div", (0, _extends2.default)({
+        return (0, _react2.jsx)("div", (0, _extends2.default)({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef
-        }, rest), (0, _react.jsx)("div", {
-          css: /*#__PURE__*/(0, _react.css)({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel);
+          ref: this.popoverRef
+        }, rest), button instanceof HTMLElement ? null : button, panel);
       } else {
-        return (0, _react.jsx)(_outside_click_detector.EuiOutsideClickDetector, {
+        return (0, _react2.jsx)(_outside_click_detector.EuiOutsideClickDetector, {
           onOutsideClick: this.closePopover
-        }, (0, _react.jsx)("div", (0, _extends2.default)({
+        }, (0, _react2.jsx)("div", (0, _extends2.default)({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef,
+          ref: this.popoverRef,
           onKeyDown: this.onKeyDown
-        }, rest), (0, _react.jsx)("div", {
-          css: /*#__PURE__*/(0, _react.css)({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel));
+        }, rest), button instanceof HTMLElement ? null : button, panel));
       }
     }
   }], [{
@@ -531,7 +523,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
     }
   }]);
   return EuiPopover;
-}(_react2.Component);
+}(_react.Component);
 exports.EuiPopover = EuiPopover;
 (0, _defineProperty2.default)(EuiPopover, "defaultProps", {
   isOpen: false,

package/optimize/lib/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -18,9 +18,7 @@ var popoverArrowSize = 'm';
 exports.popoverArrowSize = popoverArrowSize;
 var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-
-  // Match the background color of panels
-  var borderColor = (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain');
+  var borderColor = 'var(--euiPopoverBackgroundColor)';
   var arrowSize = euiTheme.size[popoverArrowSize];
   return {
     // Base

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

@@ -45,7 +45,8 @@ var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
   var euiThemeContext = (0, _services.useEuiTheme)();
   var cssStyles = (0, _react.useMemo)(function () {
     var styles = (0, _popover_panel.euiPopoverPanelStyles)(euiThemeContext);
-    var sharedStyles = [styles.euiPopover__panel, isOpen && styles.isOpen];
+    var colorMode = euiThemeContext.colorMode.toLowerCase();
+    var sharedStyles = [styles.euiPopover__panel, styles[colorMode], isOpen && styles.isOpen];
     if (hasDragDrop) {
       return [].concat(sharedStyles, [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
     }

package/optimize/lib/components/popover/popover_panel/_popover_panel.styles.js

@@ -7,6 +7,7 @@ exports.openAnimationTiming = exports.euiPopoverPanelStyles = void 0;
 var _react = require("@emotion/react");
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 var _functions = require("../../../themes/amsterdam/global_styling/functions");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -21,6 +22,7 @@ var openAnimationTiming = 'slow';
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
  * 3. Make sure the panel stays within the window.
+ * 4. Make the popover lighter on dark mode (too hard to distinguish from plain bgs otherwise), and set a CSS var for the arrow to use
  */
 exports.openAnimationTiming = openAnimationTiming;
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -42,8 +44,11 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
+    /* 4 */
+    light: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
+    dark: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", (0, _services.tint)(euiTheme.colors.emptyShade, 0.025), ";;label:dark;"),
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {

package/optimize/lib/components/resizable_container/resizable_container.a11y.js

@@ -52,22 +52,19 @@ describe('Horizontal EuiResizableContainer', function () {
   });
   describe('Keyboard accessibility check', function () {
     it('has zero violations when first panel is scrolled vertically', function () {
-      cy.realPress('Tab');
-      cy.get('div.euiPanel').first().should('have.focus');
+      cy.get('div.euiPanel').first().focus();
       cy.realPress('End');
       cy.get('a[data-test-subj="hello-world-link"]').should('be.visible');
       cy.checkAxe();
     });
     it('has zero violations when second panel is scrolled vertically', function () {
-      cy.repeatRealPress('Tab', 4);
-      cy.get('div.euiPanel').last().should('have.focus');
+      cy.get('div.euiPanel').last().focus();
       cy.realPress('End');
       cy.realPress('Home');
       cy.checkAxe();
     });
     it('has zero violations when the horizontal panels are resized', function () {
-      cy.repeatRealPress('Tab', 3);
-      cy.get('button.euiResizableButton').should('have.focus');
+      cy.get('button.euiResizableButton').focus();
       cy.repeatRealPress('ArrowRight', 10);
       cy.checkAxe();
     });
@@ -102,8 +99,7 @@ describe('Vertical EuiResizableContainer', function () {
       cy.checkAxe();
     });
     it('has zero violations when the vertical panels are resized', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button.euiResizableButton').should('have.focus');
+      cy.get('button.euiResizableButton').focus();
       cy.repeatRealPress('ArrowDown', 10);
       cy.checkAxe();
     });

package/optimize/lib/components/search_bar/search_bar.a11y.js

@@ -183,8 +183,7 @@ describe('EuiSearchBar', function () {
   });
   describe('Keyboard accessibility', function () {
     it('has zero violations after a full-text search', function () {
-      cy.realPress('Tab');
-      cy.get('input[type="search"]').should('have.focus');
+      cy.get('input[type="search"]').focus();
       cy.get('input[type="search"]').type('watch');
       cy.realPress('Enter');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 1);
@@ -196,8 +195,7 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering on Open items', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button.euiButtonEmpty').first().should('have.focus');
+      cy.get('button.euiButtonEmpty').first().focus();
       cy.realPress('Enter');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 3);
       cy.checkAxe();
@@ -208,8 +206,7 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering by Tags', function () {
-      cy.repeatRealPress('Tab', 4);
-      cy.get('button.euiButtonEmpty').last().should('have.focus');
+      cy.get('button.euiButtonEmpty').last().focus();
       cy.realPress('Enter');
       cy.realPress('Tab');
       cy.realPress('ArrowDown');