@elastic/eui 108.0.0 → 109.0.0

package/es/components/basic_table/collapsed_item_actions.js

@@ -82,7 +82,9 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
-            delay: 'long'
+            delay: 'long',
+            // Avoid screen-readers announcing the same text twice
+            disableScreenReaderOutput: typeof buttonContent === 'string' && buttonContent === toolTipContent
           }
         }, buttonContent));
       }

package/es/components/basic_table/default_item_action.js

@@ -30,6 +30,12 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
   var icon = action.icon ? callWithItemIfFunction(item)(action.icon) : undefined;
   var actionContent = callWithItemIfFunction(item)(action.name);
   var tooltipContent = callWithItemIfFunction(item)(action.description);
+  var tooltipProps = {
+    content: tooltipContent,
+    delay: 'long',
+    // Avoid screen-readers announcing the same text twice
+    disableScreenReaderOutput: typeof actionContent === 'string' && actionContent === tooltipContent
+  };
   var href = callWithItemIfFunction(item)(action.href);
   var dataTestSubj = callWithItemIfFunction(item)(action['data-test-subj']);
   var ariaLabelId = useGeneratedHtmlId();
@@ -73,8 +79,5 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
       flush: "right"
     }, actionContent);
   }
-  return enabled ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, {
-    content: tooltipContent,
-    delay: "long"
-  }, button), ariaLabelledBy) : ___EmotionJSX(React.Fragment, null, button, ariaLabelledBy);
+  return enabled ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, tooltipProps, button), ariaLabelledBy) : ___EmotionJSX(React.Fragment, null, button, ariaLabelledBy);
 };

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

@@ -37,8 +37,7 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     id = _ref.id,
     isDisabled = _ref.isDisabled,
     isIconOnly = _ref.isIconOnly,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    isSelected = _ref.isSelected,
     label = _ref.label,
     value = _ref.value,
     size = _ref.size,
