From 584b2ff1e371d404b540d403dde45f05fe8f2ba9 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Tue, 14 Feb 2023 12:04:17 -0600
Subject: [PATCH] Upgrade EUI to v75.0.0 (#150787)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

`eui@74.0.2` ⏩ `eui@75.0.0`

___

## [`75.0.0`](https://github.com/elastic/eui/tree/v75.0.0)

- `EuiFlyout`s now automatically shard all fixed `EuiHeader`s on the
page. This means that interactions (mouse & keyboard) with items inside
`EuiHeader`s when flyouts are open will no longer trigger focus fighting
([#6566](https://github.com/elastic/eui/pull/6566))
- `EuiFlyout`s now read out detailed screen reader dialog instructions
and hints on open ([#6566](https://github.com/elastic/eui/pull/6566))

**Bug fixes**

- Fixed `EuiSelectable` options with incorrect `aria-posinset` indices
when rendered with group labels not at the start of the array
([#6571](https://github.com/elastic/eui/pull/6571))
- Fixed a bug with `EuiSearchBar` where filters with `multiSelect:
false` were not able to select a new option when an option was already
selected ([#6577](https://github.com/elastic/eui/pull/6577))

**Breaking changes**

- Removed the ability to customize the `role` prop of `EuiFlyout`s.
`EuiFlyout`s should always be dialog roles for screen reader
consistency. ([#6566](https://github.com/elastic/eui/pull/6566))
- Removed `closeButtonAriaLabel` prop from `EuiFlyout` - use
`closeButtonProps['aria-label']` instead
([#6566](https://github.com/elastic/eui/pull/6566))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 package.json                                    |  2 +-
 .../__snapshots__/collapsible_nav.test.tsx.snap |  1 +
 .../header/__snapshots__/header.test.tsx.snap   |  2 ++
 .../__snapshots__/i18n_service.test.tsx.snap    |  3 +++
 .../src/i18n_eui_mapping.tsx                    | 17 +++++++++++++++++
 src/dev/license_checker/config.ts               |  2 +-
 .../keyboard_shortcuts_doc.tsx                  |  2 +-
 .../fields/script_recorder_fields.tsx           |  2 +-
 .../browser/script_recorder_fields.tsx          |  2 +-
 .../apps/endpoint/trusted_apps_list.ts          |  2 ++
 yarn.lock                                       |  8 ++++----
 11 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 769c09752fcd62..4349bb747869eb 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "74.1.0",
+    "@elastic/eui": "75.0.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__/collapsible_nav.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 4af92461be6264..38c5a7fdf48544 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -10,6 +10,7 @@ Array [
   <nav
     data-eui="EuiFlyout"
     data-test-subj="collapsibleNav"
+    role="dialog"
   >
     <button
       aria-label="Close this dialog"
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 6b86cffc5ca207..34a68939dfb567 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
@@ -11,6 +11,7 @@ exports[`Header renders 1`] = `
   >
     <div
       class="euiHeader euiHeader--dark euiHeader--fixed header__firstBar"
+      data-fixed-header="true"
     >
       <div
         class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
@@ -112,6 +113,7 @@ exports[`Header renders 1`] = `
     </div>
     <div
       class="euiHeader euiHeader--default euiHeader--fixed header__secondBar"
+      data-fixed-header="true"
     >
       <div
         class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
index f0af56e9b0b555..95c1b8fed4a6a0 100644
--- a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
+++ b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
@@ -139,6 +139,9 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiFilterButton.filterBadgeActiveAriaLabel": [Function],
           "euiFilterButton.filterBadgeAvailableAriaLabel": [Function],
           "euiFlyout.closeAriaLabel": "Close this dialog",
+          "euiFlyout.screenReaderFixedHeaders": "You can still continue tabbing through the page headers in addition to the dialog.",
+          "euiFlyout.screenReaderModalDialog": "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.",
+          "euiFlyout.screenReaderNonModalDialog": "You are in a non-modal dialog. To close the dialog, press Escape.",
           "euiForm.addressFormErrors": "Please address the highlighted errors.",
           "euiFormControlLayoutClearButton.label": "Clear input",
           "euiFullscreenSelector.fullscreenButton": "Enter fullscreen",
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
index 95d354ea2c0179..f3a29731325f2b 100644
--- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
+++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -743,6 +743,23 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiFlyout.closeAriaLabel': i18n.translate('core.euiFlyout.closeAriaLabel', {
       defaultMessage: 'Close this dialog',
     }),
+    'euiFlyout.screenReaderModalDialog': i18n.translate('core.euiFlyout.screenReaderModalDialog', {
+      defaultMessage:
+        'You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.',
+    }),
+    'euiFlyout.screenReaderNonModalDialog': i18n.translate(
+      'core.euiFlyout.screenReaderNonModalDialog',
+      {
+        defaultMessage: 'You are in a non-modal dialog. To close the dialog, press Escape.',
+      }
+    ),
+    'euiFlyout.screenReaderFixedHeaders': i18n.translate(
+      'core.euiFlyout.screenReaderFixedHeaders',
+      {
+        defaultMessage:
+          'You can still continue tabbing through the page headers in addition to the dialog.',
+      }
+    ),
     'euiForm.addressFormErrors': i18n.translate('core.euiForm.addressFormErrors', {
       defaultMessage: 'Please address the highlighted errors.',
     }),
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index 11e463efa91ab9..dd3e6f17c80f14 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -84,6 +84,6 @@ 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.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@74.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@75.0.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
 };
diff --git a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
index fe5428cea203df..94a84fdef41766 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
@@ -81,7 +81,7 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
 
 export const KeyboardShortcutsDoc: FunctionComponent<Props> = ({ onClose }) => (
   <EuiFlyout
-    closeButtonAriaLabel={strings.getFlyoutCloseButtonAriaLabel()}
+    closeButtonProps={{ 'aria-label': strings.getFlyoutCloseButtonAriaLabel() }}
     size="s"
     onClose={onClose}
   >
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/script_recorder_fields.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/script_recorder_fields.tsx
index 3704fd4f4ec110..d774d5c5176845 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/script_recorder_fields.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/script_recorder_fields.tsx
@@ -90,7 +90,7 @@ export function ScriptRecorderFields({ onChange, script, fileName, isEditable }:
           ownFocus
           onClose={() => setShowScript(false)}
           aria-labelledby="syntheticsBrowserScriptBlockHeader"
-          closeButtonAriaLabel={CLOSE_BUTTON_LABEL}
+          closeButtonProps={{ 'aria-label': CLOSE_BUTTON_LABEL }}
         >
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="m">
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/browser/script_recorder_fields.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/browser/script_recorder_fields.tsx
index 704fbd6edcdfbc..67a2acc0d1f89e 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/browser/script_recorder_fields.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/browser/script_recorder_fields.tsx
@@ -99,7 +99,7 @@ export function ScriptRecorderFields({ onChange, script, fileName }: Props) {
           ownFocus
           onClose={() => setShowScript(false)}
           aria-labelledby="syntheticsBrowserScriptBlockHeader"
-          closeButtonAriaLabel={CLOSE_BUTTON_LABEL}
+          closeButtonProps={{ 'aria-label': CLOSE_BUTTON_LABEL }}
         >
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="m">
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/trusted_apps_list.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/trusted_apps_list.ts
index 4643b91303be07..53e1e8f6ad7f22 100644
--- a/x-pack/test/security_solution_endpoint/apps/endpoint/trusted_apps_list.ts
+++ b/x-pack/test/security_solution_endpoint/apps/endpoint/trusted_apps_list.ts
@@ -38,7 +38,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       // Add it
       await testSubjects.click('trustedAppsListPage-emptyState-addButton');
+      await testSubjects.click('trustedApps-form-nameTextField');
       await testSubjects.setValue('trustedApps-form-nameTextField', 'Windows Defender');
+      await testSubjects.click('trustedApps-form-conditionsBuilder-group1-entry0-value');
       await testSubjects.setValue('trustedApps-form-conditionsBuilder-group1-entry0-value', SHA256);
       await testSubjects.click('trustedAppsListPage-flyout-submitButton');
       expect(
diff --git a/yarn.lock b/yarn.lock
index 00d1f3210c11d8..9dc6aaf06c07a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1539,10 +1539,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@74.1.0":
-  version "74.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-74.1.0.tgz#bf60ad199715da3622deb33efb587893a9321073"
-  integrity sha512-pSoIO7h/T4gR3yZbKcadSt8/pPNb45L6s8mR5nHLDo+otAam6Yo3V1u9Upwc5QOVW82hROPfvao44lY7egIiAw==
+"@elastic/eui@75.0.0":
+  version "75.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-75.0.0.tgz#06f1d41181327d91d6531f240372c01c34505bee"
+  integrity sha512-fgjpF4l+YuMVepnYbiddpVZHkzEVrgwvsmJokaf0OZZ34UCh+OB2z4n01yAhmhQXhrFEKv8+LmQt+OMIpTBevA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"