@elastic/eui 70.2.3 → 70.3.0

package/lib/components/tabs/tabs.a11y.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tabbed_content = require("./tabbed_content");
+
+var _spacer = require("../spacer");
+
+var _text = require("../text");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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) { _defineProperty(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; }
+
+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; }
+
+var tabs = [{
+  id: 'cobalt--id',
+  name: 'Cobalt',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth\u2019s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.")))
+}, {
+  id: 'dextrose--id',
+  name: 'Dextrose',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.")))
+}, {
+  id: 'hydrogen--id',
+  name: 'Hydrogen',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table")))
+}, {
+  id: 'monosodium_glutammate--id',
+  name: 'Monosodium Glutamate',
+  content: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("p", null, "Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.")))
+}];
+var defaultTabProps = {
+  tabs: tabs,
+  initialSelectedTab: tabs[0],
+  autoFocus: 'selected',
+  onTabClick: function onTabClick() {}
+};
+describe('EuiTabs', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations with default props', function () {
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, defaultTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with second tab open on render', function () {
+      var secondSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[1]
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, secondSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with third tab open on render', function () {
+      var thirdSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[2]
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, thirdSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with last tab open on render', function () {
+      var lastSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[3]
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, lastSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with all tabs disabled except first', function () {
+      var disabledTabs = tabs.map(function (tab, i) {
+        if (i === 0) {
+          return tab;
+        }
+
+        return _objectSpread(_objectSpread({}, tab), {}, {
+          disabled: true
+        });
+      });
+
+      var disabledTabProps = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        tabs: disabledTabs
+      });
+
+      cy.mount((0, _react2.jsx)(_tabbed_content.EuiTabbedContent, disabledTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/tree_view/tree_view.a11y.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tree_view = require("./tree_view");
+
+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"/>
+var TreeView = function TreeView() {
+  var items = [{
+    label: 'Item One',
+    id: 'item_one',
+    isExpanded: true,
+    children: [{
+      label: 'Item A',
+      id: 'item_a'
+    }, {
+      label: 'Item B',
+      id: 'item_b',
+      children: [{
+        label: 'A Cloud',
+        id: 'item_cloud'
+      }, {
+        label: "I'm a Bug",
+        id: 'item_bug',
+        className: 'classForBug'
+      }]
+    }, {
+      label: 'Item C',
+      id: 'item_c',
+      children: [{
+        label: 'Another Cloud',
+        id: 'item_cloud2'
+      }, {
+        label: 'Another Bug',
+        id: 'item_bug2'
+      }]
+    }]
+  }, {
+    label: 'Item Two',
+    id: 'item_two'
+  }];
+  var defaultTreeViewProps = {
+    items: items,
+    'aria-label': 'Sample folder tree'
+  };
+  return (0, _react2.jsx)("div", {
+    style: {
+      width: '20rem'
+    }
+  }, (0, _react2.jsx)(_tree_view.EuiTreeView, defaultTreeViewProps));
+};
+
+describe('EuiTreeView', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with a nested child expanded', function () {
+      cy.mount((0, _react2.jsx)(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.get('button#item_b').realClick();
+      cy.get('button#item_b').should('have.attr', 'aria-expanded', 'true');
+      cy.get('li.euiTreeView__node').contains('A Cloud').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/global_styling/utility/animations.js

@@ -3,13 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
 
 var _react = require("@emotion/react");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.euiAnimFadeIn = euiAnimFadeIn;
+exports.euiAnimFadeIn = euiAnimFadeIn;
+
+var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
+  return (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
+};
+
+exports.euiAnimSlideInUp = euiAnimSlideInUp;

package/optimize/es/components/accessibility/skip_link/skip_link.js

@@ -58,15 +58,16 @@ export var EuiSkipLink = function EuiSkipLink(_ref) {
 
     setHasValidId(false); // If no valid element via ID is available, use the fallback query selectors
 
-    var fallbackEl = document.querySelector(fallbackDestination);
+    if (fallbackDestination) {
+      var fallbackEl = document.querySelector(fallbackDestination);
 
-    if (fallbackEl) {
-      setDestinationEl(fallbackEl);
+      if (fallbackEl) {
+        setDestinationEl(fallbackEl);
+      }
     }
   }, [destinationId, fallbackDestination]);
   var onClick = useCallback(function (e) {
-    if (overrideLinkBehavior || !hasValidId) {
-      if (!destinationEl) return;
+    if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
       e.preventDefault(); // Scroll to the top of the destination content only if it's ~mostly out of view
 
       var destinationY = destinationEl.getBoundingClientRect().top;

package/optimize/es/components/badge/beta_badge/beta_badge.js

@@ -1,7 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
+var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size", "alignment"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,6 +19,7 @@ import { euiBetaBadgeStyles } from './beta_badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['accent', 'subdued', 'hollow'];
 export var SIZES = ['s', 'm'];
+export var ALIGNMENTS = ['baseline', 'middle'];
 export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var className = _ref.className,
       label = _ref.label,
@@ -37,6 +38,8 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
       target = _ref.target,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? 'baseline' : _ref$alignment,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var euiTheme = useEuiTheme();
@@ -44,7 +47,7 @@ export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var isCircular = iconType || singleLetter;
   var classes = classNames('euiBetaBadge', className);
   var styles = euiBetaBadgeStyles(euiTheme);
-  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
+  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], styles[alignment], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
   var icon;
 
   if (iconType) {

package/optimize/es/components/badge/beta_badge/beta_badge.styles.js

@@ -14,6 +14,24 @@ import { logicalCSS, euiFocusRing, euiFontSizeFromScale, euiTextTruncate, mathWi
 import { tint, isColorDark, hexToRgb } from '../../../services';
 
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "l1nme7-middle",
+  styles: "vertical-align:middle;label:middle;"
+} : {
+  name: "l1nme7-middle",
+  styles: "vertical-align:middle;label:middle;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "19hexhy-baseline",
+  styles: "vertical-align:baseline;label:baseline;"
+} : {
+  name: "19hexhy-baseline",
+  styles: "vertical-align:baseline;label:baseline;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "pzpqqg-euiBetaBadge__icon",
   styles: "position:relative;transform:translate(0, -1px);label:euiBetaBadge__icon;"
 } : {
@@ -26,7 +44,7 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
       colorMode = euiThemeContext.colorMode;
   return {
-    euiBetaBadge: /*#__PURE__*/css("display:inline-block;vertical-align:super;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/css("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
@@ -52,12 +70,15 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
         })), "\n        ")
       }
     },
-    euiBetaBadge__icon: _ref
+    euiBetaBadge__icon: _ref3,
+    // Alignments
+    baseline: _ref2,
+    middle: _ref
   };
 }; // Util for detecting text color based on badge bg color
 
-export var getBadgeColors = function getBadgeColors(backgroundColor, _ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var getBadgeColors = function getBadgeColors(backgroundColor, _ref4) {
+  var euiTheme = _ref4.euiTheme;
   var textColor = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(backgroundColor))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return "\n    background-color: ".concat(backgroundColor, ";\n    color: ").concat(textColor, ";\n  ");
 };

package/optimize/es/components/card/card.styles.js

@@ -55,11 +55,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 };
 
 var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "z24364-euiCard__main",
-  styles: "display:flex;label:euiCard__main;"
+  name: "31kq8f-euiCard__main",
+  styles: "display:flex;inline-size:100%;label:euiCard__main;"
 } : {
-  name: "z24364-euiCard__main",
-  styles: "display:flex;label:euiCard__main;",
+  name: "31kq8f-euiCard__main",
+  styles: "display:flex;inline-size:100%;label:euiCard__main;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiSuperDatePicker } from './super_date_picker';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var SuperDatePicker = function SuperDatePicker() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 1),
+      showUpdateButton = _useState4[0];
+
+  var _useState5 = useState('now-30m'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      start = _useState6[0],
+      setStart = _useState6[1];
+
+  var _useState7 = useState('now'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      end = _useState8[0],
+      setEnd = _useState8[1];
+
+  var _useState9 = useState(true),
+      _useState10 = _slicedToArray(_useState9, 1),
+      showFill = _useState10[0];
+
+  var onTimeChange = function onTimeChange(_ref) {
+    var start = _ref.start,
+        end = _ref.end;
+    setStart(start);
+    setEnd(end);
+    setIsLoading(true);
+    startLoading();
+  };
+
+  var startLoading = function startLoading() {
+    setTimeout(stopLoading, 1000);
+  };
+
+  var stopLoading = function stopLoading() {
+    setIsLoading(false);
+  };
+
+  var datepickerProps = {
+    isLoading: isLoading,
+    start: start,
+    end: end,
+    onTimeChange: onTimeChange,
+    showUpdateButton: showUpdateButton
+  };
+  return ___EmotionJSX(EuiSuperDatePicker, _extends({}, datepickerProps, {
+    updateButtonProps: {
+      fill: showFill
+    }
+  }));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(SuperDatePicker, null));
+  cy.get('div.euiSuperDatePicker__flexWrapper').should('exist');
+});
+describe('EuiSuperDatePicker', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when quick select menu is open', function () {
+      cy.get('button.euiFormControlLayout__prepend').click();
+      cy.get('div.euiPanel').contains('Quick select').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when start / end date menus are open', function () {
+      cy.get('button.euiSuperDatePicker__prettyFormat').click();
+      cy.get('div.euiDatePopoverContent').should('exist');
+      cy.checkAxe();
+      cy.get('button.euiDatePopoverButton--start').click();
+      cy.get('button.euiDatePopoverButton--end').click();
+      cy.get('div.euiDatePopoverContent').should('exist');
+      cy.checkAxe();
+      cy.get('button.euiDatePopoverButton--end').click();
+      cy.get('div.euiDatePopoverContent').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/flex/flex_group.styles.js

@@ -167,7 +167,7 @@ export var euiFlexGroupStyles = function euiFlexGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlexGroup: _ref17,
-    responsive: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;.euiFlexItem{", logicalCSS('width', '100%'), " flex-basis:100%;}};label:responsive;"),
+    responsive: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;&>.euiFlexItem{", logicalCSS('width', '100%'), " flex-basis:100%;}};label:responsive;"),
     wrap: _ref16,
     gutterSizes: {
       none: /*#__PURE__*/css(";label:none;"),

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiFlyout } from './flyout';
+import { EuiButtonEmpty } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var childrenDefault = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
+  "data-test-subj": "itemA"
+}, "Item A"), ___EmotionJSX("button", {
+  "data-test-subj": "itemB"
+}, "Item B"), ___EmotionJSX("button", {
+  "data-test-subj": "itemC"
+}, "Item C"), ___EmotionJSX("input", {
+  "data-test-subj": "itemD"
+}));
+
+var Flyout = function Flyout(_ref) {
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? childrenDefault : _ref$children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsOpen(!isOpen);
+  };
+
+  var button = ___EmotionJSX(EuiButtonEmpty, {
+    onClick: onButtonClick
+  }, "Toggle flyout");
+
+  return ___EmotionJSX("div", null, button, isOpen ? ___EmotionJSX(EuiFlyout, _extends({
+    "data-test-subj": "flyoutSpec",
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }, rest), children) : null);
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Flyout, null));
+  cy.get('div.euiFlyout').should('not.exist');
+});
+describe('EuiFlyout', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when flyout is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiFlyout').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when flyout is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiFlyout').should('exist');
+      cy.get('button.euiFlyout__closeButton').click();
+      cy.get('div.euiFlyout').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/image/image_fullscreen_wrapper.styles.js

