@elastic/eui 74.0.0 → 74.1.0

package/optimize/es/components/skeleton/skeleton_rectangle.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+
+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; }
+
+/*
+ * 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.
+ */
+import React from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { logicalStyles } from '../../global_styling';
+import { EuiSkeletonLoading } from './skeleton_loading';
+import { euiSkeletonRectangleStyles } from './skeleton_rectangle.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var RADIUS = ['s', 'm', 'none'];
+export var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+      _ref$borderRadius = _ref.borderRadius,
+      borderRadius = _ref$borderRadius === void 0 ? 's' : _ref$borderRadius,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '24px' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '24px' : _ref$height,
+      style = _ref.style,
+      className = _ref.className,
+      contentAriaLabel = _ref.contentAriaLabel,
+      ariaWrapperProps = _ref.ariaWrapperProps,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var euiTheme = useEuiTheme();
+  var styles = euiSkeletonRectangleStyles(euiTheme);
+  var cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("div", _extends({
+      className: classNames('euiSkeletonRectangle', className),
+      css: cssStyles,
+      style: logicalStyles(_objectSpread(_objectSpread({}, style), {}, {
+        width: width,
+        height: height
+      }))
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

package/optimize/es/components/skeleton/skeleton_rectangle.styles.js

@@ -0,0 +1,34 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { euiSkeletonGradientAnimation } from './utils';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ubzie1-none",
+  styles: "border-radius:0;label:none;"
+} : {
+  name: "ubzie1-none",
+  styles: "border-radius:0;label:none;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiSkeletonRectangleStyles = function euiSkeletonRectangleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonRectangle: /*#__PURE__*/css("display:block;", euiSkeletonGradientAnimation(euiThemeContext, {
+      slideSize: '-75%',
+      gradientSize: '350%'
+    }), ";;label:euiSkeletonRectangle;"),
+    // Border radius
+    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    none: _ref
+  };
+};

package/optimize/es/components/skeleton/skeleton_text.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "ariaWrapperProps", "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.
+ */
+import React from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { EuiSkeletonLoading } from './skeleton_loading';
+import { euiSkeletonTextStyles } from './skeleton_text.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export var EuiSkeletonText = function EuiSkeletonText(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+      _ref$lines = _ref.lines,
+      lines = _ref$lines === void 0 ? 3 : _ref$lines,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      className = _ref.className,
+      contentAriaLabel = _ref.contentAriaLabel,
+      ariaWrapperProps = _ref.ariaWrapperProps,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var euiTheme = useEuiTheme();
+  var styles = euiSkeletonTextStyles(euiTheme);
+  var lineCssStyles = [styles.euiSkeletonText, styles[size]];
+  var lineElements = [];
+
+  for (var i = 0; i < lines; i++) {
+    lineElements.push(___EmotionJSX("span", {
+      key: i,
+      css: lineCssStyles
+    }));
+  }
+
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("span", _extends({
+      className: classNames('euiSkeletonText', className)
+    }, rest), lineElements),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

package/optimize/es/components/skeleton/skeleton_text.styles.js

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { euiFontSize, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiSkeletonGradientAnimation } from './utils';
+
+var calculateLineSize = function calculateLineSize(euiThemeContext, size) {
+  var _euiFontSize = euiFontSize(euiThemeContext, 'm', {
+    customScale: size
+  }),
+      fontSize = _euiFontSize.fontSize,
+      lineHeight = _euiFontSize.lineHeight;
+
+  return "\n    ".concat(logicalCSS('height', fontSize), "\n    ").concat(logicalCSS('margin-top', mathWithUnits([lineHeight, fontSize], function (x, y) {
+    return x - y;
+  })), "\n  ");
+};
+
+export var euiSkeletonTextStyles = function euiSkeletonTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonText: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " border-radius:", euiTheme.border.radius.small, ";", euiSkeletonGradientAnimation(euiThemeContext), "transform:translateY(-25%);&:last-child:not(:only-child){", logicalCSS('width', '75%'), ";};label:euiSkeletonText;"),
+    // Sizes
+    m: /*#__PURE__*/css(calculateLineSize(euiThemeContext, 'm'), ";;label:m;"),
+    s: /*#__PURE__*/css(calculateLineSize(euiThemeContext, 's'), ";;label:s;"),
+    xs: /*#__PURE__*/css(calculateLineSize(euiThemeContext, 'xs'), ";;label:xs;"),
+    relative: /*#__PURE__*/css(logicalCSS('height', '1em'), " ", logicalCSS('margin-top', '0.5em'), ";;label:relative;")
+  };
+};

