From 3a165855d5a3dd94fc556c869278ff6903c2782d Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 22 Mar 2024 11:06:11 -0700
Subject: [PATCH] Upgrade EUI to v93.4.0 (#178890)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`v93.3.0`⏩ `v93.4.0`

---

## [`v93.4.0`](https://github.com/elastic/eui/releases/v93.4.0)

- Added the following properties to `EuiButtonGroup`'s `options`
configs: `toolTipContent`, `toolTipProps`, and `title`. These new
properties allow wrapping buttons in `EuiToolTips`, and additionally
customizing or disabling the native browser `title` tooltip.
([#7461](https://github.com/elastic/eui/pull/7461))
- Enhanced `EuiResizeObserver` and `useResizeObserver`'s performance to
not trigger page reflows on resize event
([#7575](https://github.com/elastic/eui/pull/7575))
- Updated `EuiSuperUpdateButton` to support custom button text via an
optional `children` prop
([#7576](https://github.com/elastic/eui/pull/7576))

**Bug fixes**

- Fixed `EuiFlyout` to not repeatedly remove/add a body class on resize
([#7462](https://github.com/elastic/eui/pull/7462))
- Fixed `EuiToast` title text to wrap instead of overflowing out of the
container ([#7568](https://github.com/elastic/eui/pull/7568))
- Fixed a visual bug with `EuiHeaderBreadcrumbs` with popovers
([#7580](https://github.com/elastic/eui/pull/7580))

**Deprecations**

- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of
a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed`
([#7570](https://github.com/elastic/eui/pull/7570))
- Deprecated all charts theme exports in favor of `@elastic/charts`
exports: ([#7572](https://github.com/elastic/eui/pull/7572))
- Deprecated `EUI_CHARTS_THEME_<DARK|LIGHT>` in favor of
`<DARK|LIGHT>_THEME` from `@elastic/charts`.
([#7572](https://github.com/elastic/eui/pull/7572))
- Deprecated `EUI_SPARKLINE_THEME_PARTIAL` in favor of
`useSparklineOverrides` theme from the kibana `charts` plugin `theme`
service.

**Accessibility**

- Updated `EuiModal` to set an `aria-modal` attribute and a default
`dialog` role ([#7564](https://github.com/elastic/eui/pull/7564))
- Updated `EuiConfirmModal` to set a default `alertdialog` role
([#7564](https://github.com/elastic/eui/pull/7564))
- Fixed `EuiModal` and `EuiConfirmModal` to properly trap
Safari+VoiceOver's virtual cursor
([#7564](https://github.com/elastic/eui/pull/7564))
---
 package.json                                       |  2 +-
 .../ui/header/__snapshots__/header.test.tsx.snap   |  2 +-
 .../__snapshots__/modal_service.test.tsx.snap      |  6 ++++++
 .../__snapshots__/list_header.test.tsx.snap        |  2 ++
 .../__snapshots__/edit_modal.test.tsx.snap         |  2 ++
 src/core/public/styles/_base.scss                  |  1 -
 src/dev/license_checker/config.ts                  |  2 +-
 .../charts/public/services/palettes/palettes.tsx   |  8 ++++----
 .../internal_dashboard_top_nav.tsx                 |  4 ++--
 .../apps/dashboard/group1/url_field_formatter.ts   |  1 +
 .../maps/public/classes/styles/color_palettes.ts   | 12 ++++++------
 .../scatterplot_matrix_vega_lite_spec.ts           |  6 +++---
 .../application/memory_usage/memory_item_colors.ts |  4 ++--
 .../lens_attributes/heatmap_attributes.ts          |  4 ++--
 .../inventory_view/lib/get_color_palette.ts        |  8 ++++----
 .../components/header_actions/header_actions.tsx   | 14 ++++++++++++--
 .../__snapshots__/index.test.tsx.snap              |  6 ++++++
 .../timelines/bulk_add_to_timeline.cy.ts           |  7 ++++++-
 .../cypress/screens/hosts/events.ts                |  6 ++++++
 .../cypress/tasks/alerts.ts                        |  5 +++--
 .../cypress/tasks/common/event_table.ts            | 10 +++++-----
 .../cypress/tasks/hosts/events.ts                  |  7 +++++++
 yarn.lock                                          |  8 ++++----
 23 files changed, 86 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index d6a952f436b47..aed319d891fd6 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.12.2",
     "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "93.3.0",
+    "@elastic/eui": "93.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
index 209e2f1d0c113..f0bae81571603 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
@@ -194,7 +194,7 @@ Array [
             >
               <span
                 aria-current="page"
-                class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+                class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-onlyChild-isTruncatedLast-euiTextColor-default"
                 data-test-subj="breadcrumb first last"
                 title="test"
               >
diff --git a/packages/core/overlays/core-overlays-browser-internal/src/modal/__snapshots__/modal_service.test.tsx.snap b/packages/core/overlays/core-overlays-browser-internal/src/modal/__snapshots__/modal_service.test.tsx.snap
index c93fae64cf361..ce53f3fbae63c 100644
--- a/packages/core/overlays/core-overlays-browser-internal/src/modal/__snapshots__/modal_service.test.tsx.snap
+++ b/packages/core/overlays/core-overlays-browser-internal/src/modal/__snapshots__/modal_service.test.tsx.snap
@@ -129,7 +129,9 @@ exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `
   data-eui="EuiFocusTrap"
 >
   <div
+    aria-modal="true"
     class="euiModal euiModal--confirmation emotion-euiModal-defaultMaxWidth-confirmation"
+    role="alertdialog"
     tabindex="0"
   >
     <button
@@ -388,7 +390,9 @@ exports[`ModalService openConfirm() renders a string confirm message 2`] = `
   data-eui="EuiFocusTrap"
 >
   <div
+    aria-modal="true"
     class="euiModal euiModal--confirmation emotion-euiModal-defaultMaxWidth-confirmation"
+    role="alertdialog"
     tabindex="0"
   >
     <button
@@ -1470,7 +1474,9 @@ exports[`ModalService openModal() renders a modal to the DOM 2`] = `
   data-eui="EuiFocusTrap"
 >
   <div
+    aria-modal="true"
     class="euiModal emotion-euiModal-defaultMaxWidth"
+    role="dialog"
     tabindex="0"
   >
     <button
diff --git a/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
index c83f098c6d090..121d3eb791ed8 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
@@ -234,8 +234,10 @@ Object {
         data-eui="EuiFocusTrap"
       >
         <div
+          aria-modal="true"
           class="euiModal emotion-euiModal-defaultMaxWidth"
           data-test-subj="EditModal"
+          role="dialog"
           tabindex="0"
         >
           <button
diff --git a/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/__snapshots__/edit_modal.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/__snapshots__/edit_modal.test.tsx.snap
index e98e27ffb6076..119d2f33d10be 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/__snapshots__/edit_modal.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/edit_modal/__snapshots__/edit_modal.test.tsx.snap
@@ -14,8 +14,10 @@ Object {
         data-eui="EuiFocusTrap"
       >
         <div
+          aria-modal="true"
           class="euiModal emotion-euiModal-defaultMaxWidth"
           data-test-subj="EditModal"
+          role="dialog"
           tabindex="0"
         >
           <button
diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss
index 22d461a8b4084..07dee5598edd3 100644
--- a/src/core/public/styles/_base.scss
+++ b/src/core/public/styles/_base.scss
@@ -1,6 +1,5 @@
 // Charts themes available app-wide
 @import '@elastic/charts/dist/theme';
-@import '@elastic/eui/src/themes/charts/theme';
 
 // We apply brute force focus states to anything not coming from Eui
 // which has focus states designed at the component level.
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index 3d4cb683a24f8..3a692ef7a5f7e 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -86,7 +86,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@93.3.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@93.4.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
diff --git a/src/plugins/charts/public/services/palettes/palettes.tsx b/src/plugins/charts/public/services/palettes/palettes.tsx
index 4df7e2bea16a9..62aefd4a9765a 100644
--- a/src/plugins/charts/public/services/palettes/palettes.tsx
+++ b/src/plugins/charts/public/services/palettes/palettes.tsx
@@ -12,8 +12,8 @@ import {
   euiPaletteColorBlind,
   euiPaletteCool,
   euiPaletteGray,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteWarm,
   euiPaletteForStatus,
   euiPaletteForTemperature,
@@ -281,11 +281,11 @@ export const buildPalettes: (
     },
     negative: {
       title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }),
-      ...buildGradient('negative', euiPaletteNegative),
+      ...buildGradient('negative', euiPaletteRed),
     },
     positive: {
       title: i18n.translate('charts.palettes.positiveLabel', { defaultMessage: 'Positive' }),
-      ...buildGradient('positive', euiPalettePositive),
+      ...buildGradient('positive', euiPaletteGreen),
     },
     cool: {
       title: i18n.translate('charts.palettes.coolLabel', { defaultMessage: 'Cool' }),
diff --git a/src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx b/src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
index f184c3c23eb3c..d3e0ac3459049 100644
--- a/src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
@@ -19,7 +19,7 @@ import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { TopNavMenuProps } from '@kbn/navigation-plugin/public';
 import { EuiHorizontalRule, EuiIcon, EuiToolTipProps } from '@elastic/eui';
-import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
+import type { EuiBreadcrumb } from '@elastic/eui';
 import { MountPoint } from '@kbn/core/public';
 import {
   getDashboardTitle,
@@ -40,7 +40,7 @@ import './_dashboard_top_nav.scss';
 import { DashboardRedirect } from '../dashboard_container/types';
 
 export interface InternalDashboardTopNavProps {
-  customLeadingBreadCrumbs?: EuiBreadcrumbProps[];
+  customLeadingBreadCrumbs?: EuiBreadcrumb[];
   embedSettings?: DashboardEmbedSettings;
   forceHideUnifiedSearch?: boolean;
   redirectTo: DashboardRedirect;
diff --git a/test/functional/apps/dashboard/group1/url_field_formatter.ts b/test/functional/apps/dashboard/group1/url_field_formatter.ts
index d2a4be0598a35..12863bcc17fc4 100644
--- a/test/functional/apps/dashboard/group1/url_field_formatter.ts
+++ b/test/functional/apps/dashboard/group1/url_field_formatter.ts
@@ -65,6 +65,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await dashboard.waitForRenderComplete();
       const fieldLink = await visChart.getFieldLinkInVisTable(`${fieldName}: Descending`);
       const fieldValue = await fieldLink.getVisibleText();
+      await fieldLink.moveMouseTo();
       await fieldLink.click();
       await retry.try(async () => {
         await checkUrl(fieldValue);
diff --git a/x-pack/plugins/maps/public/classes/styles/color_palettes.ts b/x-pack/plugins/maps/public/classes/styles/color_palettes.ts
index a4fd893ea8c90..232728cc72f00 100644
--- a/x-pack/plugins/maps/public/classes/styles/color_palettes.ts
+++ b/x-pack/plugins/maps/public/classes/styles/color_palettes.ts
@@ -12,8 +12,8 @@ import {
   euiPaletteForTemperature,
   euiPaletteCool,
   euiPaletteWarm,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteGray,
   euiPaletteColorBlind,
   EuiColorPalettePickerPaletteProps,
@@ -59,9 +59,9 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
   {
     value: 'Greens',
     getPalette: (steps: number) => {
-      return euiPalettePositive(steps);
+      return euiPaletteGreen(steps);
     },
-    palette: euiPalettePositive(8),
+    palette: euiPaletteGreen(8),
     type: 'gradient',
   },
   {
@@ -75,9 +75,9 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
   {
     value: 'Reds',
     getPalette: (steps: number) => {
-      return euiPaletteNegative(steps);
+      return euiPaletteRed(steps);
     },
-    palette: euiPaletteNegative(8),
+    palette: euiPaletteRed(8),
     type: 'gradient',
   },
   {
diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
index 3b01eb7ed5366..96889679ed155 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
@@ -11,7 +11,7 @@ import type { TopLevelSpec } from 'vega-lite/build/vega-lite';
 
 import type { euiLightVars as euiThemeLight } from '@kbn/ui-theme';
 
-import { euiPaletteColorBlind, euiPaletteNegative, euiPalettePositive } from '@elastic/eui';
+import { euiPaletteColorBlind, euiPaletteRed, euiPaletteGreen } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
@@ -25,11 +25,11 @@ export const USER_SELECTION = 'user_selection';
 export const SINGLE_POINT_CLICK = 'single_point_click';
 
 export const COLOR_BLUR = '#bbb';
-export const COLOR_OUTLIER = euiPaletteNegative(2)[1];
+export const COLOR_OUTLIER = euiPaletteRed(2)[1];
 export const COLOR_SELECTION = euiPaletteColorBlind()[2];
 export const COLOR_RANGE_OUTLIER = [euiPaletteColorBlind()[1], euiPaletteColorBlind()[2]];
 export const COLOR_RANGE_NOMINAL = euiPaletteColorBlind({ rotations: 2 });
-export const COLOR_RANGE_QUANTITATIVE = euiPalettePositive(5);
+export const COLOR_RANGE_QUANTITATIVE = euiPaletteGreen(5);
 const CUSTOM_VIS_FIELDS_PATH = 'fields';
 
 export const getColorSpec = (
diff --git a/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts b/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts
index ee6baaf33f740..05be88f45ed11 100644
--- a/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts
+++ b/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts
@@ -9,7 +9,7 @@ import {
   euiPaletteComplementary,
   euiPaletteForTemperature,
   euiPaletteGray,
-  euiPalettePositive,
+  euiPaletteGreen,
   euiPaletteWarm,
 } from '@elastic/eui';
 import type { MlSavedObjectType } from '../../../common/types/saved_objects';
@@ -21,7 +21,7 @@ export function getMemoryItemColor(typeIn: MemoryItem) {
     case 'anomaly-detector':
       return euiPaletteWarm(5)[1];
     case 'data-frame-analytics':
-      return euiPalettePositive(5)[2];
+      return euiPaletteGreen(5)[2];
     case 'trained-model':
       return euiPaletteForTemperature(5)[1];
     case 'estimated-available-memory':
diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/heatmap_attributes.ts b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/heatmap_attributes.ts
index d62bd8684b48c..8835d02c3317f 100644
--- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/heatmap_attributes.ts
+++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/heatmap_attributes.ts
@@ -7,7 +7,7 @@
 
 import { FormulaPublicApi, HeatmapVisualizationState } from '@kbn/lens-plugin/public';
 
-import { euiPaletteNegative } from '@elastic/eui';
+import { euiPaletteRed } from '@elastic/eui';
 import { ColorStop } from '@kbn/coloring';
 import { LayerConfig } from '../lens_attributes';
 import { SingleMetricLensAttributes } from './single_metric_attributes';
@@ -52,7 +52,7 @@ export class HeatMapLensAttributes extends SingleMetricLensAttributes {
   }
 
   getHeatmapState() {
-    const negativePalette = euiPaletteNegative(5);
+    const negativePalette = euiPaletteRed(5);
     const layerConfig = this.layerConfigs[0];
 
     return {
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/lib/get_color_palette.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/lib/get_color_palette.ts
index 41b8ad2d2e2ed..2795e81c4d522 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/lib/get_color_palette.ts
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/lib/get_color_palette.ts
@@ -9,8 +9,8 @@ import {
   euiPaletteCool,
   euiPaletteForStatus,
   euiPaletteForTemperature,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteWarm,
 } from '@elastic/eui';
 import { InventoryColorPalette } from '../../../../lib/lib';
@@ -24,9 +24,9 @@ const createColorPalette = (name: InventoryColorPalette = 'cool', steps: number
     case 'warm':
       return euiPaletteWarm(steps);
     case 'positive':
-      return euiPalettePositive(steps);
+      return euiPaletteGreen(steps);
     case 'negative':
-      return euiPaletteNegative(steps);
+      return euiPaletteRed(steps);
     default:
       return euiPaletteCool(steps);
   }
diff --git a/x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx b/x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx
index cbac23af41205..4e9aa8452877c 100644
--- a/x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import type { EuiDataGridSorting } from '@elastic/eui';
+import type { EuiDataGridSorting, EuiDataGridSchemaDetector } from '@elastic/eui';
 import { EuiButtonIcon, EuiCheckbox, EuiToolTip, useDataGridColumnSorting } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
 
@@ -64,6 +64,10 @@ const ActionsContainer = styled.div`
   display: flex;
 `;
 
+// Defined statically to reduce rerenders
+const emptySchema = {};
+const emptySchemaDetectors: EuiDataGridSchemaDetector[] = [];
+
 const HeaderActionsComponent: React.FC<HeaderActionProps> = ({
   width,
   browserFields,
@@ -193,7 +197,13 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = ({
     [columnHeaders, dispatch, timelineId, defaultColumns]
   );
 
-  const ColumnSorting = useDataGridColumnSorting(myColumns, sortedColumns, {}, [], displayValues);
+  const ColumnSorting = useDataGridColumnSorting({
+    columns: myColumns,
+    sorting: sortedColumns,
+    schema: emptySchema,
+    schemaDetectors: emptySchemaDetectors,
+    displayValues,
+  });
 
   return (
     <ActionsContainer>
diff --git a/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
index 6a01cf77373bc..599249231c93a 100644
--- a/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
@@ -14,7 +14,9 @@ Object {
         data-eui="EuiFocusTrap"
       >
         <div
+          aria-modal="true"
           class="euiModal emotion-euiModal"
+          role="dialog"
           style="max-inline-size: 750px;"
           tabindex="0"
         >
@@ -224,7 +226,9 @@ Object {
         data-eui="EuiFocusTrap"
       >
         <div
+          aria-modal="true"
           class="euiModal emotion-euiModal"
+          role="dialog"
           style="max-inline-size: 750px;"
           tabindex="0"
         >
@@ -513,7 +517,9 @@ Object {
         data-eui="EuiFocusTrap"
       >
         <div
+          aria-modal="true"
           class="euiModal emotion-euiModal"
+          role="dialog"
           style="max-inline-size: 750px;"
           tabindex="0"
         >
diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/bulk_add_to_timeline.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/bulk_add_to_timeline.cy.ts
index 38b36ede1eee7..20b4c490541ae 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/bulk_add_to_timeline.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/bulk_add_to_timeline.cy.ts
@@ -17,7 +17,10 @@ import {
   selectFirstPageEvents,
 } from '../../../tasks/common/event_table';
 import { waitForAlertsToPopulate } from '../../../tasks/create_new_rule';
-import { waitsForEventsToBeLoaded } from '../../../tasks/hosts/events';
+import {
+  waitsForEventsToBeLoaded,
+  waitForEventsDataGridToBeLoaded,
+} from '../../../tasks/hosts/events';
 import { openEvents, openSessions } from '../../../tasks/hosts/main';
 import { login } from '../../../tasks/login';
 import { visitWithTimeRange } from '../../../tasks/navigation';
@@ -70,6 +73,7 @@ describe('Bulk Investigate in Timeline', { tags: ['@ess', '@serverless'] }, () =
       visitWithTimeRange(hostsUrl('allHosts'));
       openEvents();
       waitsForEventsToBeLoaded();
+      waitForEventsDataGridToBeLoaded();
     });
 
     it('Adding multiple events to the timeline should be successful', () => {
@@ -101,6 +105,7 @@ describe('Bulk Investigate in Timeline', { tags: ['@ess', '@serverless'] }, () =
       visitWithTimeRange(hostsUrl('allHosts'));
       openSessions();
       waitsForEventsToBeLoaded();
+      waitForEventsDataGridToBeLoaded();
     });
 
     it('Adding multiple events to the timeline should be successful', () => {
diff --git a/x-pack/test/security_solution_cypress/cypress/screens/hosts/events.ts b/x-pack/test/security_solution_cypress/cypress/screens/hosts/events.ts
index 5e516a54fd3b6..39096ebe2304e 100644
--- a/x-pack/test/security_solution_cypress/cypress/screens/hosts/events.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/hosts/events.ts
@@ -30,3 +30,9 @@ export const SERVER_SIDE_EVENT_COUNT =
 
 export const EVENT_VIEWER_CHECKBOX =
   '[data-test-subj="dataGridHeaderCell-checkbox-control-column"]';
+
+export const SELECT_ALL_EVENTS_CHECKBOX = '[data-test-subj="select-all-events"]';
+
+export const EVENTS_LOADING_TRUE = '[data-test-subj="events-container-loading-true"]';
+
+export const EVENTS_LOADING_FALSE = '[data-test-subj="events-container-loading-false"]';
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts b/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts
index a01edfd22c4e3..b302dd4df62a9 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts
@@ -464,8 +464,9 @@ export const sumAlertCountFromAlertCountTable = (callback?: (sumOfEachRow: numbe
 };
 
 export const selectFirstPageAlerts = () => {
-  cy.get(SELECT_ALL_VISIBLE_ALERTS).first().scrollIntoView();
-  cy.get(SELECT_ALL_VISIBLE_ALERTS).first().click({ force: true });
+  const ALERTS_DATA_GRID = '[data-test-subj="alertsTable"]';
+  cy.get(ALERTS_DATA_GRID).find(SELECT_ALL_VISIBLE_ALERTS).scrollIntoView();
+  cy.get(ALERTS_DATA_GRID).find(SELECT_ALL_VISIBLE_ALERTS).click({ force: true });
 };
 
 export const selectAllAlerts = () => {
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/common/event_table.ts b/x-pack/test/security_solution_cypress/cypress/tasks/common/event_table.ts
index 4205a01048800..b657d43ad0a46 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/common/event_table.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/common/event_table.ts
@@ -10,16 +10,16 @@ import {
   SELECT_ALL_EVENTS,
   SELECT_EVENTS_ACTION_ADD_BULK_TO_TIMELINE,
 } from '../../screens/common/controls';
-import { EVENT_VIEWER_CHECKBOX } from '../../screens/hosts/events';
+import { EVENT_VIEWER_CHECKBOX, SELECT_ALL_EVENTS_CHECKBOX } from '../../screens/hosts/events';
 
 export const selectFirstPageEvents = () => {
-  // eslint-disable-next-line cypress/unsafe-to-chain-command
-  cy.get(EVENT_VIEWER_CHECKBOX).first().scrollIntoView().click();
+  cy.get(EVENT_VIEWER_CHECKBOX).find(SELECT_ALL_EVENTS_CHECKBOX).scrollIntoView();
+  cy.get(EVENT_VIEWER_CHECKBOX).find(SELECT_ALL_EVENTS_CHECKBOX).click();
+  cy.get(SELECT_ALL_EVENTS_CHECKBOX).should('be.checked');
 };
 
 export const selectAllEvents = () => {
-  // eslint-disable-next-line cypress/unsafe-to-chain-command
-  cy.get(EVENT_VIEWER_CHECKBOX).first().scrollIntoView().click();
+  selectFirstPageEvents();
   cy.get(SELECT_ALL_EVENTS).click();
 };
 
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/hosts/events.ts b/x-pack/test/security_solution_cypress/cypress/tasks/hosts/events.ts
index 5b1aa90a7266c..8397837e6679c 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/hosts/events.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/hosts/events.ts
@@ -12,6 +12,8 @@ import {
   HOST_GEO_COUNTRY_NAME_CHECKBOX,
   INSPECT_QUERY,
   SERVER_SIDE_EVENT_COUNT,
+  EVENTS_LOADING_TRUE,
+  EVENTS_LOADING_FALSE,
 } from '../../screens/hosts/events';
 
 export const addsHostGeoCityNameToHeader = () => {
@@ -36,3 +38,8 @@ export const opensInspectQueryModal = () => {
 export const waitsForEventsToBeLoaded = () => {
   cy.get(SERVER_SIDE_EVENT_COUNT).should('not.have.text', '0');
 };
+
+export const waitForEventsDataGridToBeLoaded = () => {
+  cy.get(EVENTS_LOADING_TRUE).should('not.exist');
+  cy.get(EVENTS_LOADING_FALSE).should('exist');
+};
diff --git a/yarn.lock b/yarn.lock
index dfb4200eba94a..0c7cd0c46c949 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1746,10 +1746,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@93.3.0":
-  version "93.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-93.3.0.tgz#3fc1052aa4b0192deadbee9c9ac48409d7df2cf4"
-  integrity sha512-0JNaioZISY8GGt3G+piER4U+e82jQ41cvE2Wz7WotuWiRYJEWVoJrtERWE/DCXubAj95XVCLSetWuQce3EGzmw==
+"@elastic/eui@93.4.0":
+  version "93.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-93.4.0.tgz#14a7302125e13c1c324c5169fb320451f6b79e7a"
+  integrity sha512-fDUNvsPninaDdXWAQRFfoEzk4EgZL+OUoDbzDVH9PTcxkA/dr54sMoTV8KrvvXBVQ+X+VXndcXzmluQeWKj+5g==
   dependencies:
     "@hello-pangea/dnd" "^16.3.0"
     "@types/lodash" "^4.14.198"