@@ -1,7 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,18 +5,14 @@ var _templateObject;
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { css, keyframes } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiCanAnimate } from '../../global_styling';
+import { css } from '@emotion/react';
+import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiAnimSlideInUp } from '../../global_styling';
 export var euiImageFullscreenWrapperStyles = function euiImageFullscreenWrapperStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageFullscreenWrapper: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), ";", logicalCSS('max-width', '80vw'), ";", logicalTextAlignCSS('center'), ";line-height:0;", euiCanAnimate, "{animation:", euiImageFullScreen(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
+    euiImageFullscreenWrapper: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), ";", logicalCSS('max-width', '80vw'), ";", logicalTextAlignCSS('center'), ";line-height:0;", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxxxl), " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.bounce, ";}&:hover [class*='euiImageCaption']{text-decoration:underline;};label:euiImageFullscreenWrapper;"),
     // Sizes
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;")
   };
-};
-
-var euiImageFullScreen = function euiImageFullScreen(size) {
-  return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
 };

package/optimize/es/components/modal/confirm_modal.js

@@ -17,6 +17,8 @@ import { EuiModalFooter } from './modal_footer';
 import { EuiModalHeader } from './modal_header';
 import { EuiModalHeaderTitle } from './modal_header_title';
 import { EuiModalBody } from './modal_body';
