@elastic/eui 74.0.1 → 75.0.0

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/collapsible_nav/collapsible_nav.js

@@ -27,7 +27,7 @@ var _flyout = require("../flyout");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "role", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
+var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -56,8 +56,6 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
       size = _ref$size === void 0 ? 320 : _ref$size,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? null : _ref$role,
       _ref$ownFocus = _ref.ownFocus,
       ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
       _ref$outsideClickClos = _ref.outsideClickCloses,
@@ -106,7 +104,6 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,

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 () {

package/optimize/lib/components/flyout/flyout.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TYPES = exports.SIZES = exports.SIDES = exports.PADDING_SIZES = exports.EuiFlyout = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -37,11 +39,13 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _portal = require("../portal");
 
+var _accessibility = require("../accessibility");
+
 var _flyout = require("./flyout.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonAriaLabel", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "role", "pushMinBreakpoint", "focusTrapProps"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
 
 function _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); }
 
@@ -76,7 +80,6 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$hideCloseButton = _ref.hideCloseButton,
       hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
       closeButtonProps = _ref.closeButtonProps,
-      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       _ref$closeButtonPosit = _ref.closeButtonPosition,
       closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
       onClose = _ref.onClose,
@@ -95,12 +98,14 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'overlay' : _ref$type,
       outsideClickCloses = _ref.outsideClickCloses,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'dialog' : _ref$role,
       _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
       pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-      focusTrapProps = _ref.focusTrapProps,
+      _ref$focusTrapProps = _ref.focusTrapProps,
+      _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
+      _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
+      includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
   var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
@@ -191,7 +196,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
-        "aria-label": closeButtonAriaLabel || closeAriaLabel,
+        "aria-label": closeAriaLabel,
         "data-test-subj": "euiFlyoutCloseButton"
       }, closeButtonProps, {
         className: closeButtonClasses,
@@ -204,24 +209,60 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }));
     });
   }
+  /*
+   * If not disabled, automatically add fixed EuiHeaders as shards
+   * to EuiFlyout focus traps, to prevent focus fighting
+   */
 
-  var hasOverlayMask = ownFocus && !isPushed;
 
-  var onClickOutside = function onClickOutside(event) {
-    // Do not close the flyout for any external click
-    if (outsideClickCloses === false) return undefined;
+  var flyoutToggle = (0, _react.useRef)(document.activeElement);
 
-    if (hasOverlayMask) {
-      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      fixedHeaders = _useState4[0],
+      setFixedHeaders = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (includeFixedHeadersInFocusTrap) {
+      var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
+      setFixedHeaders(Array.from(fixedHeaderEls)); // Flyouts that are toggled from fixed headers do not have working
+      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+
+      fixedHeaderEls.forEach(function (header) {
+        if (header.contains(flyoutToggle.current)) {
+          resizeRef === null || resizeRef === void 0 ? void 0 : resizeRef.focus();
+        }
+      });
     } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
-    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+      // Clear existing headers if necessary, e.g. switching to `false`
+      setFixedHeaders(function (headers) {
+        return headers.length ? [] : headers;
+      });
+    }
+  }, [includeFixedHeadersInFocusTrap, resizeRef]);
 
+  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+    shards: [].concat((0, _toConsumableArray2.default)(fixedHeaders), (0, _toConsumableArray2.default)(_focusTrapProps.shards || []))
+  });
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
 
-    return undefined;
-  };
+
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = (0, _services.useGeneratedHtmlId)();
+  var screenReaderDescription = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: descriptionId
+  }, hasOverlayMask ? (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderModalDialog",
+    default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+  }) : (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderNonModalDialog",
+    default: "You are in a non-modal dialog. To close the dialog, press Escape."
+  }), ' ', fixedHeaders.length > 0 && (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderFixedHeaders",
+    default: "You can still continue tabbing through the page headers in addition to the dialog."
+  })));
   /*
    * Trap focus even when `ownFocus={false}`, otherwise closing
    * the flyout won't return focus to the originating button.
@@ -235,6 +276,21 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    * (both mousedown and mouseup) the overlay mask.
    */
 
+  var onClickOutside = function onClickOutside(event) {
+    // Do not close the flyout for any external click
+    if (outsideClickCloses === false) return undefined;
+
+    if (hasOverlayMask) {
+      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+      if (event.target === maskRef.current) return onClose(event);
+    } else {
+      // No overlay mask is present, so any outside clicks should close the flyout
+      if (outsideClickCloses === true) return onClose(event);
+    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+
+
+    return undefined;
+  };
 
   var flyout = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     disabled: isPushed,
@@ -243,12 +299,14 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({
     css: cssStyles
   }, rest, {
-    role: role,
+    role: "dialog",
     className: classes,
-    tabIndex: -1,
+    tabIndex: 0,
+    "data-autofocus": true,
+    "aria-describedby": !isPushed ? descriptionId : undefined,
     style: newStyle,
     ref: setRef
-  }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+  }), !isPushed && screenReaderDescription, closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
 
   var mergedMaskProps = _objectSpread(_objectSpread({}, maskProps), {}, {
     maskRef: (0, _services.useCombinedRefs)([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef])
@@ -263,7 +321,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     flyout = (0, _react2.jsx)(_portal.EuiPortal, null, flyout);
   }
 
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_services.EuiWindowEvent, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_services.EuiWindowEvent, {
     event: "keydown",
     handler: onKeyDown
   }), flyout);