@elastic/eui 76.0.2 → 76.2.0

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);
         }
       }
     });

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

@@ -21,10 +21,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _services = require("../../services");
-
-var _accessibility = require("../accessibility");
-
 var _icon = require("../icon");
 
 var _i18n = require("../i18n");
@@ -137,14 +133,11 @@ var EuiSuggest = function EuiSuggest(_ref) {
   var searchOnChange = function searchOnChange(value) {
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
   };
-
-  var inputDescribedbyId = (0, _services.useGeneratedHtmlId)({
-    prefix: id
-  });
   /**
    * Status
    */
 
+
   var icon = '';
   var color = '';
 
@@ -233,6 +226,7 @@ var EuiSuggest = function EuiSuggest(_ref) {
     }
   }, [onItemClick, suggestions]);
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_selectable.EuiSelectable, {
+    selectableScreenReaderText: stateMessage,
     singleSelection: true,
     height: isVirtualized ? undefined : 'full',
     options: suggestionList,
@@ -257,7 +251,6 @@ var EuiSuggest = function EuiSuggest(_ref) {
       onBlur: searchOnBlur,
       onInput: searchOnInput,
       onChange: searchOnChange,
-      'aria-describedby': inputDescribedbyId,
       'aria-label': ariaLabel,
       'aria-labelledby': labelId
     }, rest)
@@ -281,9 +274,7 @@ var EuiSuggest = function EuiSuggest(_ref) {
       },
       className: "eui-yScroll"
     }, list));
-  }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    id: inputDescribedbyId
-  }, stateMessage)));
+  }));
 };
 
 exports.EuiSuggest = EuiSuggest;