@elastic/eui 74.0.1 → 75.0.0

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/form/range/range.a11y.js

@@ -0,0 +1,206 @@
+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 { EuiDualRange } from './dual_range';
+import { EuiRange } from './range';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+describe('Single EuiRange', function () {
+  var SingleRange = function SingleRange() {
+    var _useState = useState('100'),
+        _useState2 = _slicedToArray(_useState, 2),
+        value = _useState2[0],
+        setValue = _useState2[1];
+
+    var onChange = function onChange(e) {
+      setValue(e.currentTarget.value);
+    };
+
+    return ___EmotionJSX(EuiRange, {
+      id: "cy-range-single",
+      min: 100,
+      max: 200,
+      value: value,
+      onChange: onChange,
+      showLabels: true,
+      showRange: true,
+      showValue: true,
+      valuePrepend: "100 - ",
+      "aria-label": "An example of EuiRange with valuePrepend prop"
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(SingleRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the range slider is increased', function () {
+      cy.realPress('Tab');
+      cy.get('input#cy-range-single').should('have.focus');
+      cy.repeatRealPress('ArrowRight', 10);
+      cy.get('output.euiRangeTooltip__value').contains('100 - 110');
+      cy.checkAxe();
+    });
+    it('has zero violations when the range slider is decreased', function () {
+      cy.realPress('Tab');
+      cy.get('input#cy-range-single').should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 10);
+      cy.get('output.euiRangeTooltip__value').contains('100 - 100');
+      cy.checkAxe();
+    });
+  });
+});
+describe('Dual EuiRange', function () {
+  var DualRange = function DualRange() {
+    var _useState3 = useState(['100', '150']),
+        _useState4 = _slicedToArray(_useState3, 2),
+        dualValue = _useState4[0],
+        setDualValue = _useState4[1];
+
+    var onDualChange = function onDualChange(value) {
+      setDualValue(value);
+    };
+
+    return ___EmotionJSX(EuiDualRange, {
+      id: "cy-range-dual",
+      min: 0,
+      max: 300,
+      step: 10,
+      value: dualValue,
+      onChange: onDualChange,
+      showLabels: true,
+      "aria-label": "An example of EuiDualRange"
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(DualRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the range sliders are adjusted', function () {
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 3);
+      cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuenow').should('eq', '70');
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').last().should('have.focus');
+      cy.repeatRealPress('ArrowRight', 3);
+      cy.get('div[role="slider"]').last().invoke('attr', 'aria-valuenow').should('eq', '180');
+      cy.checkAxe();
+    });
+  });
+});
+describe('Highlight Area EuiRange', function () {
+  var DraggableRange = function DraggableRange() {
+    var _useState5 = useState(['40', '60']),
+        _useState6 = _slicedToArray(_useState5, 2),
+        dualValue = _useState6[0],
+        setDualValue = _useState6[1];
+
+    return ___EmotionJSX(EuiDualRange, {
+      id: "cy-range-draggable",
+      min: 0,
+      max: 100,
+      step: 1,
+      value: dualValue,
+      onChange: setDualValue,
+      showLabels: true,
+      "aria-label": "An example of EuiDualRange with isDraggable='true'",
+      isDraggable: true
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(DraggableRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the highlight area is adjusted using arrow keys', function () {
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 3);
+      cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuetext').should('eq', '37, 57');
+      cy.checkAxe();
+    });
+  });
+  describe('Drag and drop accessibility check', function () {
+    it('has zero violations when the higlight area is dragged using a mouse', function () {
+      cy.get('.euiRangeDraggable__inner').realMouseDown({
+        position: 'center'
+      }).realMouseMove(100, 0, {}).realMouseUp();
+      cy.checkAxe();
+    });
+  });
+  describe('EuiRange in a dropdown', function () {
+    var InputWithRange = function InputWithRange() {
+      var _useState7 = useState('20'),
+          _useState8 = _slicedToArray(_useState7, 2),
+          value = _useState8[0],
+          setValue = _useState8[1];
+
+      return ___EmotionJSX(EuiRange, {
+        id: "cy-range-in-dropdown",
+        min: 0,
+        max: 100,
+        value: value,
+        onChange: function onChange(e) {
+          return setValue(e.currentTarget.value);
+        },
+        showInput: "inputWithPopover",
+        showLabels: true,
+        "aria-label": "An example of EuiRange with showInput prop"
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(1024, 768); // medium breakpoint
+
+      cy.realMount(___EmotionJSX(InputWithRange, null));
+      cy.get('input#cy-range-in-dropdown').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations on first render', function () {
+        cy.checkAxe();
+      });
+    });
+    describe('Keyboard accessibility check', function () {
+      it('updates the range value using arrow keys with input[type="number"]', function () {
+        cy.realPress('Tab');
+        cy.get('input#cy-range-in-dropdown').should('have.focus');
+        cy.repeatRealPress('ArrowUp', 10);
+        cy.get('input[type="range"]').first().invoke('attr', 'value').should('eq', '30');
+        cy.checkAxe();
+      });
+    });
+  });
+});

package/optimize/es/components/form/super_select/super_select.js

@@ -292,7 +292,7 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         id: this.describedById
       }, ___EmotionJSX(EuiI18n, {
         token: "euiSuperSelect.screenReaderAnnouncement",
-        default: "You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close."
+        default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
       }))), ___EmotionJSX("div", {
         "aria-labelledby": this.labelledById,
         "aria-describedby": this.describedById,

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/icon/assets/alert.js

@@ -27,8 +27,9 @@ var EuiIconAlert = function EuiIconAlert(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+    d: "M8.55 9.502l.35-3.507a.905.905 0 10-1.8 0l.35 3.507a.552.552 0 001.1 0zM9 12a1 1 0 11-2 0 1 1 0 012 0z"
+  }), ___EmotionJSX("path", {
+    d: "M8.864 1.496a1 1 0 00-1.728 0l-7 12A1 1 0 001 15h14a1 1 0 00.864-1.504l-7-12zM1 14L8 2l7 12H1z"
   }));
 };
 

