Upgrade EUI to v75.0.0 (#150787)

## Summary

`[email protected]` ⏩ `[email protected]`

___

## [`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](elastic/eui#6566))
- `EuiFlyout`s now read out detailed screen reader dialog instructions
and hints on open ([#6566](elastic/eui#6566))

**Bug fixes**

- Fixed `EuiSelectable` options with incorrect `aria-posinset` indices
when rendered with group labels not at the start of the array
([#6571](elastic/eui#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](elastic/eui#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](elastic/eui#6566))
- Removed `closeButtonAriaLabel` prop from `EuiFlyout` - use
`closeButtonProps['aria-label']` instead
([#6566](elastic/eui#6566))

---------

Co-authored-by: Kibana Machine <[email protected]>

package.json

@@ -107,7 +107,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@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",

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.',
     }),

src/dev/license_checker/config.ts

@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['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'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

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}
   >

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">

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">

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(

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"