@elastic/eui 74.1.0 → 75.0.0

package/lib/components/flyout/flyout.js

@@ -27,11 +27,13 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _portal = require("../portal");
 
+var _accessibility = require("../accessibility");
+
 var _flyout = require("./flyout.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonAriaLabel", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "role", "pushMinBreakpoint", "focusTrapProps"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +41,14 @@ 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; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+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 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; }
@@ -88,7 +98,6 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$hideCloseButton = _ref.hideCloseButton,
       hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
       closeButtonProps = _ref.closeButtonProps,
-      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       _ref$closeButtonPosit = _ref.closeButtonPosition,
       closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
       onClose = _ref.onClose,
@@ -107,11 +116,12 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'overlay' : _ref$type,
       outsideClickCloses = _ref.outsideClickCloses,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'dialog' : _ref$role,
       _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
       pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-      focusTrapProps = _ref.focusTrapProps,
+      _ref$focusTrapProps = _ref.focusTrapProps,
+      _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
+      _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
+      includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var Element = as || defaultElement;
@@ -204,7 +214,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
-        "aria-label": closeButtonAriaLabel || closeAriaLabel,
+        "aria-label": closeAriaLabel,
         "data-test-subj": "euiFlyoutCloseButton"
       }, closeButtonProps, {
         className: closeButtonClasses,
@@ -217,24 +227,60 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }));
     });
   }
+  /*
+   * If not disabled, automatically add fixed EuiHeaders as shards
+   * to EuiFlyout focus traps, to prevent focus fighting
+   */
 
-  var hasOverlayMask = ownFocus && !isPushed;
 
-  var onClickOutside = function onClickOutside(event) {
-    // Do not close the flyout for any external click
-    if (outsideClickCloses === false) return undefined;
+  var flyoutToggle = (0, _react.useRef)(document.activeElement);
 
-    if (hasOverlayMask) {
-      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fixedHeaders = _useState4[0],
+      setFixedHeaders = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (includeFixedHeadersInFocusTrap) {
+      var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
+      setFixedHeaders(Array.from(fixedHeaderEls)); // Flyouts that are toggled from fixed headers do not have working
+      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+
+      fixedHeaderEls.forEach(function (header) {
+        if (header.contains(flyoutToggle.current)) {
+          resizeRef === null || resizeRef === void 0 ? void 0 : resizeRef.focus();
+        }
+      });
     } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
-    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+      // Clear existing headers if necessary, e.g. switching to `false`
+      setFixedHeaders(function (headers) {
+        return headers.length ? [] : headers;
+      });
+    }
+  }, [includeFixedHeadersInFocusTrap, resizeRef]);
 
+  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+    shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray(_focusTrapProps.shards || []))
+  });
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
 
-    return undefined;
-  };
+
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = (0, _services.useGeneratedHtmlId)();
+  var screenReaderDescription = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: descriptionId
+  }, hasOverlayMask ? (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderModalDialog",
+    default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+  }) : (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderNonModalDialog",
+    default: "You are in a non-modal dialog. To close the dialog, press Escape."
+  }), ' ', fixedHeaders.length > 0 && (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderFixedHeaders",
+    default: "You can still continue tabbing through the page headers in addition to the dialog."
+  })));
   /*
    * Trap focus even when `ownFocus={false}`, otherwise closing
    * the flyout won't return focus to the originating button.
@@ -248,6 +294,21 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    * (both mousedown and mouseup) the overlay mask.
    */
 
