@elastic/eui 76.0.0 → 76.1.0

package/test-env/components/datagrid/body/data_grid_cell_popover.js

@@ -9,10 +9,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCellPopover = exports.JsonPopoverContent = exports.DefaultCellPopover = exports.DataGridCellPopoverContext = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _services = require("../../../services");
 
 var _popover = require("../../popover");
@@ -27,13 +33,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-/*
- * 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var DataGridCellPopoverContext = /*#__PURE__*/(0, _react.createContext)({
   popoverIsOpen: false,
   cellLocation: {
@@ -43,11 +46,14 @@ var DataGridCellPopoverContext = /*#__PURE__*/(0, _react.createContext)({
   openCellPopover: function openCellPopover() {},
   closeCellPopover: function closeCellPopover() {},
   setPopoverAnchor: function setPopoverAnchor() {},
-  setPopoverContent: function setPopoverContent() {}
+  setPopoverContent: function setPopoverContent() {},
+  setCellPopoverProps: function setCellPopoverProps() {}
 });
 exports.DataGridCellPopoverContext = DataGridCellPopoverContext;
 
 var useCellPopover = function useCellPopover() {
+  var _cellPopoverProps$pan;
+
   // Current open state & cell location are handled here
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -71,7 +77,13 @@ var useCellPopover = function useCellPopover() {
   var _useState7 = (0, _react.useState)(),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       popoverContent = _useState8[0],
-      setPopoverContent = _useState8[1];
+      setPopoverContent = _useState8[1]; // Allow customization of most (not all) popover props by consumers
+
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      cellPopoverProps = _useState10[0],
+      setCellPopoverProps = _useState10[1];
 
   var closeCellPopover = (0, _react.useCallback)(function () {
     return setPopoverIsOpen(false);
@@ -101,20 +113,20 @@ var useCellPopover = function useCellPopover() {
     openCellPopover: openCellPopover,
     cellLocation: cellLocation,
     setPopoverAnchor: setPopoverAnchor,
-    setPopoverContent: setPopoverContent
+    setPopoverContent: setPopoverContent,
+    setCellPopoverProps: setCellPopoverProps
   }; // Note that this popover is rendered once at the top grid level, rather than one popover per cell
 
-  var cellPopover = popoverIsOpen && popoverAnchor && (0, _react2.jsx)(_popover.EuiWrappingPopover, {
+  var cellPopover = popoverIsOpen && popoverAnchor && (0, _react2.jsx)(_popover.EuiWrappingPopover, (0, _extends2.default)({
     isOpen: popoverIsOpen,
-    button: popoverAnchor,
     display: "block",
     hasArrow: false,
-    panelPaddingSize: "s",
-    panelClassName: "euiDataGridRowCell__popover",
-    panelProps: {
+    panelPaddingSize: "s"
+  }, cellPopoverProps, {
+    panelProps: _objectSpread({
       'data-test-subj': 'euiDataGridExpansionPopover'
-    },
-    closePopover: closeCellPopover,
+    }, cellPopoverProps.panelProps || {}),
+    panelClassName: (0, _classnames.default)('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
     onKeyDown: function onKeyDown(event) {
       if (event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
         event.preventDefault();
@@ -125,8 +137,10 @@ var useCellPopover = function useCellPopover() {
           return popoverAnchor.parentElement.focus();
         });
       }
-    }
-  }, popoverContent);
+    },
+    button: popoverAnchor,
+    closePopover: closeCellPopover
+  }), popoverContent);
   return {
     cellPopoverContext: cellPopoverContext,
     cellPopover: cellPopover

package/test-env/components/date_picker/auto_refresh/auto_refresh.js

@@ -165,7 +165,8 @@ var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
       setIsPopoverOpen(false);
-    }
+    },
+    popoverScreenReaderText: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn
   }, (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,

package/test-env/components/form/form_control_layout/form_control_layout_icons.js

@@ -178,7 +178,7 @@ var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         size: compressed ? 's' : 'm',
         color: "danger",
-        type: "alert"
+        type: "warning"
       });
     }
   }]);

package/test-env/components/form/range/dual_range.js

@@ -69,6 +69,8 @@ var _range = require("./range.styles");
 
 var _dual_range = require("./dual_range.styles");
 
+var _i18n = require("../../i18n");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
@@ -560,6 +562,10 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var rightThumbStyles = rightThumbColor ? _objectSpread(_objectSpread({}, rightThumbPosition), {}, {
         backgroundColor: (0, _range_levels_colors.euiRangeLevelColor)(rightThumbColor, theme.euiTheme)
       }) : rightThumbPosition;
