@elastic/eui 72.2.0 → 73.0.0

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

@@ -45,6 +45,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
@@ -116,6 +118,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
   var buttonText = (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiColumnSelector.button",
     default: "Columns"
@@ -188,18 +191,23 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
       key: id,
       draggableId: id,
       index: index,
-      isDragDisabled: !isDragEnabled
+      isDragDisabled: !isDragEnabled,
+      hasInteractiveChildren: true,
+      customDragHandle: true
     }, function (provided, state) {
       return (0, _react2.jsx)("div", {
         className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
         responsive: false,
-        gutterSize: "m",
+        gutterSize: "s",
         alignItems: "center"
-      }, (0, _react2.jsx)(_flex.EuiFlexItem, null, allowColumnHiding ? (0, _react2.jsx)(_form.EuiSwitch, {
+      }, allowColumnHiding && (0, _react2.jsx)(_flex.EuiFlexItem, {
+        grow: false
+      }, (0, _react2.jsx)(_form.EuiSwitch, {
         name: id,
         label: displayValues[id] || id,
+        showLabel: false,
         checked: visibleColumnIds.has(id),
         compressed: true,
         className: "euiSwitch--mini",
@@ -211,11 +219,18 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
           setVisibleColumns(nextVisibleColumns);
         },
         "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      }) : (0, _react2.jsx)("span", {
+      })), (0, _react2.jsx)(_flex.EuiFlexItem // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+      , _extends({}, provided.dragHandleProps, {
+        "aria-hidden": true,
+        tabIndex: -1
+      }), (0, _react2.jsx)("span", {
         className: "euiDataGridColumnSelector__itemLabel"
-      }, id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, {
+      }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
         grow: false
-      }, (0, _react2.jsx)(_icon.EuiIcon, {
+      }, provided.dragHandleProps, {
+        "aria-label": dragHandleAriaLabel
+      }), (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grab",
         color: "subdued"
       }))));

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

@@ -89,7 +89,9 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
   var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
   return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, _extends({
     draggableId: id,
-    index: index
+    index: index,
+    hasInteractiveChildren: true,
+    customDragHandle: true
   }, rest), function (provided, state) {
     return (0, _react2.jsx)("div", {
       className: "euiDataGridColumnSorting__item ".concat(state.isDragging && 'euiDataGridColumnSorting__item-isDragging')
@@ -131,18 +133,25 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
           sorting.onSort(nextColumns);
         }
       });
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
+      className: "euiDataGridColumnSorting__name" // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+
+    }, provided.dragHandleProps, {
+      tabIndex: -1,
+      "aria-hidden": true
+    }), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
       grow: false
     }, (0, _react2.jsx)(_token.EuiToken, {
       color: schemaDetails != null ? schemaDetails.color : undefined,
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-      "aria-hidden": true
-    }, (0, _react2.jsx)(_text.EuiText, {
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_text.EuiText, {
       size: "xs"
-    }, (0, _react2.jsx)("p", null, display))), (0, _react2.jsx)(_flex.EuiFlexItem, {
-      className: "euiDataGridColumnSorting__orderButtons"
-    }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    }, (0, _react2.jsx)("p", null, display))))), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {

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

@@ -188,7 +188,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on first render', function () {
       cy.checkAxe();
     });