+  var onClickOutside = function onClickOutside(event) {
+    // Do not close the flyout for any external click
+    if (outsideClickCloses === false) return undefined;
+
+    if (hasOverlayMask) {
+      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+      if (event.target === maskRef.current) return onClose(event);
+    } else {
+      // No overlay mask is present, so any outside clicks should close the flyout
+      if (outsideClickCloses === true) return onClose(event);
+    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+
+
+    return undefined;
+  };
 
   var flyout = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
     disabled: isPushed,
@@ -256,12 +317,14 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, focusTrapProps), (0, _react2.jsx)(Element, _extends({
     css: cssStyles
   }, rest, {
-    role: role,
+    role: "dialog",
     className: classes,
-    tabIndex: -1,
+    tabIndex: 0,
+    "data-autofocus": true,
+    "aria-describedby": !isPushed ? descriptionId : undefined,
     style: newStyle,
     ref: setRef
-  }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+  }), !isPushed && screenReaderDescription, closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
 
   var mergedMaskProps = _objectSpread(_objectSpread({}, maskProps), {}, {
     maskRef: (0, _services.useCombinedRefs)([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef])
@@ -276,7 +339,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     flyout = (0, _react2.jsx)(_portal.EuiPortal, null, flyout);
   }
 
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_services.EuiWindowEvent, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_services.EuiWindowEvent, {
     event: "keydown",
     handler: onKeyDown
   }), flyout);

package/lib/components/header/header.js

@@ -106,7 +106,9 @@ var EuiHeader = function EuiHeader(_ref) {
   }
 
   return (0, _react2.jsx)("div", _extends({
-    className: classes
+    className: classes,
+    "data-fixed-header": position === 'fixed' || undefined // Used by EuiFlyouts as a query selector
+
   }, rest), contents);
 };
 

package/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -292,16 +292,16 @@ var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       if (!multiSelect && autoClose) {
         this.closePopover();
 
-        var _query = checked ? this.props.query.removeSimpleFieldClauses(field) : this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator);
+        var _query = checked ? this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldClauses(field);
 
         this.props.onChange(_query);
       } else {
         if (multiSelect === 'or') {
-          var _query2 = checked ? this.props.query.removeOrFieldValue(field, value) : this.props.query.addOrFieldValue(field, value, true, operator);
+          var _query2 = checked ? this.props.query.addOrFieldValue(field, value, true, operator) : this.props.query.removeOrFieldValue(field, value);
 
           this.props.onChange(_query2);
         } else {
-          var _query3 = checked ? this.props.query.removeSimpleFieldValue(field, value) : this.props.query.addSimpleFieldValue(field, value, true, operator);
+          var _query3 = checked ? this.props.query.addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldValue(field, value);
 
           this.props.onChange(_query3);
         }
@@ -409,13 +409,9 @@ var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         listProps: {
           isVirtualized: isOverSearchThreshold || false
         },
-        onChange: function onChange(options) {
-          var diff = items.find(function (item, index) {
-            return item.checked !== options[index].checked;
-          });
-
-          if (diff) {
-            _this5.onOptionClick(diff.data.optionField, diff.data.value, diff.checked);
+        onChange: function onChange(options, event, changedOption) {
+          if (changedOption.data) {
+            _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
           }
         }
       }, searchProps), function (list, search) {

package/lib/components/selectable/selectable_list/selectable_list.js

@@ -131,6 +131,22 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
+      _this.ariaPosInSetMap = {};
+      var latestAriaPosIndex = 0;
+      optionArray.forEach(function (option, index) {
+        if (!option.isGroupLabel) {
+          latestAriaPosIndex++;
+          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+        }
+      });
+      _this.ariaSetSize = latestAriaPosIndex;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -174,9 +190,6 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, _extends({
         key: id,
@@ -197,8 +210,8 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": index + 1 - labelCount,
-        "aria-setsize": data.length - labelCount,
+        "aria-posinset": _this.ariaPosInSetMap[index],
+        "aria-setsize": _this.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -355,6 +368,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           rest = _objectWithoutProperties(_this$props7, _excluded3);
 
       var optionArray = visibleOptions || options;
+      this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
       var calculatedHeight = heightIsFull ? false : forcedHeight; // If calculatedHeight is still undefined, then calculate it
 

package/optimize/es/components/collapsible_nav/collapsible_nav.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "role", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
+var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
 
 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; }
 
@@ -40,8 +40,6 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
       size = _ref$size === void 0 ? 320 : _ref$size,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? null : _ref$role,
       _ref$ownFocus = _ref.ownFocus,
       ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
       _ref$outsideClickClos = _ref.outsideClickCloses,
@@ -91,7 +89,6 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,

package/optimize/es/components/flyout/flyout.js

@@ -1,8 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonAriaLabel", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "role", "pushMinBreakpoint", "focusTrapProps"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
 
 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; }
 
@@ -15,9 +16,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useRef, useState, forwardRef, Fragment } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -25,6 +26,7 @@ import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiScreenReaderOnly } from '../accessibility';
 import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TYPES = ['push', 'overlay'];
@@ -48,7 +50,6 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$hideCloseButton = _ref.hideCloseButton,
       hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
       closeButtonProps = _ref.closeButtonProps,
-      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       _ref$closeButtonPosit = _ref.closeButtonPosition,
       closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
       onClose = _ref.onClose,
@@ -67,11 +68,12 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'overlay' : _ref$type,
       outsideClickCloses = _ref.outsideClickCloses,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'dialog' : _ref$role,
       _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
       pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-      focusTrapProps = _ref.focusTrapProps,
+      _ref$focusTrapProps = _ref.focusTrapProps,
+      _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
+      _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
+      includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var Element = as || defaultElement;
@@ -164,7 +166,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
-        "aria-label": closeButtonAriaLabel || closeAriaLabel,
+        "aria-label": closeAriaLabel,
         "data-test-subj": "euiFlyoutCloseButton"
       }, closeButtonProps, {
         className: closeButtonClasses,
@@ -177,24 +179,61 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }));
     });
   }
+  /*
+   * If not disabled, automatically add fixed EuiHeaders as shards
+   * to EuiFlyout focus traps, to prevent focus fighting
+   */
 
-  var hasOverlayMask = ownFocus && !isPushed;
 
-  var onClickOutside = function onClickOutside(event) {
-    // Do not close the flyout for any external click
-    if (outsideClickCloses === false) return undefined;
+  var flyoutToggle = useRef(document.activeElement);
 
-    if (hasOverlayMask) {
-      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fixedHeaders = _useState4[0],
+      setFixedHeaders = _useState4[1];
+
+  useEffect(function () {
+    if (includeFixedHeadersInFocusTrap) {
+      var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
+      setFixedHeaders(Array.from(fixedHeaderEls)); // Flyouts that are toggled from fixed headers do not have working
+      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+
+      fixedHeaderEls.forEach(function (header) {
+        if (header.contains(flyoutToggle.current)) {
+          resizeRef === null || resizeRef === void 0 ? void 0 : resizeRef.focus();
+        }
+      });
     } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
-    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+      // Clear existing headers if necessary, e.g. switching to `false`
+      setFixedHeaders(function (headers) {
+        return headers.length ? [] : headers;
+      });
+    }
+  }, [includeFixedHeadersInFocusTrap, resizeRef]);
 
+  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+    shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray(_focusTrapProps.shards || []))
+  });
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
 
-    return undefined;
-  };
+
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = useGeneratedHtmlId();
+
+  var screenReaderDescription = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    id: descriptionId
+  }, hasOverlayMask ? ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderModalDialog",
+    default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+  }) : ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderNonModalDialog",
+    default: "You are in a non-modal dialog. To close the dialog, press Escape."
+  }), ' ', fixedHeaders.length > 0 && ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderFixedHeaders",
+    default: "You can still continue tabbing through the page headers in addition to the dialog."
+  })));
   /*
    * Trap focus even when `ownFocus={false}`, otherwise closing
    * the flyout won't return focus to the originating button.
@@ -209,6 +248,22 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
 
 
+  var onClickOutside = function onClickOutside(event) {
+    // Do not close the flyout for any external click
+    if (outsideClickCloses === false) return undefined;
+
+    if (hasOverlayMask) {
+      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+      if (event.target === maskRef.current) return onClose(event);
+    } else {
+      // No overlay mask is present, so any outside clicks should close the flyout
+      if (outsideClickCloses === true) return onClose(event);
+    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+
+
+    return undefined;
+  };
+
   var flyout = ___EmotionJSX(EuiFocusTrap, _extends({
     disabled: isPushed,
     clickOutsideDisables: !ownFocus,
@@ -216,12 +271,14 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
     css: cssStyles
   }, rest, {
-    role: role,
+    role: "dialog",
     className: classes,
-    tabIndex: -1,
+    tabIndex: 0,
+    "data-autofocus": true,
+    "aria-describedby": !isPushed ? descriptionId : undefined,
     style: newStyle,
     ref: setRef
-  }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+  }), !isPushed && screenReaderDescription, closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
 
 
   var mergedMaskProps = _objectSpread(_objectSpread({}, maskProps), {}, {
@@ -237,7 +294,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     flyout = ___EmotionJSX(EuiPortal, null, flyout);
   }
 
-  return ___EmotionJSX(Fragment, null, ___EmotionJSX(EuiWindowEvent, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiWindowEvent, {
     event: "keydown",
     handler: onKeyDown
   }), flyout);

package/optimize/es/components/header/header.js

@@ -87,6 +87,8 @@ export var EuiHeader = function EuiHeader(_ref) {
   }
 
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    "data-fixed-header": position === 'fixed' || undefined // Used by EuiFlyouts as a query selector
+
   }, rest), contents);
 };

package/optimize/es/components/search_bar/filters/field_value_selection_filter.js

@@ -251,16 +251,16 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       if (!multiSelect && autoClose) {
         this.closePopover();
 
-        var _query = checked ? this.props.query.removeSimpleFieldClauses(field) : this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator);
+        var _query = checked ? this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldClauses(field);
 
         this.props.onChange(_query);
       } else {
         if (multiSelect === 'or') {
-          var _query2 = checked ? this.props.query.removeOrFieldValue(field, value) : this.props.query.addOrFieldValue(field, value, true, operator);
+          var _query2 = checked ? this.props.query.addOrFieldValue(field, value, true, operator) : this.props.query.removeOrFieldValue(field, value);
 
           this.props.onChange(_query2);
         } else {
-          var _query3 = checked ? this.props.query.removeSimpleFieldValue(field, value) : this.props.query.addSimpleFieldValue(field, value, true, operator);
+          var _query3 = checked ? this.props.query.addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldValue(field, value);
 
           this.props.onChange(_query3);
         }
@@ -370,13 +370,9 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         listProps: {
           isVirtualized: isOverSearchThreshold || false
         },
-        onChange: function onChange(options) {
-          var diff = items.find(function (item, index) {
-            return item.checked !== options[index].checked;
-          });
-
-          if (diff) {
-            _this5.onOptionClick(diff.data.optionField, diff.data.value, diff.checked);
+        onChange: function onChange(options, event, changedOption) {
+          if (changedOption.data) {
+            _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
           }
         }
       }, searchProps), function (list, search) {

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -99,6 +99,22 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
+      _this.ariaPosInSetMap = {};
+      var latestAriaPosIndex = 0;
+      optionArray.forEach(function (option, index) {
+        if (!option.isGroupLabel) {
+          latestAriaPosIndex++;
+          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+        }
+      });
+      _this.ariaSetSize = latestAriaPosIndex;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/memo(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -142,9 +158,6 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return ___EmotionJSX(EuiSelectableListItem, _extends({
         key: id,
@@ -165,8 +178,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": index + 1 - labelCount,
-        "aria-setsize": data.length - labelCount,
+        "aria-posinset": _this.ariaPosInSetMap[index],
+        "aria-setsize": _this.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -323,6 +336,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           rest = _objectWithoutProperties(_this$props7, _excluded3);
 
       var optionArray = visibleOptions || options;
+      this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
       var calculatedHeight = heightIsFull ? false : forcedHeight; // If calculatedHeight is still undefined, then calculate it
 

package/optimize/lib/components/collapsible_nav/collapsible_nav.js

@@ -27,7 +27,7 @@ var _flyout = require("../flyout");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "role", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
+var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
 
 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); }
 
@@ -56,8 +56,6 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
       size = _ref$size === void 0 ? 320 : _ref$size,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? null : _ref$role,
       _ref$ownFocus = _ref.ownFocus,
       ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
       _ref$outsideClickClos = _ref.outsideClickCloses,
@@ -106,7 +104,6 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,