+      var dualSliderScreenReaderInstructions = (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiDualRange.sliderScreenReaderInstructions",
+        default: "You are in a custom range slider. Use the Up and Down arrow keys to change the minimum value. Press Tab to interact with the maximum value."
+      });
       var theRange = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         css: cssStyles,
         className: classes,
@@ -615,8 +621,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           onKeyDown: _this2.handleDraggableKeyDown,
-          "aria-describedby": _this2.props['aria-describedby'],
-          "aria-label": _this2.props['aria-label']
+          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
+          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
         }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
           min: min,
           max: Number(_this2.upperValue),
@@ -628,8 +634,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           style: (0, _global_styling.logicalStyles)(leftThumbStyles),
-          "aria-describedby": _this2.props['aria-describedby'],
-          "aria-label": _this2.props['aria-label']
+          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
+          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
         }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
           min: Number(_this2.lowerValue),
           max: max,
@@ -641,8 +647,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           onFocus: _this2.onThumbFocus,
           onBlur: _this2.onThumbBlur,
           style: (0, _global_styling.logicalStyles)(rightThumbStyles),
-          "aria-describedby": _this2.props['aria-describedby'],
-          "aria-label": _this2.props['aria-label']
+          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
+          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
         })), showRange && _this2.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
           showTicks: showTicks,
           min: Number(min),
@@ -675,7 +681,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
         disableFocusTrap: true,
-        onPanelResize: this.onResize
+        onPanelResize: this.onResize,
+        popoverScreenReaderText: dualSliderScreenReaderInstructions
       }, theRange) : undefined;
       return thePopover || theRange;
     }

package/test-env/components/form/range/range.js

@@ -59,6 +59,8 @@ var _range_wrapper = require("./range_wrapper");
 
 var _range = require("./range.styles");
 
+var _i18n = require("../../i18n");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
@@ -205,6 +207,10 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
       var styles = (0, _range.euiRangeStyles)(theme);
       var cssStyles = [styles.euiRange, showInput && styles.hasInput];
       var thumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(value));
+      var sliderScreenReaderInstructions = (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiRange.sliderScreenReaderInstructions",
+        default: "You are in a custom range slider. Use the Up and Down arrow keys to change the value."
+      });
       var theRange = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         className: classes,
         css: cssStyles,
@@ -225,7 +231,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true,
+        "aria-hidden": !!showInput,
         showRange: showRange
       }, function (trackWidth) {
         return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
@@ -246,7 +252,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
           } : undefined,
           onFocus: showInput === true ? undefined : onFocus,
           onBlur: showInputOnly ? _this2.onInputBlur : onBlur,
-          "aria-hidden": showInput === true ? true : false,
+          "aria-hidden": !!showInput,
           thumbColor: thumbColor
         }, rest)), showRange && _this2.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
           showTicks: showTicks,
@@ -279,7 +285,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         fullWidth: fullWidth,
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
-        disableFocusTrap: true
+        disableFocusTrap: true,
+        popoverScreenReaderText: sliderScreenReaderInstructions
       }, theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }

package/test-env/components/form/super_select/super_select.js

@@ -47,7 +47,7 @@ var _i18n = require("../../i18n");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "options", "valueOfSelected", "onChange", "isOpen", "isInvalid", "hasDividers", "itemClassName", "itemLayoutAlign", "fullWidth", "popoverProps", "compressed"],
+var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "hasDividers", "itemClassName", "itemLayoutAlign", "fullWidth", "popoverProps", "compressed"],
     _excluded2 = ["value", "dropdownDisplay", "inputDisplay"];
 
 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); }
@@ -83,7 +83,6 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "itemNodes", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "describedById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderDescribeId'));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "labelledById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderLabelId'));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isPopoverOpen: _this.props.isOpen || false
     });
@@ -242,6 +241,7 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           options = _this$props.options,
           valueOfSelected = _this$props.valueOfSelected,
+          placeholder = _this$props.placeholder,
           onChange = _this$props.onChange,
           isOpen = _this$props.isOpen,
           isInvalid = _this$props.isInvalid,
@@ -260,9 +260,9 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         'euiSuperSelect__item--hasDividers': hasDividers
       }, itemClassName);
       var button = (0, _react2.jsx)(_super_select_control.EuiSuperSelectControl, (0, _extends2.default)({
-        screenReaderId: this.labelledById,
         options: options,
         value: valueOfSelected,
+        placeholder: placeholder,
         onClick: this.state.isPopoverOpen ? this.closePopover : this.openPopover,
         onKeyDown: this.onSelectKeyDown,
         className: buttonClasses,
@@ -305,14 +305,19 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiSuperSelect.screenReaderAnnouncement",
         default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
-      }))), (0, _react2.jsx)("div", {
-        "aria-labelledby": this.labelledById,
-        "aria-describedby": this.describedById,
-        className: "euiSuperSelect__listbox",
-        role: "listbox",
-        "aria-activedescendant": valueOfSelected,
-        tabIndex: 0
-      }, items));
+      }))), (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiSuperSelect.ariaLabel",
+        default: "Select listbox"
+      }, function (ariaLabel) {
+        return (0, _react2.jsx)("div", {
+          "aria-label": ariaLabel,
+          "aria-describedby": _this2.describedById,
+          className: "euiSuperSelect__listbox",
+          role: "listbox",
+          "aria-activedescendant": valueOfSelected,
+          tabIndex: 0
+        }, items);
+      }));
     }
   }]);
   return EuiSuperSelect;
@@ -356,6 +361,11 @@ EuiSuperSelect.propTypes = {
   readOnly: _propTypes.default.bool,
   name: _propTypes.default.string,
 
+  /**
+       * Placeholder to display when the current selected value is empty.
+       */
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.node]),
+
   /**
      * Creates an input group with element(s) coming before input.
      * `string` | `ReactElement` or an array of these
@@ -368,12 +378,6 @@ EuiSuperSelect.propTypes = {
      */
   append: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
 
-  /**
-     * Creates a semantic label ID for the `div[role="listbox"]` that's opened on click or keypress.
-     * __Generated and passed down by `EuiSuperSelect`.__
-     */
-  screenReaderId: _propTypes.default.string,
-
   /**
        * Pass an array of options that must at least include:
        * `value`: storing unique value of item,

package/test-env/components/form/super_select/super_select_control.js

@@ -17,19 +17,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _accessibility = require("../../accessibility");
-
 var _form_control_layout = require("../form_control_layout");
 
-var _i18n = require("../../i18n");
-
 var _num_icons = require("../form_control_layout/_num_icons");
 
 var _eui_form_context = require("../eui_form_context");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "options", "id", "name", "fullWidth", "isLoading", "isInvalid", "readOnly", "defaultValue", "compressed", "value", "prepend", "append", "screenReaderId", "disabled"];
+var _excluded = ["className", "options", "id", "name", "fullWidth", "isLoading", "isInvalid", "readOnly", "defaultValue", "compressed", "value", "placeholder", "prepend", "append", "disabled"];
 
 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); }
 
@@ -55,9 +51,9 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
       _props$compressed = props.compressed,
       compressed = _props$compressed === void 0 ? false : _props$compressed,
       value = props.value,
+      placeholder = props.placeholder,
       prepend = props.prepend,
       append = props.append,
-      screenReaderId = props.screenReaderId,
       disabled = props.disabled,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var numIconsClass = (0, _num_icons.getFormControlClassNameForIconCount)({
@@ -89,6 +85,7 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     selectedValue = selectedOption ? selectedOption.inputDisplay : selectedValue;
   }
 
+  var showPlaceholder = !!placeholder && !selectedValue;
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("input", {
     type: "hidden",
     id: id,
@@ -106,22 +103,16 @@ var EuiSuperSelectControl = function EuiSuperSelectControl(props) {
     compressed: compressed,
     prepend: prepend,
     append: append
-  }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", {
-    id: screenReaderId
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiSuperSelectControl.selectAnOption",
-    default: "Select an option: {selectedValue}, is selected",
-    values: {
-      selectedValue: selectedValue
-    }
-  }))), (0, _react2.jsx)("button", (0, _extends2.default)({
+  }, (0, _react2.jsx)("button", (0, _extends2.default)({
     type: "button",
     className: classes,
     "aria-haspopup": "listbox",
     disabled: disabled || readOnly // @ts-ignore Using as a selector only for mixin use
     ,
     readOnly: readOnly
-  }, rest), selectedValue)));
+  }, rest), showPlaceholder ? (0, _react2.jsx)("span", {
+    className: "euiSuperSelectControl__placeholder"
+  }, placeholder) : selectedValue)));
 };
 
 exports.EuiSuperSelectControl = EuiSuperSelectControl;

package/test-env/components/selectable/selectable.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiSelectable = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -55,7 +55,7 @@ var _i18n = require("../i18n");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "isPreFiltered"],
+var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "selectableScreenReaderText", "isPreFiltered"],
     _excluded2 = ["aria-label", "aria-describedby", "onChange", "defaultValue", "inputRef"],
     _excluded3 = ["aria-label", "aria-describedby", "isVirtualized", "rowHeight"];
 
@@ -90,13 +90,22 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rootId", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "messageContentId", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listId", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isFocusOnSearchOrListBox", function (target) {
+      var _this$optionsListRef$, _this$optionsListRef$2;
+
+      var searchHasFocus = _this.props.searchable && target === _this.inputRef;
+      var listBox = (_this$optionsListRef$ = _this.optionsListRef.current) === null || _this$optionsListRef$ === void 0 ? void 0 : (_this$optionsListRef$2 = _this$optionsListRef$.listBoxRef) === null || _this$optionsListRef$2 === void 0 ? void 0 : _this$optionsListRef$2.parentElement;
+      var listBoxContainsFocus = target instanceof Node && (listBox === null || listBox === void 0 ? void 0 : listBox.contains(target));
+      var listBoxHasFocus = target === listBox || listBoxContainsFocus;
+      return searchHasFocus || listBoxHasFocus;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function () {
       // Bypass onFocus when a click event originates from this.containerRef.
       // Prevents onFocus from scrolling away from a clicked option and negating the selection event.
       // https://github.com/elastic/eui/issues/4147
       _this.preventOnFocus = true;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (event) {
       if (_this.preventOnFocus) {
         _this.preventOnFocus = false;
         return;
@@ -106,6 +115,10 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
         return;
       }
 
+      if (event && !_this.isFocusOnSearchOrListBox(event.target)) {
+        return;
+      }
+
       var firstSelected = _this.state.visibleOptions.findIndex(function (option) {
         return option.checked && !option.disabled && !option.isGroupLabel;
       });
@@ -125,7 +138,19 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
-      var optionsList = _this.optionsListRef.current;
+      var optionsList = _this.optionsListRef.current; // Check if the user is interacting with something other than the
+      // searchbox or selection list. If so, the user may be attempting to
+      // interact with the search clear button or a totally custom button,
+      // and listbox keyboard navigation/selection should not be triggered.
+
+      if (!_this.isFocusOnSearchOrListBox(event.target)) {
+        _this.setState({
+          activeOptionIndex: undefined,
+          isFocused: false
+        });
+
+        return;
+      }
 
       switch (event.key) {
         case _services.keys.ARROW_UP:
@@ -150,20 +175,10 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
         case _services.keys.ENTER:
         case _services.keys.SPACE:
           if (_this.props.searchable) {
-            var _this$optionsListRef$, _this$optionsListRef$2;
-
             // For searchable instances, SPACE is reserved as a character for filtering
             // via the input box, and as such only ENTER will toggle selection.
             if (event.target === _this.inputRef && event.key === _services.keys.SPACE) {
               return;
-            } // Check if the user is interacting with something other than the
-            // searchbox or selection list. If not, the user is attempting to
-            // interact with an internal button such as the clear button,
-            // and the event should not be altered.
-
-
-            if (!(event.target === _this.inputRef || event.target === ((_this$optionsListRef$ = _this.optionsListRef.current) === null || _this$optionsListRef$ === void 0 ? void 0 : (_this$optionsListRef$2 = _this$optionsListRef$.listBoxRef) === null || _this$optionsListRef$2 === void 0 ? void 0 : _this$optionsListRef$2.parentElement))) {
-              return;
             }
           }
 
@@ -251,10 +266,8 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       (_this$props$searchPro = _this.props.searchProps) === null || _this$props$searchPro === void 0 ? void 0 : (_this$props$searchPro2 = _this$props$searchPro.onChange) === null || _this$props$searchPro2 === void 0 ? void 0 : _this$props$searchPro2.call(_this$props$searchPro, searchValue, visibleOptions);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerBlur", function (e) {
-      var _e$relatedTarget, _e$relatedTarget$firs;
-
       // Ignore blur events when moving from search to option to avoid activeOptionIndex conflicts
-      if (((_e$relatedTarget = e.relatedTarget) === null || _e$relatedTarget === void 0 ? void 0 : (_e$relatedTarget$firs = _e$relatedTarget.firstChild) === null || _e$relatedTarget$firs === void 0 ? void 0 : _e$relatedTarget$firs.id) === _this.listId) {
+      if (_this.isFocusOnSearchOrListBox(e.relatedTarget)) {
         return;
       }
 
@@ -357,6 +370,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
           noMatchesMessage = _this$props3.noMatchesMessage,
           emptyMessage = _this$props3.emptyMessage,
           errorMessage = _this$props3.errorMessage,
+          selectableScreenReaderText = _this$props3.selectableScreenReaderText,
           isPreFiltered = _this$props3.isPreFiltered,
           rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var _this$state = this.state,
@@ -491,10 +505,15 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       var searchAccessibleName = getAccessibleName(searchProps, this.messageContentId);
       var searchHasAccessibleName = Boolean(Object.keys(searchAccessibleName).length);
       var search = searchable ? (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiSelectable.placeholderName",
-        default: "Filter options"
-      }, function (placeholderName) {
-        return (0, _react2.jsx)(_selectable_search.EuiSelectableSearch, (0, _extends2.default)({
+        tokens: ['euiSelectable.screenReaderInstructions', 'euiSelectable.placeholderName'],
+        defaults: ['Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.', 'Filter options']
+      }, function (_ref4) {
+        var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+            screenReaderInstructions = _ref5[0],
+            placeholderName = _ref5[1];
+
+        return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_selectable_search.EuiSelectableSearch, (0, _extends2.default)({
+          "aria-describedby": listAriaDescribedbyId,
           key: "listSearch",
           options: options,
           value: searchValue,
@@ -513,15 +532,17 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
           }
         }, searchHasAccessibleName ? searchAccessibleName : {
           'aria-label': placeholderName
-        }, cleanedSearchProps));
+        }, cleanedSearchProps)), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+          id: listAriaDescribedbyId
+        }, selectableScreenReaderText, " ", screenReaderInstructions)));
       }) : undefined;
       var resultsLength = visibleOptions.filter(function (option) {
         return !option.disabled;
       }).length;
       var listScreenReaderStatus = searchable && (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiSelectable.searchResults",
-        default: function _default(_ref4) {
-          var resultsLength = _ref4.resultsLength;
+        default: function _default(_ref6) {
+          var resultsLength = _ref6.resultsLength;
           return "".concat(resultsLength, " result").concat(resultsLength === 1 ? '' : 's', " available");
         },
         values: {
@@ -532,18 +553,12 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       var listAccessibleName = getAccessibleName(listProps, listAriaDescribedbyId);
       var listHasAccessibleName = Boolean(Object.keys(listAccessibleName).length);
       var list = (0, _react2.jsx)(_i18n.EuiI18n, {
-        tokens: ['euiSelectable.screenReaderInstructions', 'euiSelectable.placeholderName'],
-        defaults: ['Use up and down arrows to move focus over options. Enter to select. Escape to collapse options.', 'Filter options']
-      }, function (_ref5) {
-        var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-            placeholderName = _ref6[0],
-            screenReaderInstructions = _ref6[1];
-
+        token: "euiSelectable.placeholderName",
+        default: "Filter options"
+      }, function (placeholderName) {
         return (0, _react2.jsx)(_react.default.Fragment, null, searchable && (0, _react2.jsx)(_accessibility.EuiScreenReaderLive, {
           isActive: messageContent != null || activeOptionIndex != null
-        }, messageContent || listScreenReaderStatus), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-          id: listAriaDescribedbyId
-        }, screenReaderInstructions)), messageContent ? (0, _react2.jsx)(_selectable_message.EuiSelectableMessage, {
+        }, messageContent || listScreenReaderStatus), messageContent ? (0, _react2.jsx)(_selectable_message.EuiSelectableMessage, {
           "data-test-subj": "euiSelectableMessage",
           id: _this2.messageContentId,
           bordered: listProps && listProps.bordered
@@ -780,5 +795,12 @@ EuiSelectable.propTypes = {
        * Control whether or not options get filtered internally or if consumer will filter
        * Default: false
        */
-  isPreFiltered: _propTypes.default.bool
+  isPreFiltered: _propTypes.default.bool,
+
+  /**
+       * Optional screen reader instructions to announce upon focus/interaction. This text is read out
+       * after the `EuiSelectable` label and a brief pause, but before the default keyboard instructions for
+       * interacting with a selectable are read out.
+       */
+  selectableScreenReaderText: _propTypes.default.string
 };

package/test-env/components/selectable/selectable_list/selectable_list.js

@@ -114,7 +114,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
 
         if (typeof ariaDescribedby === 'string') {
-          ref.setAttribute('aria-labelledby', ariaDescribedby);
+          ref.setAttribute('aria-describedby', ariaDescribedby);
         }
       }
     });