+import { useEuiTheme } from '../../services';
+import { euiModalStyles } from './modal.styles';
 import { EuiButton, EuiButtonEmpty } from '../button';
 import { EuiText } from '../text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -70,6 +72,9 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   };
 
   var classes = classnames('euiModal--confirmation', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalStyles(euiTheme);
+  var cssStyles = [styles.confirmation];
   var modalTitle;
 
   if (title) {
@@ -88,6 +93,7 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
 
   return ___EmotionJSX(EuiModal, _extends({
     className: classes,
+    css: cssStyles,
     onClose: onCancel
   }, rest), modalTitle, message && ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, {
     "data-test-subj": "confirmModalBodyText"

package/optimize/es/components/modal/modal.a11y.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiModal, EuiModalHeader, EuiModalHeaderTitle, EuiModalBody, EuiModalFooter } from './index';
+import { EuiButton } from '../button';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Modal = function Modal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isModalVisible = _useState2[0],
+      setIsModalVisible = _useState2[1];
+
+  var closeModal = function closeModal() {
+    return setIsModalVisible(false);
+  };
+
+  var showModal = function showModal() {
+    return setIsModalVisible(true);
+  };
+
+  var modalProps = {
+    title: 'Do this thing',
+    onClose: closeModal,
+    children: React
+  };
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: showModal
+  }, "Show confirm modal"), isModalVisible && ___EmotionJSX(EuiModal, modalProps, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiModalHeaderTitle, null, ___EmotionJSX("h1", null, "Title of modal"))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX("p", null, "This is a simple modal body")), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
+    onClick: closeModal,
+    fill: true
+  }, "Close"))));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Modal, null));
+  cy.get('div.euiModal').should('not.exist');
+  cy.get('button.euiButton').click();
+  cy.get('div.euiModal').should('exist');
+});
+describe('EuiModal', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations when modal is open', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when modal is closed', function () {
+      cy.get('div.euiModalFooter button.euiButton').click();
+      cy.get('div.euiModal').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});