@@ -207,5 +206,5 @@ var EuiButtonGroupButtonWithToolTip = function EuiButtonGroupButtonWithToolTip(_
 EuiButtonGroupButtonWithToolTip.propTypes = {
   children: PropTypes.element.isRequired,
   wrapperCss: PropTypes.any.isRequired,
-  isSelected: PropTypes.bool.isRequired
+  isSelected: PropTypes.bool
 };

package/es/components/datagrid/body/header/column_actions.js

@@ -83,16 +83,6 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   var closePopover = useCallback(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = useCallback(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = useCallback(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = useEuiI18n('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -107,10 +97,10 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   useEffect(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -156,17 +146,11 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
       iconType: "boxesVertical",
       iconSize: "s",
       color: "text",
-      css: styles.euiDataGridHeaderCell__actions,
       className: "euiDataGridHeaderCell__button",
       onClick: togglePopover,
       buttonRef: actionsButtonRef,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-      ,
-      "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-      : undefined,
       "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+      css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.end, ";label:ColumnActions;"],
       "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
     }),
     isOpen: isPopoverOpen,

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -54,6 +54,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = useHasColumnActions(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = classnames(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -97,8 +98,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
       isLastColumn: isLastColumn,
       width: width,
       "aria-sort": ariaSort,
-      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-      ,
+      "aria-labelledby": cellContentId,
       "aria-describedby": classnames(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
       "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
     }), function (hasFocusTrap) {
@@ -107,11 +107,13 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
       }, ___EmotionJSX(EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), ___EmotionJSX("div", {
         css: contentStyles,
         className: "euiDataGridHeaderCell__content",
-        title: title
+        title: title,
+        id: cellContentId,
+        "aria-label": displayAsText ? displayAsText : typeof children === 'string' ? children : undefined
       }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && ___EmotionJSX(ColumnActions, {
         index: index,
         id: id,

package/es/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -9,7 +9,6 @@
 import { css } from '@emotion/react';
 import { euiCanAnimate, euiTextTruncate, logicalCSS, logicalTextAlignCSS } from '../../../../global_styling';
 import { euiDataGridCellOutlineSelectors } from '../cell/data_grid_cell.styles';
-
 /**
  * Styles only applied to data header cell content, not control header cells
  */
@@ -17,11 +16,18 @@ export var euiDataGridHeaderCellStyles = function euiDataGridHeaderCellStyles(eu
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat(logicalCSS('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/css("flex-grow:1;", euiTextTruncate(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/css("overflow:hidden;display:flex;", header.hideActions, " &{", logicalCSS('width', 0), " opacity:0;}", euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
+    euiDataGridHeaderCell__actions: {
+      action: /*#__PURE__*/css("overflow:hidden;display:flex;max-inline-size:24px;", euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in,margin-left ", euiTheme.animation.fast, " ease-in;animation:none!important;};label:action;"),
+      start: /*#__PURE__*/css(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/css(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label"];
+var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -41,6 +41,7 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiDataGridHeaderCell', className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellWrapperStyles);
@@ -106,7 +107,8 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), ___EmotionJSX(HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,
@@ -122,6 +124,7 @@ EuiDataGridHeaderCellWrapper.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   className: PropTypes.string,
   "aria-label": PropTypes.any,
+  "aria-labelledby": PropTypes.any,
   hasColumnActions: PropTypes.bool,
   isDragging: PropTypes.bool,
   onKeyDown: PropTypes.any

package/es/components/form/file_picker/file_picker.styles.js

@@ -43,7 +43,7 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
   return {
-    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : formVariables.borderHovered, ";--euiFormControlStateStyle:solid;}&:focus-within{", highContrastModeStyles(euiThemeContext, {
+    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : euiTheme.colors.borderInteractiveFormsHoverProminent, ";--euiFormControlStateStyle:", highContrastMode ? 'solid' : 'dashed', ";}&:focus-within{", highContrastModeStyles(euiThemeContext, {
       forced: "\n              ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderFocused), "\n            ")
     }), ";};label:euiFilePicker;"),
     isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;label:isDroppingFile;"),
@@ -62,8 +62,8 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
         forced: "\n                  text-decoration: underline;\n                "
       }), ";}.euiFilePicker__icon{transform:scale(1.05);}}};label:largeInteractive;")
     },
-    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", formVariables.borderColor, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
-    disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", euiTheme.colors.borderBaseProminent, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    disabled: /*#__PURE__*/css(formStyles.disabled, "--euiFormControlStateColor:transparent;;label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

package/es/components/icon/assets/paper_clip.js

@@ -27,7 +27,7 @@ var EuiIconPaperClip = function EuiIconPaperClip(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M9.84 2.019 3.046 8.57c-.987.952-1.133 2.517-.199 3.516.951 1.021 2.58 1.106 3.64.19.034-.03.068-.061.1-.092l5.655-5.452a.484.484 0 0 0 0-.703.53.53 0 0 0-.729 0L5.92 11.421c-.572.551-1.505.657-2.131.163a1.455 1.455 0 0 1-.118-2.211l6.899-6.651a2.646 2.646 0 0 1 3.644 0 2.422 2.422 0 0 1 0 3.513L7.3 12.901c-1.333 1.285-3.497 1.493-4.95.336-1.54-1.22-1.764-3.411-.5-4.897a3.33 3.33 0 0 1 .238-.252l5.78-5.572a.484.484 0 0 0 0-.703.53.53 0 0 0-.73 0l-5.78 5.572a4.36 4.36 0 0 0 0 6.324c2.188 2.109 5.202 1.31 6.66-.095l6.925-6.676a3.39 3.39 0 0 0 0-4.92C13.534.66 11.25.66 9.841 2.019z"
+    d: "M7 11c0 .423.105.648.229.771.123.124.348.229.771.229.423 0 .648-.105.771-.229.124-.123.229-.348.229-.771V5h1v6c0 .577-.145 1.102-.521 1.479C9.102 12.854 8.577 13 8 13c-.577 0-1.102-.145-1.479-.521C6.145 12.101 6 11.577 6 11V4c0-.719.215-1.468.716-2.046C7.226 1.364 7.996 1 9 1c1.005 0 1.773.365 2.284.954.5.578.716 1.327.716 2.046v7c0 1.103-.345 2.11-1.043 2.845C10.255 14.583 9.242 15 8 15c-1.242 0-2.255-.417-2.957-1.155C4.345 13.11 4 12.103 4 11V4h1v7c0 .897.279 1.64.768 2.155C6.253 13.666 6.99 14 8 14c1.01 0 1.747-.334 2.232-.845.49-.515.768-1.258.768-2.155V4c0-.531-.16-1.032-.472-1.392C10.227 2.26 9.745 2 9 2s-1.227.26-1.528.608C7.16 2.968 7 3.47 7 4v7Z"
   }));
 };
 export var icon = EuiIconPaperClip;

package/es/components/icon/assets/streams_wired.js

@@ -22,17 +22,18 @@ var EuiIconStreamsWired = function EuiIconStreamsWired(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
+    fill: "none",
     viewBox: "0 0 16 16",
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5v1c0 .564-.19 1.082-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.501 2.501 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8h-.504c.315.418.504.936.504 1.5v1A1.5 1.5 0 0 0 9 12h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5v-1A1.5 1.5 0 0 0 5 8H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 5.5v-1A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 11a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5V6a2.49 2.49 0 0 1-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.496 2.496 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8.5h-.504c.315.418.504.936.504 1.5v1.5A1.5 1.5 0 0 0 9 13h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5V10A1.5 1.5 0 0 0 5 8.5H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 6V4.5A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 12a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }), ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M13.5 6a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425A1.5 1.5 0 0 1 13.5 6Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 6.5a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425a1.5 1.5 0 0 1 1.413-1Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }));
 };

package/es/services/theme/high_contrast_overrides.js

@@ -36,19 +36,23 @@ export var useHighContrastModifications = function useHighContrastModifications(
       borderBasePrimary: systemTheme.colors.textPrimary,
       borderBaseAccent: systemTheme.colors.textAccent,
       borderBaseAccentSecondary: systemTheme.colors.textAccentSecondary,
+      borderBaseNeutral: systemTheme.colors.textNeutral,
       borderBaseSuccess: systemTheme.colors.textSuccess,
       borderBaseWarning: systemTheme.colors.textWarning,
+      borderBaseRisk: systemTheme.colors.textRisk,
       borderBaseDanger: systemTheme.colors.textDanger,
       borderBasePlain: borderColor,
       borderBaseSubdued: borderColor,
+      borderBaseProminent: borderColor,
       borderBaseDisabled: systemTheme.colors.textDisabled,
       borderBaseFloating: borderColor,
-      borderBaseFormsControl: borderColor,
       borderStrongPrimary: systemTheme.colors.textPrimary,
       borderStrongAccent: systemTheme.colors.textAccent,
       borderStrongAccentSecondary: systemTheme.colors.textAccentSecondary,
+      borderStrongNeutral: systemTheme.colors.textNeutral,
       borderStrongSuccess: systemTheme.colors.textSuccess,
       borderStrongWarning: systemTheme.colors.textWarning,
+      borderStrongRisk: systemTheme.colors.textRisk,
       borderStrongDanger: systemTheme.colors.textDanger
     };
     return {

package/eui.d.ts

@@ -455,38 +455,46 @@ declare module '@elastic/eui/src/services/theme/high_contrast_overrides' {
 	            borderBasePrimary: string;
 	            borderBaseAccent: string;
 	            borderBaseAccentSecondary: string;
+	            borderBaseNeutral: string;
 	            borderBaseSuccess: string;
 	            borderBaseWarning: string;
+	            borderBaseRisk: string;
 	            borderBaseDanger: string;
 	            borderBasePlain: string;
 	            borderBaseSubdued: string;
+	            borderBaseProminent: string;
 	            borderBaseDisabled: string;
 	            borderBaseFloating: string;
-	            borderBaseFormsControl: string;
 	            borderStrongPrimary: string;
 	            borderStrongAccent: string;
 	            borderStrongAccentSecondary: string;
+	            borderStrongNeutral: string;
 	            borderStrongSuccess: string;
 	            borderStrongWarning: string;
+	            borderStrongRisk: string;
 	            borderStrongDanger: string;
 	        };
 	        DARK: {
 	            borderBasePrimary: string;
 	            borderBaseAccent: string;
 	            borderBaseAccentSecondary: string;
+	            borderBaseNeutral: string;
 	            borderBaseSuccess: string;
 	            borderBaseWarning: string;
+	            borderBaseRisk: string;
 	            borderBaseDanger: string;
 	            borderBasePlain: string;
 	            borderBaseSubdued: string;
+	            borderBaseProminent: string;
 	            borderBaseDisabled: string;
 	            borderBaseFloating: string;
-	            borderBaseFormsControl: string;
 	            borderStrongPrimary: string;
 	            borderStrongAccent: string;
 	            borderStrongAccentSecondary: string;
+	            borderStrongNeutral: string;
 	            borderStrongSuccess: string;
 	            borderStrongWarning: string;
+	            borderStrongRisk: string;
 	            borderStrongDanger: string;
 	        };
 	    };
@@ -15256,6 +15264,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    width?: number | null;
 	    className?: string;
 	    'aria-label'?: AriaAttributes['aria-label'];
+	    'aria-labelledby'?: AriaAttributes['aria-labelledby'];
 	    hasColumnActions?: boolean;
 	    isDragging?: boolean;
 	    onKeyDown?: KeyboardEventHandler;
@@ -16639,7 +16648,11 @@ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_heade
 	    euiDataGridHeaderCell__content: import("@emotion/react").SerializedStyles;
 	    right: import("@emotion/react").SerializedStyles;
 	    euiDataGridHeaderCell__popover: import("@emotion/react").SerializedStyles;
-	    euiDataGridHeaderCell__actions: import("@emotion/react").SerializedStyles;
+	    euiDataGridHeaderCell__actions: {
+	        action: import("@emotion/react").SerializedStyles;
+	        start: import("@emotion/react").SerializedStyles;
+	        end: import("@emotion/react").SerializedStyles;
+	    };
 	};
 
 }

package/lib/components/basic_table/collapsed_item_actions.js

@@ -89,7 +89,9 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
-            delay: 'long'
+            delay: 'long',
+            // Avoid screen-readers announcing the same text twice
+            disableScreenReaderOutput: typeof buttonContent === 'string' && buttonContent === toolTipContent
           }
         }, buttonContent));
       }

package/lib/components/basic_table/default_item_action.js

@@ -39,6 +39,12 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
   var icon = action.icon ? (0, _action_types.callWithItemIfFunction)(item)(action.icon) : undefined;
   var actionContent = (0, _action_types.callWithItemIfFunction)(item)(action.name);
   var tooltipContent = (0, _action_types.callWithItemIfFunction)(item)(action.description);
+  var tooltipProps = {
+    content: tooltipContent,
+    delay: 'long',
+    // Avoid screen-readers announcing the same text twice
+    disableScreenReaderOutput: typeof actionContent === 'string' && actionContent === tooltipContent
+  };
   var href = (0, _action_types.callWithItemIfFunction)(item)(action.href);
   var dataTestSubj = (0, _action_types.callWithItemIfFunction)(item)(action['data-test-subj']);
   var ariaLabelId = (0, _accessibility.useGeneratedHtmlId)();
@@ -82,8 +88,5 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
       flush: "right"
     }, actionContent);
   }
-  return enabled ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-    content: tooltipContent,
-    delay: "long"
-  }, button), ariaLabelledBy) : (0, _react2.jsx)(_react.default.Fragment, null, button, ariaLabelledBy);
+  return enabled ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip.EuiToolTip, tooltipProps, button), ariaLabelledBy) : (0, _react2.jsx)(_react.default.Fragment, null, button, ariaLabelledBy);
 };

package/lib/components/button/button_group/button_group_button.js

@@ -43,8 +43,7 @@ var EuiButtonGroupButton = exports.EuiButtonGroupButton = function EuiButtonGrou
     id = _ref.id,
     isDisabled = _ref.isDisabled,
     isIconOnly = _ref.isIconOnly,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    isSelected = _ref.isSelected,
     label = _ref.label,
     value = _ref.value,
     size = _ref.size,
@@ -213,5 +212,5 @@ var EuiButtonGroupButtonWithToolTip = function EuiButtonGroupButtonWithToolTip(_
 EuiButtonGroupButtonWithToolTip.propTypes = {
   children: _propTypes.default.element.isRequired,
   wrapperCss: _propTypes.default.any.isRequired,
-  isSelected: _propTypes.default.bool.isRequired
+  isSelected: _propTypes.default.bool
 };

package/lib/components/datagrid/body/header/column_actions.js

@@ -89,16 +89,6 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   var closePopover = (0, _react.useCallback)(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -113,10 +103,10 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   (0, _react.useEffect)(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -162,17 +152,11 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
       iconType: "boxesVertical",
       iconSize: "s",
       color: "text",
-      css: styles.euiDataGridHeaderCell__actions,
       className: "euiDataGridHeaderCell__button",
       onClick: togglePopover,
       buttonRef: actionsButtonRef,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-      ,
-      "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-      : undefined,
       "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+      css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.end, ";label:ColumnActions;"],
       "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
     }),
     isOpen: isPopoverOpen,

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -61,6 +61,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = (0, _column_actions.useHasColumnActions)(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = (0, _classnames2.default)(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -104,8 +105,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       isLastColumn: isLastColumn,
       width: width,
       "aria-sort": ariaSort,
-      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-      ,
+      "aria-labelledby": cellContentId,
       "aria-describedby": (0, _classnames2.default)(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
       "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
     }), function (hasFocusTrap) {
@@ -114,11 +114,13 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), (0, _react2.jsx)("div", {
         css: contentStyles,
         className: "euiDataGridHeaderCell__content",
-        title: title
+        title: title,
+        id: cellContentId,
+        "aria-label": displayAsText ? displayAsText : typeof children === 'string' ? children : undefined
       }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && (0, _react2.jsx)(_column_actions.ColumnActions, {
         index: index,
         id: id,

package/lib/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -22,11 +22,18 @@ var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.euiTextTruncate)(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
+    euiDataGridHeaderCell__actions: {
+      action: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;max-inline-size:24px;", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in,margin-left ", euiTheme.animation.fast, " ease-in;animation:none!important;};label:action;"),
+      start: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -13,7 +13,7 @@ var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label"];
+var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -49,6 +49,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell_wrapper.euiDataGridHeaderCellWrapperStyles);
@@ -114,7 +115,8 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,
@@ -130,6 +132,7 @@ EuiDataGridHeaderCellWrapper.propTypes = {
   width: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.any,
+  "aria-labelledby": _propTypes.default.any,
   hasColumnActions: _propTypes.default.bool,
   isDragging: _propTypes.default.bool,
   onKeyDown: _propTypes.default.any

package/lib/components/form/file_picker/file_picker.styles.js

@@ -47,7 +47,7 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
   return {
-    euiFilePicker: /*#__PURE__*/(0, _react.css)("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : formVariables.borderHovered, ";--euiFormControlStateStyle:solid;}&:focus-within{", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    euiFilePicker: /*#__PURE__*/(0, _react.css)("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : euiTheme.colors.borderInteractiveFormsHoverProminent, ";--euiFormControlStateStyle:", highContrastMode ? 'solid' : 'dashed', ";}&:focus-within{", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
       forced: "\n              ".concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, formVariables.borderFocused), "\n            ")
     }), ";};label:euiFilePicker;"),
     isDroppingFile: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;label:isDroppingFile;"),
@@ -66,8 +66,8 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
         forced: "\n                  text-decoration: underline;\n                "
       }), ";}.euiFilePicker__icon{transform:scale(1.05);}}};label:largeInteractive;")
     },
-    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", formVariables.borderColor, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
-    disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
+    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", euiTheme.colors.borderBaseProminent, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, "--euiFormControlStateColor:transparent;;label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),

package/lib/components/icon/assets/paper_clip.js

@@ -34,7 +34,7 @@ var EuiIconPaperClip = function EuiIconPaperClip(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M9.84 2.019 3.046 8.57c-.987.952-1.133 2.517-.199 3.516.951 1.021 2.58 1.106 3.64.19.034-.03.068-.061.1-.092l5.655-5.452a.484.484 0 0 0 0-.703.53.53 0 0 0-.729 0L5.92 11.421c-.572.551-1.505.657-2.131.163a1.455 1.455 0 0 1-.118-2.211l6.899-6.651a2.646 2.646 0 0 1 3.644 0 2.422 2.422 0 0 1 0 3.513L7.3 12.901c-1.333 1.285-3.497 1.493-4.95.336-1.54-1.22-1.764-3.411-.5-4.897a3.33 3.33 0 0 1 .238-.252l5.78-5.572a.484.484 0 0 0 0-.703.53.53 0 0 0-.73 0l-5.78 5.572a4.36 4.36 0 0 0 0 6.324c2.188 2.109 5.202 1.31 6.66-.095l6.925-6.676a3.39 3.39 0 0 0 0-4.92C13.534.66 11.25.66 9.841 2.019z"
+    d: "M7 11c0 .423.105.648.229.771.123.124.348.229.771.229.423 0 .648-.105.771-.229.124-.123.229-.348.229-.771V5h1v6c0 .577-.145 1.102-.521 1.479C9.102 12.854 8.577 13 8 13c-.577 0-1.102-.145-1.479-.521C6.145 12.101 6 11.577 6 11V4c0-.719.215-1.468.716-2.046C7.226 1.364 7.996 1 9 1c1.005 0 1.773.365 2.284.954.5.578.716 1.327.716 2.046v7c0 1.103-.345 2.11-1.043 2.845C10.255 14.583 9.242 15 8 15c-1.242 0-2.255-.417-2.957-1.155C4.345 13.11 4 12.103 4 11V4h1v7c0 .897.279 1.64.768 2.155C6.253 13.666 6.99 14 8 14c1.01 0 1.747-.334 2.232-.845.49-.515.768-1.258.768-2.155V4c0-.531-.16-1.032-.472-1.392C10.227 2.26 9.745 2 9 2s-1.227.26-1.528.608C7.16 2.968 7 3.47 7 4v7Z"
   }));
 };
 var icon = exports.icon = EuiIconPaperClip;