-    it('has zero violations when the columns reorder menu is open', function () {
+    it('has zero violations when the columns visibility menu is open', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.checkAxe();
     });
@@ -241,9 +241,10 @@ describe('EuiDataGrid', function () {
       cy.get('div[data-gridcell-visible-row-index="0"][data-gridcell-column-index="1"]').find('button.euiButtonIcon').last().realClick();
       cy.checkAxe();
     });
-    it('has zero violations when the Favorite Distro column has been sorted', function () {
+    it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
+      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {

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

@@ -0,0 +1,117 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _context_menu = require("../context_menu");
+
+var _notification_event = require("./notification_event");
+
+var _panel = require("../panel");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var NotificationEvent = function NotificationEvent() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isRead = _useState2[0],
+      setIsRead = _useState2[1];
+
+  var onRead = function onRead(id, isRead) {
+    setIsRead(!isRead);
+  };
+
+  var onOpenContextMenu = function onOpenContextMenu(id) {
+    return [(0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
+      key: "contextMenuItemA",
+      onClick: function onClick() {
+        return onRead(id, isRead);
+      }
+    }, isRead ? 'Mark as unread' : 'Mark as read'), (0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
+      key: "contextMenuItemB",
+      onClick: function onClick() {}
+    }, "View messages like this"), (0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
+      key: "contextMenuItemC",
+      onClick: function onClick() {}
+    }, "Don\u2019t notify me about this")];
+  };
+
+  return (0, _react2.jsx)(_panel.EuiPanel, {
+    paddingSize: "none",
+    hasShadow: true,
+    style: {
+      maxWidth: '540px'
+    }
+  }, (0, _react2.jsx)(_notification_event.EuiNotificationEvent, {
+    id: "cy-eui-notification-1",
+    type: "Report",
+    iconType: "logoKibana",
+    iconAriaLabel: "Kibana",
+    time: "1 min ago",
+    title: "[Error Monitoring Report] is generated",
+    primaryAction: "Download",
+    primaryActionProps: {
+      iconType: 'download'
+    },
+    messages: ['The reported was generated at 17:12:16 GMT+4'],
+    isRead: isRead,
+    onRead: onRead,
+    onOpenContextMenu: onOpenContextMenu,
+    onClickPrimaryAction: function onClickPrimaryAction() {},
+    onClickTitle: function onClickTitle() {}
+  }));
+};
+
+describe('EuiNotificationEvent', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(NotificationEvent, null));
+    cy.get('article.euiNotificationEvent').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is open', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations after the Mark as read button is clicked', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('div.euiPopover__panel button').first().realClick();
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility', function () {
+    it('has zero violations when the popover is opened by keyboard', function () {
+      cy.repeatRealPress('Tab');
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').should('have.focus');
+      cy.realPress('Enter');
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/page/page_header/page_header.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("../../button");
+
+var _page_header = require("./page_header");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../../cypress/support"/>
+describe('EuiPageHeader', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(_page_header.EuiPageHeader, {
+      pageTitle: "Page title",
+      iconType: "logoKibana",
+      description: "This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.",
+      rightSideItems: [(0, _react2.jsx)(_button.EuiButton, {
+        fill: true
+      }, "Add something"), (0, _react2.jsx)(_button.EuiButton, null, "Do something")]
+    }));
+    cy.get('h1.euiTitle').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/portal/portal.a11y.js

@@ -0,0 +1,73 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _button = require("../button");
+
+var _portal = require("./portal");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Portal = function Portal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPortalVisible = _useState2[0],
+      setIsPortalVisible = _useState2[1];
+
+  var togglePortal = function togglePortal() {
+    setIsPortalVisible(!isPortalVisible);
+  };
+
+  var closePortal = function closePortal() {
+    setIsPortalVisible(false);
+  };
+
+  var customPortal;
+
+  if (isPortalVisible) {
+    customPortal = (0, _react2.jsx)(_portal.EuiPortal, null, (0, _react2.jsx)("div", null, "This is the portal. Click anywhere to close."), (0, _react2.jsx)(_button.EuiButton, {
+      onClick: closePortal
+    }, "Close portal"));
+  }
+
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButton, {
+    onClick: togglePortal
+  }, "View guide"), customPortal);
+};
+
+describe('EuiPortal', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(Portal, null));
+    cy.get('div[data-relative-to-header="above"]').should('not.exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after the portal is activated', function () {
+      cy.get('button[type="button"]').contains('View guide').realClick();
+      cy.get('div[data-euiportal="true"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/tool_tip/tool_tip.js

@@ -15,19 +15,21 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _common = require("../common");
 
-var _portal = require("../portal");
+var _services = require("../../services");
 
-var _tool_tip_anchor = require("./tool_tip_anchor");
+var _react2 = require("../../services/react");
 
-var _tool_tip_arrow = require("./tool_tip_arrow");
+var _resize_observer = require("../observer/resize_observer");
+
+var _portal = require("../portal");
 
 var _tool_tip_popover = require("./tool_tip_popover");
 
-var _react2 = require("../../services/react");
+var _tool_tip_anchor = require("./tool_tip_anchor");
 
-var _services = require("../../services");
+var _tool_tip_arrow = require("./tool_tip_arrow");
 
-var _resize_observer = require("../observer/resize_observer");
+var _tool_tip_manager = require("./tool_tip_manager");
 
 var _react3 = require("@emotion/react");
 
@@ -162,9 +164,11 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       if (!_this.timeoutId) {
         _this.timeoutId = setTimeout(function () {
           (0, _react2.enqueueStateChange)(function () {
-            return _this.setState({
+            _this.setState({
               visible: true
             });
+
+            _tool_tip_manager.toolTipManager.registerTooltip(_this.hideToolTip);
           });
         }, delayToMsMap[_this.props.delay]);
       }
@@ -225,6 +229,8 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
             toolTipStyles: DEFAULT_TOOLTIP_STYLES,
             arrowStyles: undefined
           });
+
+          _tool_tip_manager.toolTipManager.deregisterToolTip(_this.hideToolTip);
         }
       });
     });

