@elastic/eui 95.9.0 → 95.10.0

package/lib/components/datagrid/body/cell/focus_utils.js

@@ -9,8 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tabbable = require("tabbable");
 var _services = require("../../../../services");
+var _accessibility = require("../../../../services/accessibility");
+var _utils = require("../../../../utils");
 var _focus_trap = require("../../../focus_trap");
-var _accessibility = require("../../../accessibility");
+var _accessibility2 = require("../../../accessibility");
 var _i18n = require("../../../i18n");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,7 +43,8 @@ var HandleInteractiveChildren = exports.HandleInteractiveChildren = function Han
   var cellEl = _ref.cellEl,
     children = _ref.children,
     updateCellFocusContext = _ref.updateCellFocusContext,
-    renderFocusTrap = _ref.renderFocusTrap;
+    renderFocusTrap = _ref.renderFocusTrap,
+    onInteractiveChildrenFound = _ref.onInteractiveChildrenFound;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasInteractiveChildren = _useState2[0],
@@ -50,12 +53,11 @@ var HandleInteractiveChildren = exports.HandleInteractiveChildren = function Han
   // On mount, disable all interactive children
   (0, _react.useEffect)(function () {
     if (cellEl) {
-      var interactiveChildren = disableInteractives(cellEl);
-      if (renderFocusTrap) {
-        setHasInteractiveChildren(interactiveChildren.length > 0);
-      }
+      var interactives = disableInteractives(cellEl);
+      onInteractiveChildrenFound === null || onInteractiveChildrenFound === void 0 || onInteractiveChildrenFound(interactives);
+      setHasInteractiveChildren(interactives.length > 0);
     }
-  }, [cellEl, renderFocusTrap]);
+  }, [cellEl, onInteractiveChildrenFound]);
 
   // Ensure that any interactive children that are clicked update the latest cell focus context
   (0, _react.useEffect)(function () {
@@ -89,7 +91,8 @@ var HandleInteractiveChildren = exports.HandleInteractiveChildren = function Han
 HandleInteractiveChildren.propTypes = {
   cellEl: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([null])]),
   updateCellFocusContext: _propTypes.default.func.isRequired,
-  renderFocusTrap: _propTypes.default.bool
+  renderFocusTrap: _propTypes.default.bool,
+  onInteractiveChildrenFound: _propTypes.default.func
 };
 var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
   var cellEl = _ref2.cellEl,
@@ -98,6 +101,24 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
     _useState4 = _slicedToArray(_useState3, 2),
     isCellEntered = _useState4[0],
     setIsCellEntered = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isExited = _useState6[0],
+    setExited = _useState6[1];
+  var keyboardHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'keyboardHint'
+  });
+  var exitedHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'exited'
+  });
+
+  // direct DOM manipulation as workaround to attach required hints
+  (0, _react.useEffect)(function () {
+    var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
+    cellEl.setAttribute('aria-describedby', "".concat(currentAriaDescribedbyId, " ").concat(exitedHintAriaId, " ").concat(keyboardHintAriaId, " "));
+  }, [cellEl, keyboardHintAriaId, exitedHintAriaId]);
   (0, _react.useEffect)(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -117,28 +138,52 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
           event.preventDefault();
           setIsCellEntered(function (isCellEntered) {
             if (isCellEntered === true) {
+              setExited(true);
               requestAnimationFrame(function () {
                 return cellEl.focus();
               }); // move focus to cell
               return false;
+            } else if (
+            // when opened content is closed, we don't want Escape to return to the cell
+            // immediately but instead return focus to a trigger as expected
+            isCellEntered === false && (0, _utils.isDOMNode)(event.target) && (0, _utils.isDOMNode)(event.currentTarget) && event.currentTarget.contains(event.target)) {
+              return true;
             }
             return isCellEntered;
           });
           break;
       }
     };
+
+    // ensures the SR text is reset when navigating to a different cell
+    var onBlur = function onBlur() {
+      return setExited(false);
+    };
     cellEl.addEventListener('keyup', onKeyUp);
+    cellEl.addEventListener('blur', onBlur);
     return function () {
       cellEl.removeEventListener('keyup', onKeyUp);
+      cellEl.removeEventListener('blur', onBlur);
     };
   }, [cellEl]);
   return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     disabled: !isCellEntered,
+    clickOutsideDisables: true,
     onDeactivation: function onDeactivation() {
       return setIsCellEntered(false);
-    },
-    clickOutsideDisables: true
-  }, children, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, ' - ', (0, _react2.jsx)(_i18n.EuiI18n
+    }
+  }, children, (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: exitedHintAriaId,
+    "aria-hidden": "true"
+  }, isExited && (0, _react2.jsx)(_i18n.EuiI18n
+  // eslint-disable-next-line local/i18n
+  , {
+    token: "euiDataGridCell.focusTrapExitPrompt",
+    default: "Exited cell content."
+  }))), (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: keyboardHintAriaId,
+    "aria-hidden": "true"
+  }, !isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
@@ -164,7 +209,8 @@ var enableAndFocusInteractives = function enableAndFocusInteractives(cell) {
   var interactives = cell.querySelectorAll('[data-euigrid-tab-managed]');
   interactives.forEach(function (element, i) {
     element.setAttribute('tabIndex', '0');
-    if (i === 0) {
+    // focus the first element only if we're on the cell and not inside of it
+    if (i === 0 && !cell.contains(document.activeElement)) {
       element.focus();
     }
   });

package/lib/components/datagrid/body/data_grid_body.js

@@ -108,6 +108,7 @@ EuiDataGridBody.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**

package/lib/components/datagrid/body/data_grid_body_custom.js

@@ -257,6 +257,7 @@ EuiDataGridBodyCustomRender.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**

package/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -397,6 +397,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**

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

@@ -11,20 +11,27 @@ var _react = _interopRequireWildcard(require("react"));
 var _tabbable = require("tabbable");
 var _services = require("../../../../services");
 var _accessibility = require("../../../../services/accessibility");
-var _accessibility2 = require("../../../accessibility");
 var _i18n = require("../../../i18n");
 var _icon = require("../../../icon");
 var _list_group = require("../../../list_group");
 var _popover = require("../../../popover");
+var _button_icon = require("../../../button/button_icon/button_icon.styles");
 var _focus = require("../../utils/focus");
 var _column_actions = require("./column_actions");
 var _data_grid_column_resizer = require("./data_grid_column_resizer");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 var _react2 = require("@emotion/react");
+var _excluded = ["children", "title", "arrow"];
+/*
+ * 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.
+ */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 _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)."; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -34,21 +41,19 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
- * 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.
- */
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var CellContent = function CellContent(_ref) {
   var children = _ref.children,
     title = _ref.title,
-    arrow = _ref.arrow;
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    arrow = _ref.arrow,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", _extends({}, rest, {
     title: title,
     className: "euiDataGridHeaderCell__content"
-  }, children), arrow);
+  }), children), arrow);
 };
 CellContent.propTypes = {
   title: _propTypes.default.string.isRequired,
@@ -78,15 +83,29 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
     display = column.display,
     displayAsText = column.displayAsText,
     displayHeaderCellProps = column.displayHeaderCellProps;
+  var title = displayAsText || id;
+  var children = display || displayAsText || id;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
+
+  /*
+   * Column actions
+   */
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPopoverOpen = _useState2[0],
     setIsPopoverOpen = _useState2[1];
+  var togglePopover = (0, _react.useCallback)(function () {
+    setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var closePopover = (0, _react.useCallback)(function () {
+    return setIsPopoverOpen(false);
+  }, []);
   var popoverArrowNavigationProps = usePopoverArrowNavigation();
   var columnActions = (0, _react.useMemo)(function () {
     return (0, _column_actions.getColumnActions)({
@@ -105,14 +124,22 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell, index]);
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = (0, _react.useRef)(null);
-  var focusActionsButton = (0, _react.useCallback)(function () {
+  var clickActionsButton = (0, _react.useCallback)(function () {
     var _actionsButtonRef$cur;
-    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 || _actionsButtonRef$cur.focus();
+    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 || _actionsButtonRef$cur.click();
   }, []);
   var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isActionsButtonFocused = _useState4[0],
     setIsActionsButtonFocused = _useState4[1];
+  var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
+    title: title
+  });
+  var actionsEnterKeyInstructions = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsEnterKeyInstructions', "Press the Enter key to view this column's actions");
+
+  /*
+   * Column sorting
+   */
   var _useSortingUtils = useSortingUtils({
       sorting: sorting,
       id: id,
@@ -125,13 +152,12 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
     prefix: 'euiDataGridCellHeader',
     suffix: 'sorting'
   });
-  var actionsAriaId = (0, _accessibility.useGeneratedHtmlId)({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'actions'
-  });
+
+  /*
+   * Rendering
+   */
   var classes = (0, _classnames2.default)(_defineProperty(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
-  var title = displayAsText || id;
-  var children = display || displayAsText || id;
+  var emptyHoverStyles = (0, _services.useEuiMemoizedStyles)(_button_icon._emptyHoverStyles);
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -139,75 +165,58 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
     width: width,
     "aria-sort": ariaSort,
     hasActionsPopover: showColumnActions,
-    isActionsButtonFocused: isActionsButtonFocused,
-    focusActionsButton: focusActionsButton
-  }), column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
-    columnId: id,
-    columnWidth: width,
-    setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(CellContent, {
-    title: title,
-    arrow: sortingArrow
-  }, children), sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
-    className: "euiDataGridHeaderCell__button",
-    onClick: function onClick() {
-      return setIsPopoverOpen(function (isPopoverOpen) {
-        return !isPopoverOpen;
-      });
-    },
-    onFocus: function onFocus() {
-      return setIsActionsButtonFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setIsActionsButtonFocused(false);
-    },
-    "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
-    ref: actionsButtonRef,
-    "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-  }, (0, _react2.jsx)(CellContent, {
-    title: title,
-    arrow: sortingArrow
-  }, children), (0, _react2.jsx)(_popover.EuiPopover, _extends({
-    display: "block",
-    panelPaddingSize: "none",
-    offset: 7,
-    anchorPosition: "downRight",
-    css: _ref3 // Align to right
+    openActionsPopover: clickActionsButton,
+    "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
     ,
-    focusTrapProps: {
-      // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
-      onClickOutside: function onClickOutside(event) {
-        var _actionsButtonRef$cur2;
-        if (((_actionsButtonRef$cur2 = actionsButtonRef.current) === null || _actionsButtonRef$cur2 === void 0 ? void 0 : _actionsButtonRef$cur2.contains(event.target)) === false) {
-          setIsPopoverOpen(false);
-        }
-      }
-    },
-    button: (0, _react2.jsx)("div", {
-      className: "euiDataGridHeaderCell__icon"
-    }, (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "boxesVertical",
-      size: "s",
-      color: "text"
-    })),
-    isOpen: isPopoverOpen,
-    closePopover: function closePopover() {
-      return setIsPopoverOpen(false);
-    }
-  }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
-    listItems: columnActions,
-    gutterSize: "none",
-    "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  }))), (0, _react2.jsx)("p", {
-    id: sortingAriaId,
-    hidden: true
-  }, sortingScreenReaderText), (0, _react2.jsx)("p", {
-    id: actionsAriaId,
-    hidden: true
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiDataGridHeaderCell.headerActions",
-    default: "Click to view column header actions"
-  }))));
+    "aria-describedby": sortingAriaId
+  }), function (hasFocusTrap) {
+    return (0, _react2.jsx)(_react.default.Fragment, null, column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
+      columnId: id,
+      columnWidth: width,
+      setColumnWidth: setColumnWidth
+    }) : null, (0, _react2.jsx)(CellContent, {
+      title: title,
+      arrow: sortingArrow
+    }, children), sortingScreenReaderText && (0, _react2.jsx)("p", {
+      id: sortingAriaId,
+      hidden: true
+    }, sortingScreenReaderText), showColumnActions && (0, _react2.jsx)(_popover.EuiPopover, _extends({
+      display: "block",
+      panelPaddingSize: "none",
+      offset: 7,
+      anchorPosition: "downRight",
+      css: _ref3 // Align to right
+      ,
+      button: (0, _react2.jsx)("button", {
+        ref: actionsButtonRef,
+        className: "euiDataGridHeaderCell__button",
+        css: emptyHoverStyles.text,
+        onClick: togglePopover,
+        onFocus: function onFocus() {
+          return setIsActionsButtonFocused(true);
+        },
+        onBlur: function onBlur() {
+          return setIsActionsButtonFocused(false);
+        },
+        "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
+        : undefined,
+        "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+        "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
+      }, (0, _react2.jsx)("div", {
+        className: "euiDataGridHeaderCell__icon"
+      }, (0, _react2.jsx)(_icon.EuiIcon, {
+        type: "boxesVertical",
+        size: "s",
+        color: "text"
+      }))),
+      isOpen: isPopoverOpen,
+      closePopover: closePopover
+    }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
+      listItems: columnActions,
+      gutterSize: "none",
+      "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
+    })));
+  });
 });
 EuiDataGridHeaderCell.propTypes = {
   column: _propTypes.default.shape({
@@ -224,6 +233,7 @@ EuiDataGridHeaderCell.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**

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

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDataGridHeaderCellWrapper = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../../services");
 var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "isActionsButtonFocused", "focusActionsButton"];
+var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,9 +25,9 @@ var _excluded = ["id", "index", "width", "className", "children", "hasActionsPop
  * standard header cells. Most of its shared logic is around focus state/UX,
  * but it also DRY's out certain class/data-test-subj/style attributes
  */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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."); }
@@ -43,8 +44,8 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     className = _ref.className,
     children = _ref.children,
     hasActionsPopover = _ref.hasActionsPopover,
-    isActionsButtonFocused = _ref.isActionsButtonFocused,
-    focusActionsButton = _ref.focusActionsButton,
+    openActionsPopover = _ref.openActionsPopover,
+    ariaLabel = _ref['aria-label'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
 
@@ -53,16 +54,28 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     _useState2 = _slicedToArray(_useState, 2),
     headerEl = _useState2[0],
     setHeaderEl = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderFocusTrap = _useState4[0],
+    setRenderFocusTrap = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    interactiveChildren = _useState6[0],
+    setInteractiveChildren = _useState6[1];
+  (0, _react.useEffect)(function () {
+    // We're checking for interactive children outside of the default actions button
+    setRenderFocusTrap(interactiveChildren.length > (hasActionsPopover ? 1 : 0));
+  }, [hasActionsPopover, interactiveChildren]);
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     onFocusUpdate = _useContext.onFocusUpdate;
   var updateCellFocusContext = (0, _react.useCallback)(function () {
     setFocusedCell([index, -1]);
   }, [index, setFocusedCell]);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFocused = _useState4[0],
-    setIsFocused = _useState4[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocused = _useState8[0],
+    setIsFocused = _useState8[1];
   (0, _react.useEffect)(function () {
     onFocusUpdate([index, -1], function (isFocused) {
       setIsFocused(isFocused);
@@ -75,18 +88,17 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     });
   }, [index, onFocusUpdate, headerEl]);
 
-  // For cell headers with actions, auto-focus into the button instead of the cell wrapper div
-  // The button text is significantly more useful to screen readers (e.g. contains sort order & hints)
-  var onFocus = (0, _react.useCallback)(function (e) {
-    if (hasActionsPopover && e.target === headerEl) {
-      focusActionsButton === null || focusActionsButton === void 0 || focusActionsButton();
+  // For cell headers with only actions, auto-open the actions popover on enter keypress
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === _services.keys.ENTER && hasActionsPopover && !renderFocusTrap && e.target === headerEl) {
+      openActionsPopover === null || openActionsPopover === void 0 || openActionsPopover();
     }
-  }, [hasActionsPopover, focusActionsButton, headerEl]);
+  }, [hasActionsPopover, openActionsPopover, renderFocusTrap, headerEl]);
   return (0, _react2.jsx)("div", _extends({
     role: "columnheader",
     ref: setHeaderEl,
-    tabIndex: isFocused && !isActionsButtonFocused ? 0 : -1,
-    onFocus: onFocus,
+    tabIndex: isFocused ? 0 : -1,
+    onKeyDown: onKeyDown,
     className: classes,
     "data-test-subj": "dataGridHeaderCell-".concat(id),
     "data-gridcell-column-id": id,
@@ -95,19 +107,22 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     "data-gridcell-visible-row-index": "-1",
     style: width != null ? {
       width: "".concat(width, "px")
-    } : {}
+    } : {},
+    "aria-label": renderFocusTrap ? ariaLabel : undefined
   }, rest), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
     cellEl: headerEl,
     updateCellFocusContext: updateCellFocusContext,
-    renderFocusTrap: !hasActionsPopover
-  }, children));
+    renderFocusTrap: renderFocusTrap,
+    onInteractiveChildrenFound: setInteractiveChildren
+  }, typeof children === 'function' ? children(renderFocusTrap) : children));
 };
 EuiDataGridHeaderCellWrapper.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]).isRequired,
   id: _propTypes.default.string.isRequired,
   index: _propTypes.default.number.isRequired,
   width: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   className: _propTypes.default.string,
+  "aria-label": _propTypes.default.any,
   hasActionsPopover: _propTypes.default.bool,
-  isActionsButtonFocused: _propTypes.default.bool,
-  focusActionsButton: _propTypes.default.func
+  openActionsPopover: _propTypes.default.func
 };

package/lib/components/datagrid/controls/column_sorting.js

@@ -283,6 +283,7 @@ DataGridSortingControl.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**

package/lib/components/datagrid/data_grid.a11y.js

@@ -213,6 +213,7 @@ describe('EuiDataGrid', function () {
       cy.checkAxe();
     });
     it('has zero violations when the column actions menu is open', function () {
+      cy.get('.euiDataGridHeaderCell').first().realHover();
       cy.get('button.euiDataGridHeaderCell__button').first().realClick();
       cy.checkAxe();
     });
@@ -222,6 +223,7 @@ describe('EuiDataGrid', function () {
       cy.checkAxe();
     });
     it('has zero violations on sort and when the columns sorting menu is open', function () {
+      cy.get('.euiDataGridHeaderCell').last().realHover();
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
       cy.get('div[data-test-subj="dataGridColumnSortingPopover"] button').realClick();

package/lib/components/datagrid/utils/in_memory.js

@@ -213,6 +213,7 @@ EuiDataGridInMemoryRenderer.propTypes = {
        * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
        * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
        * If not passed, `id` will be shown as the column name.
+       * Passing this together with `display` is useful to ensure an accessible label is added to the column.
        */
     displayAsText: _propTypes.default.string,
     /**