package/optimize/es/components/skeleton/skeleton_title.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "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.
+ */
+import React from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { EuiSkeletonLoading } from './skeleton_loading';
+import { euiSkeletonTitleStyles } from './skeleton_title.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      className = _ref.className,
+      contentAriaLabel = _ref.contentAriaLabel,
+      ariaWrapperProps = _ref.ariaWrapperProps,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var euiTheme = useEuiTheme();
+  var styles = euiSkeletonTitleStyles(euiTheme);
+  var cssStyles = [styles.euiSkeletonTitle, styles[size]];
+  return ___EmotionJSX(EuiSkeletonLoading, _extends({
+    isLoading: isLoading,
+    loadingContent: ___EmotionJSX("span", _extends({
+      className: classNames('euiSkeletonTitle', className),
+      css: cssStyles
+    }, rest)),
+    loadedContent: children || '',
+    contentAriaLabel: contentAriaLabel
+  }, ariaWrapperProps));
+};

package/optimize/es/components/skeleton/skeleton_title.styles.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { euiTitle } from '../title/title.styles';
+import { euiSkeletonGradientAnimation } from './utils';
+export var euiSkeletonTitleStyles = function euiSkeletonTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSkeletonTitle: /*#__PURE__*/css("display:block;", logicalCSS('width', '45%'), ";border-radius:", euiTheme.border.radius.medium, ";", euiSkeletonGradientAnimation(euiThemeContext), ";;label:euiSkeletonTitle;"),
+    // Sizes
+    l: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'l').lineHeight), ";;label:l;"),
+    m: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'm').lineHeight), ";;label:m;"),
+    s: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 's').lineHeight), ";;label:s;"),
+    xs: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'xs').lineHeight), ";;label:xs;"),
+    xxs: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'xxs').lineHeight), ";;label:xxs;"),
+    xxxs: /*#__PURE__*/css(logicalCSS('height', euiTitle(euiThemeContext, 'xxxs').lineHeight), ";border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
+  };
+};