package/lib/components/tool_tip/tool_tip_manager.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolTipManager = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+ * 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.
+ */
+
+/**
+ * Manager utility that ensures only one tooltip is visible at a time
+ *
+ * UX rationale (primarily for mouse-only users):
+ * @see https://github.com/elastic/kibana/issues/144482
+ * @see https://github.com/elastic/eui/issues/5883
+ */
+var ToolTipManager = function ToolTipManager() {
+  var _this = this;
+
+  _classCallCheck(this, ToolTipManager);
+
+  _defineProperty(this, "toolTipsToHide", new Set());
+
+  _defineProperty(this, "registerTooltip", function (hideCallback) {
+    _this.toolTipsToHide.forEach(function (hide) {
+      return hide();
+    });
+
+    _this.toolTipsToHide.clear();
+
+    _this.toolTipsToHide.add(hideCallback);
+  });
+
+  _defineProperty(this, "deregisterToolTip", function (hideCallback) {
+    _this.toolTipsToHide.delete(hideCallback);
+  });
+};
+
+var toolTipManager = new ToolTipManager();
+exports.toolTipManager = toolTipManager;

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

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /*
@@ -11,7 +12,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { Fragment, useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
-import { EuiI18n } from '../../i18n';
+import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiButtonEmpty } from '../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSwitch, EuiFieldText } from '../../form';
@@ -79,6 +80,8 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  var dragHandleAriaLabel = useEuiI18n('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
+
   var buttonText = ___EmotionJSX(EuiI18n, {
     token: "euiColumnSelector.button",
     default: "Columns"
@@ -151,18 +154,23 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       key: id,
       draggableId: id,
       index: index,
-      isDragDisabled: !isDragEnabled
+      isDragDisabled: !isDragEnabled,
+      hasInteractiveChildren: true,
+      customDragHandle: true
     }, function (provided, state) {
       return ___EmotionJSX("div", {
         className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, ___EmotionJSX(EuiFlexGroup, {
         responsive: false,
-        gutterSize: "m",
+        gutterSize: "s",
         alignItems: "center"
-      }, ___EmotionJSX(EuiFlexItem, null, allowColumnHiding ? ___EmotionJSX(EuiSwitch, {
+      }, allowColumnHiding && ___EmotionJSX(EuiFlexItem, {
+        grow: false
+      }, ___EmotionJSX(EuiSwitch, {
         name: id,
         label: displayValues[id] || id,
+        showLabel: false,
         checked: visibleColumnIds.has(id),
         compressed: true,
         className: "euiSwitch--mini",
@@ -174,11 +182,18 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
           setVisibleColumns(nextVisibleColumns);
         },
         "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      }) : ___EmotionJSX("span", {
+      })), ___EmotionJSX(EuiFlexItem // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+      , _extends({}, provided.dragHandleProps, {
+        "aria-hidden": true,
+        tabIndex: -1
+      }), ___EmotionJSX("span", {
         className: "euiDataGridColumnSelector__itemLabel"
-      }, id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, {
+      }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
         grow: false
-      }, ___EmotionJSX(EuiIcon, {
+      }, provided.dragHandleProps, {
+        "aria-label": dragHandleAriaLabel
+      }), ___EmotionJSX(EuiIcon, {
         type: "grab",
         color: "subdued"
       }))));

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

@@ -56,7 +56,9 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
   var dragHandleAriaLabel = useEuiI18n('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
   return ___EmotionJSX(EuiDraggable, _extends({
     draggableId: id,
-    index: index
+    index: index,
+    hasInteractiveChildren: true,
+    customDragHandle: true
   }, rest), function (provided, state) {
     return ___EmotionJSX("div", {
       className: "euiDataGridColumnSorting__item ".concat(state.isDragging && 'euiDataGridColumnSorting__item-isDragging')
@@ -98,18 +100,25 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
           sorting.onSort(nextColumns);
         }
       });
-    })), ___EmotionJSX(EuiFlexItem, {
+    })), ___EmotionJSX(EuiFlexItem, _extends({
+      className: "euiDataGridColumnSorting__name" // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+
+    }, provided.dragHandleProps, {
+      tabIndex: -1,
+      "aria-hidden": true
+    }), ___EmotionJSX(EuiFlexGroup, {
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false
+    }, ___EmotionJSX(EuiFlexItem, {
       grow: false
     }, ___EmotionJSX(EuiToken, {
       color: schemaDetails != null ? schemaDetails.color : undefined,
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
-    })), ___EmotionJSX(EuiFlexItem, {
-      "aria-hidden": true
-    }, ___EmotionJSX(EuiText, {
+    })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiText, {
       size: "xs"
-    }, ___EmotionJSX("p", null, display))), ___EmotionJSX(EuiFlexItem, {
-      className: "euiDataGridColumnSorting__orderButtons"
-    }, ___EmotionJSX(EuiI18n, {
+    }, ___EmotionJSX("p", null, display))))), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {

package/optimize/es/components/datagrid/data_grid.a11y.js

@@ -167,7 +167,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on first render', function () {
       cy.checkAxe();
     });
-    it('has zero violations when the columns reorder menu is open', function () {
+    it('has zero violations when the columns visibility menu is open', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.checkAxe();
     });
@@ -220,9 +220,10 @@ describe('EuiDataGrid', function () {
       cy.get('div[data-gridcell-visible-row-index="0"][data-gridcell-column-index="1"]').find('button.euiButtonIcon').last().realClick();
       cy.checkAxe();
     });
-    it('has zero violations when the Favorite Distro column has been sorted', function () {
+    it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
+      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {