@elastic/eui 116.1.0 → 116.2.0-snapshot.1780495739173

package/optimize/es/components/banner/banner.styles.js

@@ -0,0 +1,76 @@
+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
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+var CONTAINER_NAME = 'euiBanner';
+var CQC_LAYOUTS = ['narrow', 'wide'];
+var CQC_BREAKPOINTS = {
+  s: {
+    narrow: '(min-width: 401px)',
+    wide: '(min-width: 800px)'
+  },
+  m: {
+    narrow: '(min-width: 601px)',
+    wide: '(min-width: 1000px)'
+  }
+};
+var CQC_BREAKPOINT_NARROWEST = '(max-width: 400px)';
+
+/** Maximum reading width for `text` and `children` slots. */
+var TEXT_MAX_WIDTH = 1200;
+var withContainerQuery = function withContainerQuery(_ref2) {
+  var layout = _ref2.layout,
+    styles = _ref2.styles;
+  return Object.keys(CQC_BREAKPOINTS).map(function (sizeKey) {
+    return "\n        @container ".concat(CONTAINER_NAME, "--").concat(sizeKey, " ").concat(CQC_BREAKPOINTS[sizeKey][layout], " {\n          ").concat(styles, "\n        }\n      ");
+  }).join('\n');
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "qd171g-title",
+  styles: "[data-size='s'] &{display:inline;};label:title;"
+} : {
+  name: "qd171g-title",
+  styles: "[data-size='s'] &{display:inline;};label:title;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiBannerStyles = function euiBannerStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    euiBanner: /*#__PURE__*/css("container-name:", CONTAINER_NAME, ";container-type:inline-size;position:relative;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";&[data-size='s']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--s;}&[data-size='m']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--m;};label:euiBanner;"),
+    container: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;gap:", euiTheme.size.m, ";padding-inline-start:", euiTheme.size.base, ";padding-inline-end:", euiTheme.size.base, ";[data-size='m'] &{padding-block:", euiTheme.size.base, ";}[data-size='s'] &{padding-block:", euiTheme.size.m, ";}", withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        flex-direction: row;\n        align-items: flex-start;\n        gap: ".concat(euiTheme.size.base, ";\n      ")
+    }), ";;label:container;"),
+    media: /*#__PURE__*/css("--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 5)"), ";flex-shrink:0;inline-size:var(--euiBannerMediaSize);block-size:var(--euiBannerMediaSize);aspect-ratio:1/1;[data-size='s'] &{--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 2)"), ";}", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        align-self: center;\n      "
+    }), " img,svg{block-size:100%;inline-size:100%;};label:media;"),
+    body: /*#__PURE__*/css("flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;align-self:flex-start;inline-size:100%;gap:", euiTheme.size.m, ";", withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        align-self: center;\n        inline-size: auto;\n      "
+    }), " ", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        flex-direction: row;\n        align-items: center;\n        /* stretch to match the media's height so align-items has space to work */\n        align-self: stretch;\n        justify-content: space-between;\n        gap: ".concat(euiTheme.size.xxl, ";\n      ")
+    }), ";;label:body;"),
+    // At size `s` the content slot becomes a block container so the title and
+    // text flow inline. Other sizes keep the flex column with a fixed gap.
+    content: /*#__PURE__*/css("flex:1 1 auto;min-inline-size:0;max-inline-size:", TEXT_MAX_WIDTH, "px;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";[data-size='s'] &{display:block;>*+*:not(.euiButtonIcon){margin-block-start:", euiTheme.size.s, ";}};label:content;"),
+    title: _ref,
+    text: /*#__PURE__*/css("[data-size='s'] &{display:inline;&::before{content:'\xB7';display:inline-block;inline-size:calc(", euiTheme.size.s, " + ", euiTheme.size.xxs, ");text-align:center;color:", euiTheme.colors.textHeading, ";}};label:text;"),
+    actions: /*#__PURE__*/css("display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:", euiTheme.size.s, ";@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}}", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        /* Reverses source order so primary appears last (rightmost). */\n        flex-direction: row-reverse;\n        flex-shrink: 0;\n        align-self: center;\n      "
+    }), ";;label:actions;"),
+    hasDismiss: /*#__PURE__*/css(withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        padding-inline-end: calc(".concat(euiTheme.size.s, " * 5);\n      ")
+    }), ";;label:hasDismiss;"),
+    dismiss: /*#__PURE__*/css("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";color:", euiTheme.colors.textSubdued, ";;label:dismiss;")
+  };
+};

package/optimize/es/components/banner/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { EuiBanner } from './banner';

package/optimize/es/components/basic_table/basic_table.js

@@ -8,7 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -41,6 +41,7 @@ import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
 import { htmlIdGenerator } from '../../services/accessibility';
 import { euiBasicTableBodyLoading, safariLoadingWorkaround } from './basic_table.styles';
+import { EuiToolTip } from '../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var dataTypesProfiles = {
   auto: {
@@ -155,7 +156,11 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         var _ref4 = _slicedToArray(_ref3, 2),
           selectAllRows = _ref4[0],
           deselectRows = _ref4[1];
-        return ___EmotionJSX(EuiCheckbox, {
+        return ___EmotionJSX(EuiToolTip, {
+          content: checked || indeterminate ? deselectRows : selectAllRows,
+          display: "block",
+          disableScreenReaderOutput: true
+        }, ___EmotionJSX(EuiCheckbox, {
           id: _this.selectAllIdGenerator(),
           checked: checked,
           indeterminate: indeterminate,
@@ -163,9 +168,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           onChange: onChange,
           "data-test-subj": "checkboxSelectAll",
           "aria-label": checked || indeterminate ? deselectRows : selectAllRows,
-          title: checked || indeterminate ? deselectRows : selectAllRows,
           label: isMobile ? selectAllRows : null
-        });
+        }));
       });
     });
     _defineProperty(_this, "renderCopyChar", function (columnIndex) {
@@ -354,6 +358,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableLayout = _this$props2.tableLayout,
         hasBackground = _this$props2.hasBackground,
         scrollableInline = _this$props2.scrollableInline,
+        stickyScrollbar = _this$props2.stickyScrollbar,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var classes = classNames('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -373,7 +378,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableLayout = _this$props3.tableLayout,
         hasBackground = _this$props3.hasBackground,
         loading = _this$props3.loading,
-        scrollableInline = _this$props3.scrollableInline;
+        scrollableInline = _this$props3.scrollableInline,
+        stickyScrollbar = _this$props3.stickyScrollbar;
       return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), ___EmotionJSX(OverrideCopiedTabularContent, null, ___EmotionJSX(EuiTable, {
@@ -383,6 +389,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         compressed: compressed,
         hasBackground: hasBackground,
         scrollableInline: scrollableInline,
+        stickyScrollbar: stickyScrollbar,
         css: loading && safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
@@ -651,8 +658,9 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         }
       }, ___EmotionJSX(EuiIcon, {
         type: "minusCircle",
-        color: "danger"
-      }), " ", error));
+        color: "danger",
+        "aria-hidden": true
+      }), ' ', error));
     }
   }, {
     key: "renderEmptyMessage",
@@ -779,15 +787,18 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           index: displayedRowIndex + 1
         }
       }, function (selectThisRow) {
-        return ___EmotionJSX(EuiCheckbox, {
+        return ___EmotionJSX(EuiToolTip, {
+          content: title || selectThisRow,
+          display: "block",
+          disableScreenReaderOutput: true
+        }, ___EmotionJSX(EuiCheckbox, {
           id: "".concat(_this6.tableId).concat(key, "-checkbox"),
           disabled: disabled,
           checked: checked,
           onChange: onChange,
-          title: title || selectThisRow,
           "aria-label": title || selectThisRow,
           "data-test-subj": "checkboxSelectRow-".concat(itemId)
-        });
+        }));
       })), disabled];
     }
   }, {

package/optimize/es/components/basic_table/collapsed_item_actions.js

@@ -90,10 +90,10 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
   var popoverButton = ___EmotionJSX(EuiButtonIcon, {
     className: className,
     "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
-    title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
     iconType: "boxesVertical",
     color: "text",
     isDisabled: actionsDisabled,
+    hasAriaDisabled: actionsDisabled,
     onClick: function onClick() {
       return setPopoverOpen(function (isOpen) {
         return !isOpen;
@@ -101,14 +101,15 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
     },
     "data-test-subj": "euiCollapsedItemActionsButton"
   });
-  var withTooltip = !actionsDisabled && ___EmotionJSX(EuiToolTip, {
-    content: allActionsTooltip
+  var withTooltip = ___EmotionJSX(EuiToolTip, {
+    content: actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsTooltip,
+    disableScreenReaderOutput: true
   }, popoverButton);
   return ___EmotionJSX(EuiPopover, {
     className: className,
     id: "".concat(itemId, "-actions"),
     isOpen: popoverOpen,
-    button: withTooltip || popoverButton,
+    button: withTooltip,
     closePopover: closePopover,
     panelPaddingSize: "none",
     anchorPosition: "leftCenter"

package/optimize/es/components/basic_table/default_item_action.js

@@ -48,16 +48,13 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
       className: className,
       "aria-labelledby": ariaLabelId,
       isDisabled: !enabled,
+      hasAriaDisabled: !enabled,
       color: color,
       iconType: icon,
       onClick: onClick,
       href: href,
       target: action.target,
       "data-test-subj": dataTestSubj
-      // If action is disabled, the normal tooltip can't show - attempt to
-      // provide some amount of affordance with a browser title tooltip
-      ,
-      title: !enabled ? tooltipContent : undefined
     });
     // actionContent (action.name) is a ReactNode and must be rendered
     // to an element and referenced by ID for screen readers
@@ -69,6 +66,7 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
       className: className,
       size: "s",
       isDisabled: !enabled,
+      hasAriaDisabled: !enabled,
       color: color,
       iconType: icon,
       onClick: onClick,
@@ -78,5 +76,5 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
       flush: "right"
     }, actionContent);
   }
-  return enabled ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, tooltipProps, button), ariaLabelledBy) : ___EmotionJSX(React.Fragment, null, button, ariaLabelledBy);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, tooltipProps, button), ariaLabelledBy);
 };

package/optimize/es/components/breadcrumbs/_breadcrumb_content.js

@@ -2,9 +2,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["text", "truncate", "type", "href", "rel", "onClick", "popoverContent", "popoverProps", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"],
+var _excluded = ["text", "truncate", "type", "href", "rel", "onClick", "popoverContent", "popoverProps", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb", "title"],
   _excluded2 = ["css"],
-  _excluded3 = ["popoverContent", "popoverProps", "color", "type", "title", "aria-current", "className", "isLastBreadcrumb", "breadcrumbCss", "truncationCss", "children"];
+  _excluded3 = ["popoverContent", "popoverProps", "color", "type", "title", "hasExplicitTitle", "aria-current", "className", "isLastBreadcrumb", "breadcrumbCss", "truncationCss", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -21,6 +21,7 @@ import { EuiLink } from '../link';
 import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';
 import { useEuiI18n } from '../i18n';
+import { EuiToolTip } from '../tool_tip';
 import { euiBreadcrumbContentStyles, euiBreadcrumbPopoverStyles } from './_breadcrumb_content.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
@@ -39,6 +40,7 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
     isOnlyBreadcrumb = _ref.isOnlyBreadcrumb,
     highlightLastBreadcrumb = _ref.highlightLastBreadcrumb,
     truncateLastBreadcrumb = _ref.truncateLastBreadcrumb,
+    propTitle = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isApplication = type === 'application';
   var classes = classNames('euiBreadcrumb__content', className);
@@ -61,8 +63,9 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
   var linkColor = color || 'subdued';
   var ariaCurrent = highlightLastBreadcrumb ? 'page' : undefined;
   var interactionStyles = (isInteractiveBreadcrumb || isBreadcrumbWithPopover) && !isApplication && styles.isInteractive;
+  var hasExplicitTitle = propTitle != null && propTitle !== '';
   return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
-    var title = innerText === '' ? undefined : innerText;
+    var title = propTitle || (innerText === '' ? undefined : innerText);
     var baseProps = {
       ref: ref,
       title: title,
@@ -74,6 +77,8 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
       var _ = baseProps.css,
         popoverButtonProps = _objectWithoutProperties(baseProps, _excluded2);
       return ___EmotionJSX(EuiBreadcrumbPopover, _extends({}, popoverButtonProps, {
+        title: title,
+        hasExplicitTitle: hasExplicitTitle,
         breadcrumbCss: [].concat(cssStyles, [interactionStyles]),
         truncationCss: truncationStyles,
         isLastBreadcrumb: isLastBreadcrumb,
@@ -100,6 +105,7 @@ var EuiBreadcrumbPopover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     color = _ref2.color,
     type = _ref2.type,
     title = _ref2.title,
+    hasExplicitTitle = _ref2.hasExplicitTitle,
     ariaCurrent = _ref2['aria-current'],
     className = _ref2.className,
     isLastBreadcrumb = _ref2.isLastBreadcrumb,
@@ -128,25 +134,28 @@ var EuiBreadcrumbPopover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var wrapperStyles = [styles.popoverWrapper.euiBreadcrumb__popoverWrapper, !isLastBreadcrumb && styles.popoverWrapper[type]];
   var buttonStyles = [styles.euiBreadcrumb__popoverButton].concat(_toConsumableArray(breadcrumbCss));
   var truncationStyles = [styles.euiBreadcrumb__popoverTruncation].concat(_toConsumableArray(truncationCss));
+  var linkButton = ___EmotionJSX(EuiLink, _extends({
+    ref: ref,
+    "aria-current": ariaCurrent,
+    className: className,
+    css: buttonStyles,
+    color: color,
+    onClick: togglePopover
+  }, rest), ___EmotionJSX("span", {
+    css: truncationStyles
+  }, children), ___EmotionJSX(EuiIcon, {
+    type: "chevronSingleDown",
+    size: "s",
+    "aria-label": " - ".concat(popoverAriaLabel)
+  }));
   return ___EmotionJSX(EuiPopover, _extends({}, popoverProps, {
     isOpen: isPopoverOpen,
     closePopover: closePopover,
     css: wrapperStyles,
-    button: ___EmotionJSX(EuiLink, _extends({
-      ref: ref,
-      title: title,
-      "aria-current": ariaCurrent,
-      className: className,
-      css: buttonStyles,
-      color: color,
-      onClick: togglePopover
-    }, rest), ___EmotionJSX("span", {
-      css: truncationStyles
-    }, children), ___EmotionJSX(EuiIcon, {
-      type: "chevronSingleDown",
-      size: "s",
-      "aria-label": " - ".concat(popoverAriaLabel)
-    }))
+    button: title ? ___EmotionJSX(EuiToolTip, {
+      content: title,
+      disableScreenReaderOutput: !hasExplicitTitle
+    }, linkButton) : linkButton
   }), typeof popoverContent === 'function' ? popoverContent(closePopover) : popoverContent);
 });
 EuiBreadcrumbPopover.displayName = 'EuiBreadcrumbPopover';

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

@@ -121,6 +121,7 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       var optionIsFocused = activeOptionIndex === index;
       var optionIsDisabled = option.hasOwnProperty('disabled') && option.disabled === true;
       var hasOnFocusBadge = onFocusBadge && optionIsFocused && !optionIsDisabled;
+      var hasNativeTruncation = !hasTruncationProps && !searchValue && rowHeight !== 'auto';
       return ___EmotionJSX(EuiListItemLayout, _extends({
         element: "li",
         role: "option"
@@ -135,8 +136,8 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         // loses focus on selecting an option (due to actively removing it from the list)
         ,
         id: rootId("_option-".concat(options.indexOf(option))),
+        title: hasNativeTruncation && !toolTipContent ? label : undefined,
         key: (_option$key = option.key) !== null && _option$key !== void 0 ? _option$key : option.label,
-        title: label,
         prepend: option.prepend,
         append: hasOnFocusBadge ? ___EmotionJSX(React.Fragment, null, option.append, hitEnterBadge) : option.append,
         checked: checked,

package/optimize/es/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -16,6 +16,7 @@ import { EuiButtonIcon } from '../../../button/button_icon';
 import { EuiButtonEmpty } from '../../../button/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import { EuiPopoverFooter } from '../../../popover';
+import { EuiToolTip } from '../../../tool_tip';
 import { euiDataGridCellActionsStyles } from './data_grid_cell_actions.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
@@ -36,18 +37,21 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       token: "euiDataGridCellActions.expandButtonTitle",
       default: "Click or hit enter to interact with cell content"
     }, function (expandButtonTitle) {
-      return ___EmotionJSX(EuiButtonIcon, {
-        css: styles.euiDataGridRowCell__actionButtonIcon,
+      return ___EmotionJSX(EuiToolTip, {
+        content: expandButtonTitle,
+        disableScreenReaderOutput: true,
+        display: "flex"
+      }, ___EmotionJSX(EuiButtonIcon, {
+        "aria-hidden": true,
         className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
+        color: "primary",
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
-        color: "primary",
         iconSize: "s",
         iconType: "maximize",
-        "aria-hidden": true,
-        onClick: onExpandClick,
-        title: expandButtonTitle
-      });
+        onClick: onExpandClick
+      }));
     });
   }, [onExpandClick, styles]);
   var additionalButtons = useMemo(function () {

package/optimize/es/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -9,7 +9,7 @@ var _templateObject;
  */
 
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../../global_styling';
+import { euiCanAnimate, euiDisabledSelector, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../../global_styling';
 import { highContrastModeStyles } from '../../../../global_styling/functions/high_contrast';
 import { euiDataGridVariables } from '../../data_grid.styles';
 import { euiDataGridCellOutlineStyles, euiDataGridCellOutlineSelectors } from './data_grid_cell.styles';
@@ -28,7 +28,7 @@ export var euiDataGridCellActionsStyles = function euiDataGridCellActionsStyles(
     })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", euiCanAnimate, "{transform:scaleY(0);transform-origin:bottom;", cellSelectors.showAnimation, " &{animation-duration:", euiTheme.animation.fast, ";animation-name:", slideUp, ";animation-iteration-count:1;animation-fill-mode:forwards;}", cellSelectors.hoverAnimation, " &{animation-delay:", euiTheme.animation.slow, ";}};label:euiDataGridRowCell__actions;"),
     euiDataGridRowCell__actionButtonIcon: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.base), " ", logicalCSS('height', mathWithUnits([euiTheme.size.base, euiTheme.size.xs], function (x, y) {
       return x + y;
-    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}", highContrastModeStyles(euiThemeContext, {
+    })), " border-radius:0;&,& svg{background-color:transparent!important;}&:not(", euiDisabledSelector, "),&:not(", euiDisabledSelector, ") svg{color:currentColor!important;fill:currentColor!important;}", highContrastModeStyles(euiThemeContext, {
       preferred: 'border: none;'
     }), ";;label:euiDataGridRowCell__actionButtonIcon;")
   };

package/optimize/es/components/datagrid/controls/display_selector.js

@@ -353,7 +353,8 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       },
       panelClassName: "euiDataGrid__displayPopoverPanel",
       button: ___EmotionJSX(EuiToolTip, {
-        content: buttonLabel
+        content: buttonLabel,
+        disableScreenReaderOutput: true
       }, ___EmotionJSX(EuiButtonIcon, {
         size: "xs",
         iconType: "controls",

package/optimize/es/components/datagrid/controls/keyboard_shortcuts.js

@@ -35,7 +35,8 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
       anchorPosition: "downRight",
       panelPaddingSize: "none",
       button: ___EmotionJSX(EuiToolTip, {
-        content: title
+        content: title,
+        disableScreenReaderOutput: true
       }, ___EmotionJSX(EuiButtonIcon, {
         size: "xs",
         iconType: "keyboard",

package/optimize/es/components/date_picker/auto_refresh/auto_refresh.js

@@ -16,6 +16,7 @@ import classNames from 'classnames';
 import { EuiFieldText, EuiFormPrepend } from '../../form';
 import { EuiButtonEmpty } from '../../button/button_empty/button_empty';
 import { EuiInputPopover, EuiPopover } from '../../popover';
+import { EuiToolTip } from '../../tool_tip';
 import { useEuiI18n } from '../../i18n';
 import { usePrettyInterval } from '../super_date_picker/pretty_interval';
 import { EuiRefreshInterval } from './refresh_interval';
@@ -110,7 +111,9 @@ export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
     })
   });
   return ___EmotionJSX(EuiPopover, {
-    button: ___EmotionJSX(EuiButtonEmpty, _extends({
+    button: ___EmotionJSX(EuiToolTip, {
+      content: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn
+    }, ___EmotionJSX(EuiButtonEmpty, _extends({
       onClick: function onClick() {
         return setIsPopoverOpen(function (isOpen) {
           return !isOpen;
@@ -120,12 +123,12 @@ export var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
       size: size,
       color: color,
       iconType: "refreshTime",
-      title: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      hasAriaDisabled: isDisabled
     }, rest), usePrettyInterval(Boolean(isPaused), refreshInterval, {
       shortHand: shortHand,
       unit: intervalUnits
-    })),
+    }))),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
       setIsPopoverOpen(false);

package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -16,6 +16,7 @@ import { useEuiI18n } from '../../../i18n';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
 import { EuiFlexGroup } from '../../../flex';
 import { EuiButtonIcon } from '../../../button';
+import { EuiToolTip } from '../../../tool_tip';
 import { EuiCode } from '../../../code';
 import { EuiDatePicker } from '../../date_picker';
 import { EuiTimeZoneDisplay } from './timezone_display';
@@ -174,16 +175,18 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     prepend: ___EmotionJSX(EuiFormLabel, {
       id: textInputLabelId
     }, labelPrefix)
-  })), hasUnparsedText && ___EmotionJSX(EuiButtonIcon, {
+  })), hasUnparsedText && ___EmotionJSX(EuiToolTip, {
+    content: submitButtonLabel,
+    disableScreenReaderOutput: true
+  }, ___EmotionJSX(EuiButtonIcon, {
     type: "submit",
     css: styles.euiAbsoluteTabDateForm__submit,
     size: "s",
     display: "base",
     iconType: "check",
     "aria-label": submitButtonLabel,
-    title: submitButtonLabel,
     "data-test-subj": "parseAbsoluteDateFormat"
-  })), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
+  }))), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
     id: timeZomeDescriptionId
   }, timeZoneDisplayProps)));
 };

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -16,6 +16,7 @@ import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover } from '../../../popover';
+import { EuiToolTip } from '../../../tool_tip';
 import { useFormatTimeString } from '../pretty_duration';
 import { EuiDatePopoverContent } from './date_popover_content';
 import { euiDatePopoverButtonStyles } from './date_popover_button.styles';