package/optimize/es/components/skeleton/utils.js

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { shade, tint } from '../../services';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { euiAnimSlideX } from '../../global_styling/utility/animations';
+export var euiSkeletonGradientAnimation = function euiSkeletonGradientAnimation(_ref) {
+  var euiTheme = _ref.euiTheme,
+      colorMode = _ref.colorMode;
+
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$slideSize = _ref2.slideSize,
+      slideSize = _ref2$slideSize === void 0 ? '-53%' : _ref2$slideSize,
+      _ref2$gradientSize = _ref2.gradientSize,
+      gradientSize = _ref2$gradientSize === void 0 ? '220%' : _ref2$gradientSize;
+
+  var gradientStartStop = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.12) : tint(euiTheme.colors.lightShade, 0.65);
+  var gradientMiddle = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.24) : tint(euiTheme.colors.lightShade, 0.8);
+  return /*#__PURE__*/css("background-color:", gradientStartStop, ";", euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", logicalCSS('width', gradientSize), " ", logicalCSS('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", euiAnimSlideX(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
+};

package/optimize/es/global_styling/functions/logicals.js

@@ -118,7 +118,8 @@ export var logicalStyles = function logicalStyles(styleObject) {
  * @returns `string` Returns the logical CSS properties for height and width
  */
 
-export var logicalSizeCSS = function logicalSizeCSS(width, height) {
+export var logicalSizeCSS = function logicalSizeCSS(width) {
+  var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : width;
   return "\n    ".concat(logicals.width, ": ").concat(width, ";\n    ").concat(logicals.height, ": ").concat(height, ";\n  ");
 };
 /**

package/optimize/es/global_styling/utility/animations.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,4 +13,7 @@ import { keyframes } from '@emotion/react';
 export var euiAnimFadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
 export var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
   return 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);
+};
+export var euiAnimSlideX = function euiAnimSlideX(size) {
+  return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
 };

package/optimize/lib/components/basic_table/table.a11y.js

@@ -4,7 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _react = _interopRequireDefault(require("react"));
 
-var _in_memory_table = require("./in_memory_table");
+var _faker = require("@faker-js/faker");
+
+var _index = require("./index");
 
 var _health = require("../health");
 
@@ -12,8 +14,6 @@ var _link = require("../link");
 
 var _services = require("../../services");
 
-var _data_store = require("../../../src-docs/src/views/tables/data_store");
-
 var _react2 = require("@emotion/react");
 
 /*
@@ -24,116 +24,158 @@ var _react2 = require("@emotion/react");
  * Side Public License, v 1.
  */
 /// <reference types="../../../cypress/support"/>
-var store = (0, _data_store.createDataStore)();
+var users = [];
 
-var InMemoryTable = function InMemoryTable() {
-  var columns = [{
-    field: 'firstName',
-    name: 'First Name',
-    sortable: true,
-    truncateText: true
-  }, {
-    field: 'lastName',
-    name: 'Last Name',
-    truncateText: true
-  }, {
-    field: 'github',
-    name: 'Github',
-    render: function render(username) {
-      return (0, _react2.jsx)(_link.EuiLink, {
-        href: "https://github.com/".concat(username),
-        target: "_blank"
-      }, username);
+for (var i = 0; i < 20; i++) {
+  users.push({
+    id: i + 1,
+    firstName: _faker.faker.name.firstName(),
+    lastName: _faker.faker.name.lastName(),
+    github: _faker.faker.internet.userName(),
+    dateOfBirth: _faker.faker.date.past(),
+    online: _faker.faker.datatype.boolean(),
+    location: {
+      city: _faker.faker.address.city(),
+      country: _faker.faker.address.country()
     }
-  }, {
-    field: 'dateOfBirth',
-    name: 'Date of Birth',
-    dataType: 'date',
-    render: function render(date) {
-      return (0, _services.formatDate)(date, 'dobLong');
-    },
-    sortable: true
-  }, {
-    field: 'nationality',
-    name: 'Nationality',
-    render: function render(countryCode) {
-      var country = store.getCountry(countryCode);
-      return "".concat(country.flag, " ").concat(country.name);
-    }
-  }, {
-    field: 'online',
-    name: 'Online',
-    dataType: 'boolean',
-    render: function render(online) {
-      var color = online ? 'success' : 'danger';
-      var label = online ? 'Online' : 'Offline';
-      return (0, _react2.jsx)(_health.EuiHealth, {
-        color: color
-      }, label);
-    },
-    sortable: true
-  }];
-  var sorting = {
-    sort: {
-      field: 'dateOfBirth',
-      direction: 'desc'
-    }
-  };
-  return (0, _react2.jsx)(_in_memory_table.EuiInMemoryTable, {
-    "data-test-subj": "cy-in-memory-table",
-    tableCaption: "Demo of EuiInMemoryTable",
-    items: store.users,
-    columns: columns,
-    pagination: true,
-    sorting: sorting
   });
-};
+}
 
-beforeEach(function () {
-  cy.viewport(1024, 768); // medium breakpoint
-
-  cy.realMount((0, _react2.jsx)(InMemoryTable, null));
-  cy.get('div[data-test-subj="cy-in-memory-table"]').should('exist');
-});
+var columns = [{
+  field: 'firstName',
+  name: 'First Name',
+  sortable: true,
+  truncateText: true,
+  mobileOptions: {
+    render: function render(user) {
+      return (0, _react2.jsx)("span", null, user.firstName, " ", user.lastName);
+    },
+    header: false,
+    truncateText: false,
+    enlarge: true,
+    width: '100%'
+  }
+}, {
+  field: 'lastName',
+  name: 'Last Name',
+  truncateText: true,
+  mobileOptions: {
+    show: false
+  }
+}, {
+  field: 'github',
+  name: 'Github',
+  render: function render(username) {
+    return (0, _react2.jsx)(_link.EuiLink, {
+      href: "#",
+      target: "_blank"
+    }, username);
+  }
+}, {
+  field: 'dateOfBirth',
+  name: 'Date of Birth',
+  dataType: 'date',
+  render: function render(dateOfBirth) {
+    return (0, _services.formatDate)(dateOfBirth, 'dobLong');
+  },
+  sortable: true
+}, {
+  field: 'location',
+  name: 'Location',
+  truncateText: true,
+  textOnly: true,
+  render: function render(location) {
+    return "".concat(location.city, ", ").concat(location.country);
+  }
+}, {
+  field: 'online',
+  name: 'Online',
+  dataType: 'boolean',
+  render: function render(online) {
+    var color = online ? 'success' : 'danger';
+    var label = online ? 'Online' : 'Offline';
+    return (0, _react2.jsx)(_health.EuiHealth, {
+      color: color
+    }, label);
+  },
+  sortable: true,
+  mobileOptions: {
+    show: false
+  }
+}];
 describe('EuiInMemoryTable', function () {
+  var mountTable = function mountTable() {
+    cy.realMount((0, _react2.jsx)(_index.EuiInMemoryTable, {
+      "data-test-subj": "cy-in-memory-table",
+      tableCaption: "Demo of EuiInMemoryTable",
+      items: users,
+      columns: columns,
+      pagination: true,
+      sorting: {
+        sort: {
+          field: 'dateOfBirth',
+          direction: 'desc'
+        }
+      }
+    }));
+    cy.get('div[data-test-subj="cy-in-memory-table"]').should('exist');
+  };
+
   describe('Automated accessibility check', function () {
-    it('has zero violations on first render', function () {
-      cy.checkAxe();
-    });
-    it('has zero violations on pagination click', function () {
-      cy.get('a[data-test-subj="pagination-button-1"]').realClick();
-      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
-      cy.checkAxe();
-    });
-    it('has zero violations after number of rows is increased', function () {
-      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').realClick();
-      cy.get('div[data-popover-open="true"]').should('exist');
-      cy.get('button[data-test-subj="tablePagination-25-rows"]').realClick();
-      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
-      cy.checkAxe();
-    });
-    it('has zero violations after sorting on a column', function () {
-      cy.realPress('Tab');
-      cy.get('button[data-test-subj="tableHeaderSortButton"]').first().should('have.focus');
-      cy.realPress('Enter');
-      cy.get('tbody tr.euiTableRow span.euiTableCellContent__text').first().contains('Another very long first name which will wrap or be truncated');
-    });
-    it('has zero violations when number of rows is increased by keyboard', function () {
-      cy.repeatRealPress('Tab', 14);
-      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').should('have.focus').realPress('Space');
-      cy.get('div[data-popover-open="true"]').should('exist');
-      cy.get('div[data-popover-open="true"]').should('have.focus');
-      cy.repeatRealPress('Tab'); // Switched to Tab from ArrowDown because of flaky test runs
+    describe('desktop', function () {
+      beforeEach(function () {
+        cy.viewport(1024, 768); // medium breakpoint
 
-      cy.get('button[data-test-subj="tablePagination-25-rows"]').realPress('Space');
-      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
-      cy.checkAxe();
+        mountTable();
+      });
+      it('has zero violations on first render', function () {
+        cy.checkAxe();
+      });
+      it('has zero violations on pagination click', function () {
+        cy.get('a[data-test-subj="pagination-button-1"]').realClick();
+        cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+        cy.checkAxe();
+      });
+      it('has zero violations after number of rows is increased', function () {
+        cy.get('button[data-test-subj="tablePaginationPopoverButton"]').realClick();
+        cy.get('div[data-popover-open="true"]').should('exist');
+        cy.get('button[data-test-subj="tablePagination-25-rows"]').realClick();
+        cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+        cy.checkAxe();
+      });
+      it('has zero violations after sorting on a column', function () {
+        cy.realPress('Tab');
+        cy.get('button[data-test-subj="tableHeaderSortButton"]').first().should('have.focus');
+        cy.realPress('Enter');
+        cy.checkAxe();
+      });
+      it('has zero violations when number of rows is increased by keyboard', function () {
+        cy.repeatRealPress('Tab', 14);
+        cy.get('button[data-test-subj="tablePaginationPopoverButton"]').should('have.focus').realPress('Space');
+        cy.get('div[data-popover-open="true"]').should('exist');
+        cy.get('div[data-popover-open="true"]').should('have.focus');
+        cy.repeatRealPress('Tab'); // Switched to Tab from ArrowDown because of flaky test runs
+
+        cy.get('button[data-test-subj="tablePagination-25-rows"]').realPress('Space');
+        cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+        cy.checkAxe();
+      });
+      it('has zero violations when pagination is pressed', function () {
+        cy.repeatRealPress('Tab', 15);
+        cy.get('a[data-test-subj="pagination-button-1"]').should('have.focus').realPress('Enter');
+        cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+        cy.checkAxe();
+      });
     });
-    it('has zero violations when pagination is pressed', function () {
-      cy.repeatRealPress('Tab', 15);
-      cy.get('a[data-test-subj="pagination-button-1"]').should('have.focus').realPress('Enter');
-      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
-      cy.checkAxe();
+    describe('mobile', function () {
+      beforeEach(function () {
+        cy.viewport(375, 667); // small breakpoint
+
+        mountTable();
+      });
+      it('has zero violations on render', function () {
+        cy.checkAxe();
+      });
     });
   });
 });

package/optimize/lib/components/card/card.js

@@ -105,7 +105,7 @@ var EuiCard = function EuiCard(_ref) {
   var link = null;
 
   var outerOnClick = function outerOnClick(e) {
-    if (link && link !== e.target) {
+    if (link && link !== e.target && !link.contains(e.target)) {
       link.click();
     }
   };

package/optimize/lib/components/datagrid/data_grid.a11y.js

@@ -237,7 +237,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
-      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
+      cy.get('div[data-test-subj="dataGridColumnSortingPopover"] button').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {