@elastic/eui 71.1.0 → 72.1.0

package/lib/components/focus_trap/focus_trap.a11y.js

@@ -0,0 +1,140 @@
+"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 _badge = require("../badge");
+
+var _button = require("../button");
+
+var _form = require("../form");
+
+var _focus_trap = require("./focus_trap");
+
+var _spacer = require("../spacer");
+
+var _panel = require("../panel");
+
+var _text = require("../text");
+
+var _services = require("../../services");
+
+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 _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; }
+
+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 CheckboxGroup = function CheckboxGroup() {
+  var checkboxGroupItemId__1 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'checkboxGroupItem',
+    suffix: 'first'
+  });
+  var checkboxGroupItemId__2 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'checkboxGroupItem',
+    suffix: 'second'
+  });
+  var checkboxes = [{
+    id: checkboxGroupItemId__1,
+    label: 'Option one is checked by default'
+  }, {
+    id: checkboxGroupItemId__2,
+    label: 'Option two'
+  }];
+
+  var _useState = (0, _react.useState)(_defineProperty({}, checkboxGroupItemId__1, true)),
+      _useState2 = _slicedToArray(_useState, 1),
+      checkboxIdToSelectedMap = _useState2[0];
+
+  return (0, _react2.jsx)(_form.EuiCheckboxGroup, {
+    options: checkboxes,
+    idToSelectedMap: checkboxIdToSelectedMap,
+    onChange: function onChange() {}
+  });
+};
+
+var FocusTrap = function FocusTrap() {
+  var _useState4 = (0, _react.useState)(true),
+      _useState5 = _slicedToArray(_useState4, 2),
+      isDisabled = _useState5[0],
+      changeDisabled = _useState5[1];
+
+  var toggleDisabled = function toggleDisabled() {
+    return changeDisabled(!isDisabled);
+  };
+
+  return (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-trap-container"
+  }, (0, _react2.jsx)(_badge.EuiBadge, {
+    "data-test-subj": "cy-trap-message"
+  }, "Trap is ", isDisabled ? 'disabled' : 'enabled'), (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "s"
+  }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    disabled: isDisabled
+  }, (0, _react2.jsx)(_panel.EuiPanel, null, (0, _react2.jsx)(_form.EuiFieldText, {
+    "data-test-subj": "cy-input-one",
+    placeholder: "Placeholder text first input",
+    value: "",
+    onChange: function onChange() {},
+    "aria-label": "First focusable input"
+  }), (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "m"
+  }), (0, _react2.jsx)(CheckboxGroup, null), (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "m"
+  }), (0, _react2.jsx)(_button.EuiButton, {
+    onClick: toggleDisabled,
+    "data-test-subj": "cy-focus-trap-button"
+  }, "".concat(!isDisabled ? 'Disable' : 'Enable', " Focus Trap")))), (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "l"
+  }), (0, _react2.jsx)(_text.EuiText, null, "The button below is not focusable by keyboard as long as the focus trap is enabled."), (0, _react2.jsx)(_button.EuiButton, {
+    onClick: function onClick() {},
+    "data-test-subj": "cy-external-button"
+  }, "External Focusable Element"));
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount((0, _react2.jsx)(FocusTrap, null));
+});
+describe('EuiFocusTrap', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the focus trap is enabled', function () {
+      cy.get('button[data-test-subj="cy-focus-trap-button"]').realClick();
+      cy.get('span[ data-test-subj="cy-trap-message"]').should('have.text', 'Trap is enabled');
+      cy.checkAxe();
+    });
+  });
+  describe('Accessibility checks for keyboard navigation', function () {
+    it('allows the button outside the FocusTrap to receive focus', function () {
+      cy.repeatRealPress('Tab', 5);
+      cy.get('button[data-test-subj="cy-external-button"]').should('have.focus');
+      cy.checkAxe();
+    });
+    it('prevents the button outside the FocusTrap from receiving focus', function () {
+      cy.repeatRealPress('Tab', 4);
+      cy.realPress('Enter');
+      cy.realPress('Tab');
+      cy.get('input[data-test-subj="cy-input-one"]').should('have.focus');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/form/file_picker/file_picker.js

@@ -260,6 +260,7 @@ var EuiFilePicker = /*#__PURE__*/function (_Component) {
           id: promptId
         }, (0, _react2.jsx)(_icon.EuiIcon, {
           className: "euiFilePicker__icon",
+          color: disabled ? 'subdued' : 'primary',
           type: "importAction",
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"

package/lib/components/form/range/range_highlight.styles.js

@@ -29,7 +29,7 @@ exports.euiRangeHighlightStyles = euiRangeHighlightStyles;
 var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";border-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 

package/lib/components/form/range/range_levels.styles.js

@@ -29,7 +29,7 @@ var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext) {
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat((0, _services.transparentize)(stripeColor, 0.5), ",\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 50%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
-    hasRange: /*#__PURE__*/(0, _react.css)("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.s, " ", euiTheme.size.s, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    hasRange: /*#__PURE__*/(0, _react.css)("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };

package/lib/components/form/range/range_track.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _range = _interopRequireDefault(require("lodash/range"));
 
 var _services = require("../../../services");
@@ -23,7 +25,7 @@ var _range_track = require("./range_track.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange"];
+var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,6 +65,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       value = _ref.value,
       compressed = _ref.compressed,
       showRange = _ref.showRange,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   (0, _react.useEffect)(function () {
@@ -122,8 +125,9 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       trackWidth = _useState2[0],
       setTrackWidth = _useState2[1];
 
+  var classes = (0, _classnames.default)('euiRangeTrack', className);
   return (0, _react2.jsx)("div", _extends({
-    className: "euiRangeTrack",
+    className: classes,
     css: cssStyles
   }, rest, {
     ref: function ref(node) {

package/lib/components/header/header.a11y.js

@@ -0,0 +1,385 @@
+"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 _avatar = require("../avatar");
+
+var _flex = require("../flex");
+
+var _header_breadcrumbs = require("./header_breadcrumbs");
+
+var _header = require("./header");
+
+var _header_logo = require("./header_logo");
+
+var _header_section = require("./header_section");
+
+var _icon = require("../icon");
+
+var _key_pad_menu = require("../key_pad_menu");
+
+var _link = require("../link");
+
+var _popover = require("../popover");
+
+var _selectable = require("../selectable");
+
+var _spacer = require("../spacer");
+
+var _text = require("../text");
+
+var _services = require("../../services");
+
+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 Header = function Header() {
+  var renderLogo = function renderLogo() {
+    return (0, _react2.jsx)(_header_logo.EuiHeaderLogo, {
+      iconType: "logoElastic",
+      href: "#",
+      onClick: function onClick(e) {
+        return e.preventDefault();
+      },
+      "aria-label": "Go to home page"
+    });
+  };
+
+  var renderBreadcrumbs = function renderBreadcrumbs() {
+    var breadcrumbs = [{
+      text: 'Management',
+      href: '#',
+      onClick: function onClick(e) {
+        e.preventDefault();
+      },
+      'data-test-subj': 'breadcrumbsAnimals',
+      className: 'customClass'
+    }, {
+      text: 'Truncation test is here for a really long item',
+      href: '#',
+      onClick: function onClick(e) {
+        e.preventDefault();
+      }
+    }, {
+      text: 'Hidden',
+      'data-test-subj': 'cy-breadcrumb-hidden',
+      href: '#',
+      onClick: function onClick(e) {
+        e.preventDefault();
+      }
+    }, {
+      text: 'Users',
+      href: '#',
+      onClick: function onClick(e) {
+        e.preventDefault();
+      }
+    }, {
+      text: 'Create'
+    }];
+    return (0, _react2.jsx)(_header_breadcrumbs.EuiHeaderBreadcrumbs, {
+      "aria-label": "Header breadcrumbs example",
+      breadcrumbs: breadcrumbs
+    });
+  };
+
+  var search = (0, _react2.jsx)(_selectable.EuiSelectableTemplateSitewide, {
+    options: [],
+    searchProps: {
+      compressed: true
+    },
+    popoverButton: (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, {
+      "aria-label": "Sitewide search"
+    }, (0, _react2.jsx)(_icon.EuiIcon, {
+      type: "search",
+      size: "m"
+    })),
+    emptyMessage: (0, _react2.jsx)(_selectable.EuiSelectableMessage, {
+      style: {
+        minHeight: 300
+      },
+      "data-test-subj": "cy-search-menu"
+    }, (0, _react2.jsx)("p", null, "Please see the component page for", ' ', (0, _react2.jsx)("strong", null, "EuiSelectableTemplateSitewide"), "on how to configure your sitewide search."))
+  });
+  return (0, _react2.jsx)(_header.EuiHeader, null, (0, _react2.jsx)(_header_section.EuiHeaderSection, {
+    grow: false
+  }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
+    border: "right"
+  }, renderLogo()), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
+    border: "right"
+  }, (0, _react2.jsx)(HeaderSpacesMenu, null))), renderBreadcrumbs(), (0, _react2.jsx)(_header_section.EuiHeaderSection, {
+    side: "right"
+  }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, search), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderUserMenu, null)), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderAppMenu, null))));
+};
+
+var HeaderUserMenu = function HeaderUserMenu() {
+  var headerUserPopoverId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'headerUserPopover'
+  });
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var onMenuButtonClick = function onMenuButtonClick() {
+    setIsOpen(!isOpen);
+  };
+
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+  };
+
+  var button = (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, {
+    "aria-controls": headerUserPopoverId,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "true",
+    "aria-label": "Account menu",
+    onClick: onMenuButtonClick
+  }, (0, _react2.jsx)(_avatar.EuiAvatar, {
+    name: "John Username",
+    size: "s"
+  }));
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    id: headerUserPopoverId,
+    button: button,
+    isOpen: isOpen,
+    anchorPosition: "downRight",
+    closePopover: closeMenu,
+    panelPaddingSize: "none",
+    "data-test-subj": "cy-account-menu"
+  }, (0, _react2.jsx)("div", {
+    style: {
+      width: 320
+    }
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "m",
+    className: "euiHeaderProfile",
+    responsive: false
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_avatar.EuiAvatar, {
+    name: "John Username",
+    size: "xl"
+  })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "John Username")), (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "m"
+  }), (0, _react2.jsx)(_flex.EuiFlexGroup, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    justifyContent: "spaceBetween"
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_link.EuiLink, null, "Edit profile")), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_link.EuiLink, null, "Log out")))))))));
+};
+
+var HeaderSpacesMenu = function HeaderSpacesMenu() {
+  var headerSpacesPopoverId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'headerSpacesPopover'
+  });
+  var spacesValues = [{
+    label: 'Sales team',
+    prepend: (0, _react2.jsx)(_avatar.EuiAvatar, {
+      type: "space",
+      name: "Sales Team",
+      size: "s"
+    }),
+    checked: 'on'
+  }, {
+    label: 'Engineering',
+    prepend: (0, _react2.jsx)(_avatar.EuiAvatar, {
+      type: "space",
+      name: "Engineering",
+      size: "s"
+    })
+  }];
+
+  var _useState3 = (0, _react.useState)(spacesValues),
+      _useState4 = _slicedToArray(_useState3, 2),
+      spaces = _useState4[0],
+      setSpaces = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(spaces.filter(function (option) {
+    return option.checked;
+  })[0]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedSpace = _useState6[0],
+      setSelectedSpace = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var isListExtended = function isListExtended() {
+    return spaces.length > 4 ? true : false;
+  };
+
+  var onMenuButtonClick = function onMenuButtonClick() {
+    setIsOpen(!isOpen);
+  };
+
+  var closePopover = function closePopover() {
+    setIsOpen(false);
+  };
+
+  var onChange = function onChange(options) {
+    setSpaces(options);
+    setSelectedSpace(options.filter(function (option) {
+      return option.checked;
+    })[0]);
+    setIsOpen(false);
+  };
+
+  var button = (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, {
+    "aria-controls": headerSpacesPopoverId,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "true",
+    "aria-label": "Spaces menu",
+    onClick: onMenuButtonClick
+  }, selectedSpace.prepend);
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    id: headerSpacesPopoverId,
+    button: button,
+    isOpen: isOpen,
+    anchorPosition: "downLeft",
+    closePopover: closePopover,
+    panelPaddingSize: "none"
+  }, (0, _react2.jsx)(_selectable.EuiSelectable, {
+    searchable: isListExtended(),
+    searchProps: {
+      placeholder: 'Find a space',
+      compressed: true
+    },
+    options: spaces,
+    singleSelection: "always",
+    style: {
+      width: 300
+    },
+    onChange: onChange,
+    listProps: {
+      rowHeight: 40,
+      showIcons: false
+    },
+    "data-test-subj": "cy-spaces-menu"
+  }, function (list, search) {
+    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_popover.EuiPopoverTitle, {
+      paddingSize: "s"
+    }, search || 'Your spaces'), list);
+  }));
+};
+
+var HeaderAppMenu = function HeaderAppMenu() {
+  var headerAppPopoverId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'headerAppPopover'
+  });
+  var headerAppKeyPadMenuId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'headerAppKeyPadMenu'
+  });
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1];
+
+  var onMenuButtonClick = function onMenuButtonClick() {
+    setIsOpen(!isOpen);
+  };
+
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+  };
+
+  var button = (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, {
+    "aria-controls": headerAppKeyPadMenuId,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "true",
+    "aria-label": "Apps menu with 1 new app",
+    notification: "1",
+    onClick: onMenuButtonClick
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "apps",
+    size: "m"
+  }));
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    id: headerAppPopoverId,
+    button: button,
+    isOpen: isOpen,
+    anchorPosition: "downRight",
+    closePopover: closeMenu
+  }, (0, _react2.jsx)(_key_pad_menu.EuiKeyPadMenu, {
+    id: headerAppKeyPadMenuId,
+    style: {
+      width: 288
+    },
+    "data-test-subj": "cy-apps-menu"
+  }, (0, _react2.jsx)(_key_pad_menu.EuiKeyPadMenuItem, {
+    label: "Discover"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "discoverApp",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu.EuiKeyPadMenuItem, {
+    label: "Dashboard"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "dashboardApp",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu.EuiKeyPadMenuItem, {
+    label: "Dev Tools"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "devToolsApp",
+    size: "l"
+  }))));
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount((0, _react2.jsx)(Header, null));
+});
+describe('EuiHeader', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when Spaces menu is expanded', function () {
+      cy.get('button[aria-label="Spaces menu"]').realClick();
+      cy.get('div[data-test-subj="cy-spaces-menu"]').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when Account menu is expanded', function () {
+      cy.get('button[aria-label="Account menu"]').realClick();
+      cy.get('div[data-test-subj="cy-account-menu"]').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when Sitewide search is expanded', function () {
+      cy.get('button[aria-label="Sitewide search"]').realClick();
+      cy.get('div[data-test-subj="cy-search-menu"]').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when Apps menu is expanded', function () {
+      cy.get('button[aria-label="Apps menu with 1 new app"]').realClick();
+      cy.get('ul[data-test-subj="cy-apps-menu"]').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when a hidden breadcrumb is expanded', function () {
+      cy.get('button[aria-label="See collapsed breadcrumbs"]').realClick();
+      cy.get('a[data-test-subj="cy-breadcrumb-hidden"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/icon/icon_ML.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = require("./icon");
+
+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('EuiIcons', function () {
+  describe('Automated accessibility check for ML icons', function () {
+    var MLIcons = ['dataVisualizer', 'createAdvancedJob', 'classificationJob', 'createMultiMetricJob', 'outlierDetectionJob', 'createPopulationJob', 'regressionJob', 'createSingleMetricJob'];
+
+    var MLGrid = function MLGrid() {
+      return (0, _react2.jsx)("div", null, MLIcons.map(function (glyph) {
+        return (0, _react2.jsx)(_icon.EuiIcon, {
+          className: "eui-alignMiddle",
+          type: glyph
+        });
+      }));
+    };
+
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(MLGrid, null));
+      cy.get('div[data-cy-root]').find('svg', {
+        timeout: 5000
+      }).should('have.length', 8);
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/icon/icon_apps.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = require("./icon");
+
+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('EuiIcons', function () {
+  describe('Automated accessibility check for app icons', function () {
+    var AppIcons = ['addDataApp', 'advancedSettingsApp', 'agentApp', 'apmApp', 'appSearchApp', 'auditbeatApp', 'canvasApp', 'casesApp', 'codeApp', 'consoleApp', 'crossClusterReplicationApp', 'dashboardApp', 'devToolsApp', 'discoverApp', 'emsApp', 'filebeatApp', 'fleetApp', 'gisApp', 'graphApp', 'grokApp', 'heartbeatApp', 'indexManagementApp', 'indexPatternApp', 'indexRollupApp', 'lensApp', 'logsApp', 'machineLearningApp', 'managementApp', 'metricbeatApp', 'metricsApp', 'monitoringApp', 'notebookApp', 'packetbeatApp', 'pipelineApp', 'recentlyViewedApp', 'reportingApp', 'savedObjectsApp', 'searchProfilerApp', 'securityAnalyticsApp', 'securityApp', 'spacesApp', 'sqlApp', 'timelionApp', 'upgradeAssistantApp', 'uptimeApp', 'usersRolesApp', 'visualizeApp', 'watchesApp', 'workplaceSearchApp'];
+
+    var AppGrid = function AppGrid() {
+      return (0, _react2.jsx)("div", null, AppIcons.map(function (glyph) {
+        return (0, _react2.jsx)(_icon.EuiIcon, {
+          className: "eui-alignMiddle",
+          type: glyph
+        });
+      }));
+    };
+
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(AppGrid, null));
+      cy.get('div[data-cy-root]').find('svg', {
+        timeout: 5000
+      }).should('have.length', 49);
+      cy.checkAxe();
+    });
+  });
+});