package/optimize/es/components/icon/assets/error.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconError = function EuiIconError(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M10 1a1 1 0 01.707.293l4 4A1 1 0 0115 6v5a1 1 0 01-.293.707l-4 4A1 1 0 0110 16H5a1 1 0 01-.707-.293l-4-4A1 1 0 010 11V6a1 1 0 01.293-.707l4-4A1 1 0 015 1h5zM4.146 5.146a.5.5 0 01.708 0L7.5 7.793l2.646-2.647a.5.5 0 01.708.708L8.207 8.5l2.647 2.646a.5.5 0 01-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 01-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 010-.708z"
+  }));
+};
+
+export var icon = EuiIconError;

package/optimize/es/components/icon/icon_map.js

@@ -126,6 +126,7 @@ export var typeToPathMap = {
   emsApp: 'app_ems',
   eql: 'eql',
   eraser: 'eraser',
+  error: 'error',
   exit: 'exit',
   expand: 'expand',
   expandMini: 'expandMini',

package/optimize/es/components/index.js

@@ -73,6 +73,7 @@ export * from './observer/resize_observer';
 export * from './search_bar';
 export * from './selectable';
 export * from './side_nav';
+export * from './skeleton';
 export * from './spacer';
 export * from './stat';
 export * from './steps';

package/optimize/es/components/loading/loading_content.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["lines", "className", "aria-label"];
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,35 +6,16 @@ var _excluded = ["lines", "className", "aria-label"];
  * Side Public License, v 1.
  */
 import React from 'react';
-import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { useLoadingAriaLabel } from './_loading_strings';
-import { euiLoadingContentStyles } from './loading_content.styles';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiLoadingContent = function EuiLoadingContent(_ref) {
-  var _ref$lines = _ref.lines,
-      lines = _ref$lines === void 0 ? 3 : _ref$lines,
-      className = _ref.className,
-      ariaLabel = _ref['aria-label'],
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var euiTheme = useEuiTheme();
-  var styles = euiLoadingContentStyles(euiTheme);
-  var lineCssStyles = [styles.euiLoadingContent__singleLine];
-  var defaultLabel = useLoadingAriaLabel();
-  var classes = classNames('euiLoadingContent', className);
-  var lineElements = [];
+import { EuiSkeletonText } from '../skeleton';
+/**
+ * @deprecated Use `EuiSkeletonTextProps` instead
+ */
 
-  for (var i = 0; i < lines; i++) {
-    lineElements.push(___EmotionJSX("span", {
-      key: i,
-      css: lineCssStyles
-    }));
-  }
+import { jsx as ___EmotionJSX } from "@emotion/react";
 
-  return ___EmotionJSX("span", _extends({
-    className: classes,
-    role: "progressbar",
-    "aria-label": ariaLabel || defaultLabel
-  }, rest), lineElements);
+/**
+ * @deprecated Use `EuiSkeletonText` instead
+ */
+export var EuiLoadingContent = function EuiLoadingContent(props) {
+  return ___EmotionJSX(EuiSkeletonText, props);
 };

package/optimize/es/components/popover/popover.js

@@ -463,7 +463,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
             id: this.descriptionId
           }, ownFocus && ___EmotionJSX(EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
-            default: "You are in a dialog. To close this dialog, hit escape."
+            default: "You are in a dialog. Press Escape, or tap/click outside the dialog to close."
           }), popoverScreenReaderText));
         }
 

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

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/*
+ * 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 from 'react';
+import { EuiProgress } from './progress';
+import { EuiSpacer } from '../spacer';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ProgressCommonProps = {
+  color: 'success',
+  max: 100
+};
+
+var ProgressBars = function ProgressBars() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-1"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "xs",
+    value: 0
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-2"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "s",
+    value: 33
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-3"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "m",
+    value: 66
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-4"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    size: "l",
+    value: 100
+  }, ProgressCommonProps))), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-5"
+  }, ___EmotionJSX(EuiProgress, _extends({
+    valueText: true,
+    label: "Basic percentage",
+    size: "l",
+    value: 100
+  }, ProgressCommonProps))), ___EmotionJSX(EuiSpacer, {
+    size: "m"
+  }), ___EmotionJSX("div", {
+    "data-test-subj": "cy-progress-infinite"
+  }, ___EmotionJSX(EuiProgress, {
+    valueText: true,
+    size: "l",
+    color: "success"
+  })));
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount(___EmotionJSX(ProgressBars, null));
+  cy.get('div[data-test-subj="cy-progress-1"]').should('exist');
+});
+describe('EuiProgress', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('displays correct progress values and labels', function () {
+      cy.get('div[data-test-subj="cy-progress-1"] span.euiProgress__valueText').contains('0');
+      cy.get('div[data-test-subj="cy-progress-2"] span.euiProgress__valueText').contains('33');
+      cy.get('div[data-test-subj="cy-progress-3"] span.euiProgress__valueText').contains('66');
+      cy.get('div[data-test-subj="cy-progress-4"] span.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__label').contains('Basic percentage');
+      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-infinite"] span.euiProgress__valueText').should('not.exist');
+    });
+  });
+});