@@ -70,16 +71,23 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
   } else if (needsUpdating) {
     title = outdatedTitle;
   }
-  var button = ___EmotionJSX("button", _extends({
+  var rawButton = ___EmotionJSX("button", _extends({
     type: "button",
     onClick: onPopoverToggle,
     className: classes,
-    title: title,
     disabled: isDisabled,
     "data-test-subj": "superDatePicker".concat(position, "DatePopoverButton")
   }, buttonProps, {
     css: cssStyles
   }), formattedValue);
+  var button = title ? ___EmotionJSX(EuiToolTip, {
+    content: title,
+    display: "block",
+    disableScreenReaderOutput: !isInvalid && !needsUpdating,
+    anchorProps: {
+      css: styles.tooltipAnchor
+    }
+  }, rawButton) : rawButton;
   return ___EmotionJSX(EuiPopover, _extends({
     button: button,
     isOpen: isOpen,

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -21,7 +21,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 export var euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
     euiDatePopoverButton: /*#__PURE__*/css(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;"),
-    now: _ref
+    now: _ref,
+    tooltipAnchor: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", logicalCSS('width', '100%'), ";;label:tooltipAnchor;")
   };
 };
 export var _buttonStyles = function _buttonStyles(euiThemeContext) {

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -16,6 +16,7 @@ import { useEuiMemoizedStyles } from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover } from '../../../popover';
 import { EuiFormPrepend } from '../../../form';
+import { EuiToolTip } from '../../../tool_tip';
 import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles';
 import { EuiQuickSelectPanel } from './quick_select_panel';
 import { EuiQuickSelect } from './quick_select';
@@ -63,21 +64,23 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
       closePopover();
     }
   }, [_applyTime, closePopover]);
-  var buttonlabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
+  var buttonLabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
   var quickSelectButtonOnClick = function quickSelectButtonOnClick(e) {
     togglePopover();
     buttonOnClick === null || buttonOnClick === void 0 || buttonOnClick(e);
   };
-  var quickSelectButton = ___EmotionJSX(EuiFormPrepend, _extends({
+  var quickSelectButton = ___EmotionJSX(EuiToolTip, {
+    content: buttonLabel,
+    disableScreenReaderOutput: true
+  }, ___EmotionJSX(EuiFormPrepend, _extends({
     element: "button",
     iconLeft: "calendar",
     iconRight: "chevronSingleDown",
     isDisabled: props.isDisabled,
     onClick: quickSelectButtonOnClick,
-    "aria-label": buttonlabel,
-    title: buttonlabel,
+    "aria-label": buttonLabel,
     "data-test-subj": "superDatePickerToggleQuickMenuButton"
-  }, quickSelectButtonProps));
+  }, quickSelectButtonProps)));
   return ___EmotionJSX(EuiPopover, {
     button: quickSelectButton,
     isOpen: isOpen,

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

@@ -16,6 +16,7 @@ import classNames from 'classnames';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { EuiButtonIcon } from '../../button';
+import { EuiToolTip } from '../../tool_tip';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { useFormContext } from '../eui_form_context';
@@ -76,16 +77,18 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
   var visibilityToggle = useMemo(function () {
     if (type === 'dual') {
       var isVisible = inputType === 'text';
-      return ___EmotionJSX(EuiButtonIcon, _extends({
+      return ___EmotionJSX(EuiToolTip, {
+        content: isVisible ? maskPasswordLabel : showPasswordLabel,
+        disableScreenReaderOutput: true
+      }, ___EmotionJSX(EuiButtonIcon, _extends({
         iconType: isVisible ? 'eyeSlash' : 'eye',
         "aria-label": isVisible ? maskPasswordLabel : showPasswordLabel,
-        title: isVisible ? maskPasswordLabel : showPasswordLabel,
         disabled: disabled
       }, dualToggleProps, {
         onClick: function onClick(e) {
           return handleToggle(e, isVisible);
         }
-      }));
+      })));
     }
   }, [type, inputType, maskPasswordLabel, showPasswordLabel, dualToggleProps, handleToggle, disabled]);
   var finalAppend = useMemo(function () {

package/optimize/es/components/header/header.a11y.js

@@ -327,7 +327,7 @@ describe('EuiHeader', function () {
       cy.checkAxe();
     });
     it('has zero violations when a hidden breadcrumb is expanded', function () {
-      cy.get('button[title="See collapsed breadcrumbs"]').realClick();
+      cy.get('[aria-label="See collapsed breadcrumbs"]').realClick();
       cy.get('a[data-test-subj="cy-breadcrumb-hidden"]').should('exist');
       cy.checkAxe();
     });