Bumping EUI to 39.0.0 (#113633)

* Upgraded the version of EUI to 38.2.0 from 38.0.1 * Updated the i18n mappings required for EUI v.38.2.0 * Update i18n snapshots and resolve linting error * Removed html_id_generator mocks. Current mock was failing due to missing useGeneratedHtmlId export. This is safe to remove because EUI contains a .testenv that contains an mock for html_id_generator. More info at https://github.com/elastic/eui/blob/master/src/services/accessibility/html_id_generator.testenv.ts * Resolve linting error in i18n mapping file * Removed html_id_generator mocks. Current mock was failing due to missing useGeneratedHtmlId export. This is safe to remove because EUI contains a .testenv that contains a mock for html_id_generator. More info at https://github.com/elastic/eui/blob/master/src/services/accessibility/html_id_generator.testenv.ts * Update plugin snapshots * Resolve merge conflict in license_checker config.ts file * Upgrade EUI to version 39.0.0 from the original target (38.2.0) to handle an issue found with a functional test during the original upgrade * Updated the i18n mapping for EUI v.39.0.0 * Update various snapshots to account for the an i18n translation token addition in EUI v. 39.0.0 * Updated test cases marked as obsolete by CI * Update src/dev/license_checker/config.ts Removing TODO comments from src/dev/license_checker/config.ts as they are no longer needed. Co-authored-by: Constance <constancecchen@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Constance <constancecchen@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2021-10-12 17:11:04 -04:00 · 2021-10-12 17:11:04 -04:00 · a51545ecc3
commit a51545ecc3
parent 636581ac26
42 changed files with 204 additions and 166 deletions
--- a/package.json
+++ b/package.json
@ -103,7 +103,7 @@
    "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
    "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.21",
    "@elastic/ems-client": "7.15.0",
-    "@elastic/eui": "38.0.1",
+    "@elastic/eui": "39.0.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/maki": "6.3.0",
    "@elastic/node-crypto": "1.2.1",
--- a/src/core/public/core_app/status/components/snapshots/status_table.test.tsx.snap
+++ b/src/core/public/core_app/status/components/snapshots/status_table.test.tsx.snap
@ -35,7 +35,12 @@ exports[`StatusTable renders when statuses is provided 1`] = `
      },
    ]
  }
-  noItemsMessage="No items found"
+  noItemsMessage={
+    <EuiI18n
+      default="No items found"
+      token="euiBasicTable.noItemsMessage"
+    />
+  }
  responsive={true}
  rowProps={[Function]}
  tableLayout="fixed"
--- a/src/core/public/i18n/snapshots/i18n_service.test.tsx.snap
+++ b/src/core/public/i18n/snapshots/i18n_service.test.tsx.snap
@ -7,6 +7,7 @@ exports[`#start() returns \`Context\` component 1`] = `
      Object {
        "mapping": Object {
          "euiAccordion.isLoading": "Loading",
+          "euiBasicTable.noItemsMessage": "No items found",
          "euiBasicTable.selectAllRows": "Select all rows",
          "euiBasicTable.selectThisRow": "Select this row",
          "euiBasicTable.tableAutoCaptionWithPagination": [Function],
@ -120,13 +121,15 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiLink.external.ariaLabel": "External link",
          "euiLink.newTarget.screenReaderOnlyText": "(opens in a new tab or window)",
          "euiMarkdownEditorFooter.closeButton": "Close",
-          "euiMarkdownEditorFooter.descriptionPrefix": "This editor uses",
-          "euiMarkdownEditorFooter.descriptionSuffix": "You can also utilize these additional syntax plugins to add rich content to your text.",
          "euiMarkdownEditorFooter.errorsTitle": "Errors",
+          "euiMarkdownEditorFooter.mdSyntaxLink": "GitHub flavored markdown",
          "euiMarkdownEditorFooter.openUploadModal": "Open upload files modal",
          "euiMarkdownEditorFooter.showMarkdownHelp": "Show markdown help",
          "euiMarkdownEditorFooter.showSyntaxErrors": "Show errors",
          "euiMarkdownEditorFooter.supportedFileTypes": [Function],
+          "euiMarkdownEditorFooter.syntaxModalDescriptionPrefix": "This editor uses",
+          "euiMarkdownEditorFooter.syntaxModalDescriptionSuffix": "You can also utilize these additional syntax plugins to add rich content to your text.",
+          "euiMarkdownEditorFooter.syntaxPopoverDescription": "This editor uses",
          "euiMarkdownEditorFooter.syntaxTitle": "Syntax help",
          "euiMarkdownEditorFooter.unsupportedFileType": "File type not supported",
          "euiMarkdownEditorFooter.uploadingFiles": "Click to upload files",
--- a/src/core/public/i18n/i18n_eui_mapping.tsx
+++ b/src/core/public/i18n/i18n_eui_mapping.tsx
@ -68,6 +68,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        values: { tableCaption },
        description: 'Screen reader text to describe the pagination controls',
      }),
+    'euiBasicTable.noItemsMessage': i18n.translate('core.euiBasicTable.noItemsMessage', {
+      defaultMessage: 'No items found',
+    }),
    'euiBottomBar.customScreenReaderAnnouncement': ({ landmarkHeading }: EuiValues) =>
      i18n.translate('core.euiBottomBar.customScreenReaderAnnouncement', {
        defaultMessage:
@ -634,19 +637,31 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        defaultMessage: 'Syntax help',
      }
    ),
-    'euiMarkdownEditorFooter.descriptionPrefix': i18n.translate(
-      'core.euiMarkdownEditorFooter.descriptionPrefix',
+    'euiMarkdownEditorFooter.mdSyntaxLink': i18n.translate(
+      'core.euiMarkdownEditorFooter.mdSyntaxLink',
+      {
+        defaultMessage: 'GitHub flavored markdown',
+      }
+    ),
+    'euiMarkdownEditorFooter.syntaxModalDescriptionPrefix': i18n.translate(
+      'core.euiMarkdownEditorFooter.syntaxModalDescriptionPrefix',
      {
        defaultMessage: 'This editor uses',
      }
    ),
-    'euiMarkdownEditorFooter.descriptionSuffix': i18n.translate(
-      'core.euiMarkdownEditorFooter.descriptionSuffix',
+    'euiMarkdownEditorFooter.syntaxModalDescriptionSuffix': i18n.translate(
+      'core.euiMarkdownEditorFooter.syntaxModalDescriptionSuffix',
      {
        defaultMessage:
          'You can also utilize these additional syntax plugins to add rich content to your text.',
      }
    ),
+    'euiMarkdownEditorFooter.syntaxPopoverDescription': i18n.translate(
+      'core.euiMarkdownEditorFooter.syntaxPopoverDescription',
+      {
+        defaultMessage: 'This editor uses',
+      }
+    ),
    'euiMarkdownEditorToolbar.editor': i18n.translate('core.euiMarkdownEditorToolbar.editor', {
      defaultMessage: 'Editor',
    }),
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -75,6 +75,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@7.15.0': ['Elastic License 2.0'],
-  '@elastic/eui@38.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@39.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
 };
--- a/src/plugins/data/public/utils/table_inspector_view/components/snapshots/data_view.test.tsx.snap
+++ b/src/plugins/data/public/utils/table_inspector_view/components/snapshots/data_view.test.tsx.snap
@ -884,7 +884,12 @@ exports[`Inspector Data View component should render single table without select
              },
            ]
          }
-          noItemsMessage="No items found"
+          noItemsMessage={
+            <EuiI18n
+              default="No items found"
+              token="euiBasicTable.noItemsMessage"
+            />
+          }
          onChange={[Function]}
          pagination={
            Object {
@ -2449,7 +2454,12 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
              },
            ]
          }
-          noItemsMessage="No items found"
+          noItemsMessage={
+            <EuiI18n
+              default="No items found"
+              token="euiBasicTable.noItemsMessage"
+            />
+          }
          onChange={[Function]}
          pagination={
            Object {
--- a/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.test.tsx
+++ b/src/plugins/es_ui_shared/public/components/cron_editor/cron_editor.test.tsx
@ -14,12 +14,6 @@ import { mountWithI18nProvider } from '@kbn/test/jest';
 import { Frequency } from './types';
 import { CronEditor } from './cron_editor';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 describe('CronEditor', () => {
  ['MINUTE', 'HOUR', 'DAY', 'WEEK', 'MONTH', 'YEAR'].forEach((unit) => {
    test(`is rendered with a ${unit} frequency`, () => {
--- a/src/plugins/index_pattern_field_editor/jest/client_integration/helpers/jest.mocks.tsx
+++ b/src/plugins/index_pattern_field_editor/jest/client_integration/helpers/jest.mocks.tsx
@ -9,12 +9,6 @@ import React from 'react';

 const EDITOR_ID = 'testEditor';

-jest.mock('@elastic/eui/lib/services/accessibility', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 jest.mock('@elastic/eui', () => {
  const original = jest.requireActual('@elastic/eui');

--- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/snapshots/color.test.tsx.snap
+++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/snapshots/color.test.tsx.snap
@ -76,7 +76,12 @@ exports[`ColorFormatEditor should render multiple colors 1`] = `
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    tableLayout="fixed"
  />
@ -170,7 +175,12 @@ exports[`ColorFormatEditor should render other type normally (range field) 1`] =
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    tableLayout="fixed"
  />
@ -264,7 +274,12 @@ exports[`ColorFormatEditor should render string type normally (regex field) 1`]
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    tableLayout="fixed"
  />
--- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/snapshots/static_lookup.test.tsx.snap
+++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/snapshots/static_lookup.test.tsx.snap
@ -55,7 +55,12 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    style={
      Object {
@ -159,7 +164,12 @@ exports[`StaticLookupFormatEditor should render normally 1`] = `
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    style={
      Object {
--- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/snapshots/url.test.tsx.snap
+++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/snapshots/url.test.tsx.snap
@ -292,7 +292,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
          </div>
          <table
            class="euiTable euiTable--compressed euiTable--responsive"
-            id="generated-id"
+            id="__table_generated-id"
            tabindex="-1"
          >
            <caption
--- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.test.tsx
+++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.test.tsx
@ -15,12 +15,6 @@ import { createKibanaReactContext } from '../../../../../../kibana_react/public'
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

-jest.mock('@elastic/eui/lib/services/accessibility', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 const fieldType = 'string';
 const format = {
  getConverterFor: jest
--- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/samples/snapshots/samples.test.tsx.snap
+++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/samples/snapshots/samples.test.tsx.snap
@ -52,7 +52,12 @@ exports[`FormatEditorSamples should render normally 1`] = `
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    tableLayout="fixed"
  />
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/snapshots/table.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/snapshots/table.test.tsx.snap
@ -188,7 +188,12 @@ exports[`Table prevents saved objects from being deleted 1`] = `
        ]
      }
      loading={false}
-      noItemsMessage="No items found"
+      noItemsMessage={
+        <EuiI18n
+          default="No items found"
+          token="euiBasicTable.noItemsMessage"
+        />
+      }
      onChange={[Function]}
      pagination={
        Object {
@ -403,7 +408,12 @@ exports[`Table should render normally 1`] = `
        ]
      }
      loading={false}
-      noItemsMessage="No items found"
+      noItemsMessage={
+        <EuiI18n
+          default="No items found"
+          token="euiBasicTable.noItemsMessage"
+        />
+      }
      onChange={[Function]}
      pagination={
        Object {
--- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx
@ -15,12 +15,6 @@ import props from './__fixtures__/props.json';
 import { MemoryRouter } from 'react-router-dom';
 import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 describe('ErrorGroupOverview -> List', () => {
  beforeAll(() => {
    mockMoment();
--- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/snapshots/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/snapshots/List.test.tsx.snap
@ -56,7 +56,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
    </div>
    <table
      className="euiTable euiTable--responsive"
-      id="generated-id"
+      id="__table_generated-id"
      tabIndex={-1}
    >
      <caption
@ -352,7 +352,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
    </div>
    <table
      className="euiTable euiTable--responsive"
-      id="generated-id"
+      id="__table_generated-id"
      tabIndex={-1}
    >
      <caption
@ -1290,7 +1290,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
              className="euiPagination__item"
            >
              <button
-                aria-controls="generated-id"
+                aria-controls="__table_generated-id"
                aria-current={true}
                aria-label="Page 1 of 1"
                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.test.tsx
@ -12,12 +12,6 @@ import { mountWithTheme } from '../../../utils/testHelpers';
 import { Stackframe as StackframeComponent } from './Stackframe';
 import stacktracesMock from './__fixtures__/stacktraces.json';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 describe('Stackframe', () => {
  describe('when stackframe has source lines', () => {
    let wrapper: ReactWrapper;
--- a/x-pack/plugins/apm/public/components/shared/managed_table/snapshots/managed_table.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/managed_table/snapshots/managed_table.test.tsx.snap
@ -35,7 +35,12 @@ exports[`ManagedTable should render a page-full of items, with defaults 1`] = `
    ]
  }
  loading={false}
-  noItemsMessage="No items found"
+  noItemsMessage={
+    <EuiI18n
+      default="No items found"
+      token="euiBasicTable.noItemsMessage"
+    />
+  }
  onChange={[Function]}
  pagination={
    Object {
@ -85,7 +90,12 @@ exports[`ManagedTable should render when specifying initial values 1`] = `
    ]
  }
  loading={false}
-  noItemsMessage="No items found"
+  noItemsMessage={
+    <EuiI18n
+      default="No items found"
+      token="euiBasicTable.noItemsMessage"
+    />
+  }
  onChange={[Function]}
  pagination={
    Object {
--- a/x-pack/plugins/canvas/public/components/asset_manager/stories/snapshots/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/stories/snapshots/asset_manager.stories.storyshot
@ -54,7 +54,7 @@ exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
              >
                <input
                  accept="image/*"
-                  aria-describedby="generated-id"
+                  aria-describedby="generated-id-filePicker__prompt"
                  className="euiFilePicker__input"
                  multiple={true}
                  onChange={[Function]}
@ -65,7 +65,7 @@ exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
                />
                <div
                  className="euiFilePicker__prompt"
-                  id="generated-id"
+                  id="generated-id-filePicker__prompt"
                >
                  <span
                    aria-hidden="true"
@ -238,7 +238,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
              >
                <input
                  accept="image/*"
-                  aria-describedby="generated-id"
+                  aria-describedby="generated-id-filePicker__prompt"
                  className="euiFilePicker__input"
                  multiple={true}
                  onChange={[Function]}
@ -249,7 +249,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
                />
                <div
                  className="euiFilePicker__prompt"
-                  id="generated-id"
+                  id="generated-id-filePicker__prompt"
                >
                  <span
                    aria-hidden="true"
--- a/x-pack/plugins/canvas/public/components/expression_input/stories/snapshots/expression_input.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/expression_input/stories/snapshots/expression_input.stories.storyshot
@ -29,7 +29,7 @@ exports[`Storyshots components/ExpressionInput default 1`] = `
              aria-label="Code Editor"
              className="kibanaCodeEditor__keyboardHint"
              data-test-subj="codeEditorHint"
-              id="generated-id"
+              id="codeEditor_generated-id"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
--- a/x-pack/plugins/canvas/public/components/file_upload/snapshots/file_upload.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/file_upload/snapshots/file_upload.stories.storyshot
@ -8,7 +8,7 @@ exports[`Storyshots components/FileUpload default 1`] = `
    className="euiFilePicker__wrap"
  >
    <input
-      aria-describedby="generated-id"
+      aria-describedby="generated-id-filePicker__prompt"
      className="euiFilePicker__input"
      id=""
      onChange={[Function]}
@ -19,7 +19,7 @@ exports[`Storyshots components/FileUpload default 1`] = `
    />
    <div
      className="euiFilePicker__prompt"
-      id="generated-id"
+      id="generated-id-filePicker__prompt"
    >
      <span
        aria-hidden="true"
--- a/x-pack/plugins/canvas/public/components/home/my_workpads/snapshots/workpad_table.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/snapshots/workpad_table.stories.storyshot
@ -54,7 +54,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
          >
            <input
              accept="application/json"
-              aria-describedby="generated-id"
+              aria-describedby="generated-id-filePicker__prompt"
              aria-label="Import workpad JSON file"
              className="euiFilePicker__input"
              disabled={false}
@ -66,7 +66,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
            />
            <div
              className="euiFilePicker__prompt"
-              id="generated-id"
+              id="generated-id-filePicker__prompt"
            >
              <span
                aria-hidden="true"
@ -109,7 +109,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
                  checked={false}
                  className="euiCheckbox__input"
                  disabled={false}
-                  id="_selection_column-checkbox_generated-id"
+                  id="_selection_column-checkbox_generated-id_mobile"
                  onChange={[Function]}
                  type="checkbox"
                />
@ -118,7 +118,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
                />
                <label
                  className="euiCheckbox__label"
-                  htmlFor="_selection_column-checkbox_generated-id"
+                  htmlFor="_selection_column-checkbox_generated-id_mobile"
                >
                  Select all rows
                </label>
@ -166,7 +166,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
        </div>
        <table
          className="euiTable euiTable--responsive"
-          id="generated-id"
+          id="__table_generated-id"
          tabIndex={-1}
        >
          <caption
@ -195,7 +195,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
                      className="euiCheckbox__input"
                      data-test-subj="checkboxSelectAll"
                      disabled={false}
-                      id="_selection_column-checkbox_generated-id"
+                      id="_selection_column-checkbox_generated-id_desktop"
                      onChange={[Function]}
                      type="checkbox"
                    />
@ -921,7 +921,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
                  className="euiPagination__item"
                >
                  <button
-                    aria-controls="generated-id"
+                    aria-controls="__table_generated-id"
                    aria-current={true}
                    aria-label="Page 1 of 1"
                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.test.tsx
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.test.tsx
@ -21,11 +21,7 @@ import { Settings } from './settings';

 jest.mock('../../../supported_renderers');
 jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `generated-id`);
-jest.mock('@elastic/eui/lib/services/accessibility', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
+
 jest.mock('@elastic/eui/lib/components/portal/portal', () => {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const React = jest.requireActual('react');
--- a/x-pack/plugins/canvas/storybook/storyshots.test.tsx
+++ b/x-pack/plugins/canvas/storybook/storyshots.test.tsx
@ -51,13 +51,6 @@ jest.mock('@elastic/eui/packages/react-datepicker', () => {
 // @ts-expect-error Portal mocks are notoriously difficult to type
 ReactDOM.createPortal = jest.fn((element) => element);

-// Mock the EUI HTML ID Generator so elements have a predictable ID in snapshots
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 // To be resolved by EUI team.
 // https://github.com/elastic/eui/issues/3712
 jest.mock('@elastic/eui/lib/components/overlay_mask/overlay_mask', () => {
--- a/x-pack/plugins/license_management/jest/add_license.test.js
+++ b/x-pack/plugins/license_management/jest/add_license.test.js
@ -7,11 +7,6 @@

 import { AddLicense } from '../public/application/sections/license_dashboard/add_license';
 import { createMockLicense, getComponent } from './util';
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});

 describe('AddLicense component when license is active', () => {
  test('should display correct verbiage', () => {
--- a/x-pack/plugins/license_management/jest/request_trial_extension.test.js
+++ b/x-pack/plugins/license_management/jest/request_trial_extension.test.js
@ -7,11 +7,6 @@

 import { RequestTrialExtension } from '../public/application/sections/license_dashboard/request_trial_extension';
 import { createMockLicense, getComponent } from './util';
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});

 describe('RequestTrialExtension component', () => {
  test('should not display when license is active and trial has not been used', () => {
--- a/x-pack/plugins/license_management/jest/revert_to_basic.test.js
+++ b/x-pack/plugins/license_management/jest/revert_to_basic.test.js
@ -7,11 +7,6 @@

 import { RevertToBasic } from '../public/application/sections/license_dashboard/revert_to_basic';
 import { createMockLicense, getComponent } from './util';
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});

 describe('RevertToBasic component', () => {
  test('should display when trial is active', () => {
--- a/x-pack/plugins/license_management/jest/start_trial.test.js
+++ b/x-pack/plugins/license_management/jest/start_trial.test.js
@ -8,12 +8,6 @@
 import { StartTrial } from '../public/application/sections/license_dashboard/start_trial';
 import { createMockLicense, getComponent } from './util';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 describe('StartTrial component when trial is allowed', () => {
  test('display for basic license', () => {
    const rendered = getComponent(
--- a/x-pack/plugins/monitoring/public/components/beats/overview/snapshots/latest_active.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/beats/overview/snapshots/latest_active.test.js.snap
@ -39,7 +39,12 @@ exports[`Latest Active that latest active component renders normally 1`] = `
      },
    ]
  }
-  noItemsMessage="No items found"
+  noItemsMessage={
+    <EuiI18n
+      default="No items found"
+      token="euiBasicTable.noItemsMessage"
+    />
+  }
  responsive={true}
  tableLayout="fixed"
 />
--- a/x-pack/plugins/monitoring/public/components/beats/overview/snapshots/latest_types.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/beats/overview/snapshots/latest_types.test.js.snap
@ -31,7 +31,12 @@ exports[`Latest Types that latest active component renders normally 1`] = `
      },
    ]
  }
-  noItemsMessage="No items found"
+  noItemsMessage={
+    <EuiI18n
+      default="No items found"
+      token="euiBasicTable.noItemsMessage"
+    />
+  }
  responsive={true}
  tableLayout="fixed"
 />
--- a/x-pack/plugins/monitoring/public/components/beats/overview/snapshots/latest_versions.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/beats/overview/snapshots/latest_versions.test.js.snap
@ -27,7 +27,12 @@ exports[`Latest Versions that latest active component renders normally 1`] = `
      },
    ]
  }
-  noItemsMessage="No items found"
+  noItemsMessage={
+    <EuiI18n
+      default="No items found"
+      token="euiBasicTable.noItemsMessage"
+    />
+  }
  responsive={true}
  tableLayout="fixed"
 />
--- a/x-pack/plugins/monitoring/public/components/logs/snapshots/logs.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logs/snapshots/logs.test.js.snap
@ -268,7 +268,12 @@ exports[`Logs should render normally 1`] = `
        },
      ]
    }
-    noItemsMessage="No items found"
+    noItemsMessage={
+      <EuiI18n
+        default="No items found"
+        token="euiBasicTable.noItemsMessage"
+      />
+    }
    responsive={true}
    tableLayout="fixed"
  />
--- a/x-pack/plugins/reporting/public/management/snapshots/report_listing.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/management/snapshots/report_listing.test.tsx.snap
@ -33,7 +33,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                    checked={false}
                    compressed={false}
                    disabled={false}
-                    id="_selection_column-checkbox_generated-id"
+                    id="_selection_column-checkbox_generated-id_mobile"
                    indeterminate={false}
                    label="Select all rows"
                    onChange={[Function]}
@ -46,7 +46,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                        checked={false}
                        className="euiCheckbox__input"
                        disabled={false}
-                        id="_selection_column-checkbox_generated-id"
+                        id="_selection_column-checkbox_generated-id_mobile"
                        onChange={[Function]}
                        type="checkbox"
                      />
@ -55,7 +55,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                      />
                      <label
                        className="euiCheckbox__label"
-                        htmlFor="_selection_column-checkbox_generated-id"
+                        htmlFor="_selection_column-checkbox_generated-id_mobile"
                      >
                        Select all rows
                      </label>
@ -76,13 +76,13 @@ exports[`ReportListing Report job listing with some items 1`] = `
      </div>
    </EuiTableHeaderMobile>
    <EuiTable
-      id="generated-id"
+      id="__table_generated-id"
      responsive={true}
      tableLayout="fixed"
    >
      <table
        className="euiTable euiTable--responsive"
-        id="generated-id"
+        id="__table_generated-id"
        tabIndex={-1}
      >
        <EuiScreenReaderOnly>
@ -122,7 +122,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                        compressed={false}
                        data-test-subj="checkboxSelectAll"
                        disabled={false}
-                        id="_selection_column-checkbox_generated-id"
+                        id="_selection_column-checkbox_generated-id_desktop"
                        indeterminate={false}
                        label={null}
                        onChange={[Function]}
@ -137,7 +137,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                            className="euiCheckbox__input"
                            data-test-subj="checkboxSelectAll"
                            disabled={false}
-                            id="_selection_column-checkbox_generated-id"
+                            id="_selection_column-checkbox_generated-id_desktop"
                            onChange={[Function]}
                            type="checkbox"
                          />
@ -10370,7 +10370,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
    </EuiTable>
  </div>
  <PaginationBar
-    aria-controls="generated-id"
+    aria-controls="__table_generated-id"
    aria-label={
      <EuiI18n
        default="Pagination for preceding table: {tableCaption}"
@ -10403,7 +10403,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
      </EuiSpacer>
      <EuiTablePagination
        activePage={0}
-        aria-controls="generated-id"
+        aria-controls="__table_generated-id"
        hidePerPageOptions={true}
        itemsPerPage={10}
        itemsPerPageOptions={
@ -10440,7 +10440,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
              >
                <EuiPagination
                  activePage={0}
-                  aria-controls="generated-id"
+                  aria-controls="__table_generated-id"
                  onPageClick={[Function]}
                  pageCount={2}
                >
@ -10500,7 +10500,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                    >
                      <PaginationButtonWrapper
                        activePage={0}
-                        ariaControls="generated-id"
+                        ariaControls="__table_generated-id"
                        key="0"
                        pageCount={2}
                        pageIndex={0}
@ -10510,7 +10510,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                          className="euiPagination__item"
                        >
                          <EuiPaginationButton
-                            aria-controls="generated-id"
+                            aria-controls="__table_generated-id"
                            hideOnMobile={true}
                            isActive={true}
                            onClick={[Function]}
@ -10537,19 +10537,19 @@ exports[`ReportListing Report job listing with some items 1`] = `
                                }
                              >
                                <EuiButtonEmpty
-                                  aria-controls="generated-id"
+                                  aria-controls="__table_generated-id"
                                  aria-current={true}
                                  aria-label="Page 1 of 2"
                                  className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                                  color="text"
                                  data-test-subj="pagination-button-0"
-                                  href="#generated-id"
+                                  href="#__table_generated-id"
                                  isDisabled={true}
                                  onClick={[Function]}
                                  size="s"
                                >
                                  <button
-                                    aria-controls="generated-id"
+                                    aria-controls="__table_generated-id"
                                    aria-current={true}
                                    aria-label="Page 1 of 2"
                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
@ -10587,7 +10587,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                      </PaginationButtonWrapper>
                      <PaginationButtonWrapper
                        activePage={0}
-                        ariaControls="generated-id"
+                        ariaControls="__table_generated-id"
                        key="1"
                        pageCount={2}
                        pageIndex={1}
@ -10597,7 +10597,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                          className="euiPagination__item"
                        >
                          <EuiPaginationButton
-                            aria-controls="generated-id"
+                            aria-controls="__table_generated-id"
                            hideOnMobile={true}
                            isActive={false}
                            onClick={[Function]}
@ -10624,22 +10624,22 @@ exports[`ReportListing Report job listing with some items 1`] = `
                                }
                              >
                                <EuiButtonEmpty
-                                  aria-controls="generated-id"
+                                  aria-controls="__table_generated-id"
                                  aria-label="Page 2 of 2"
                                  className="euiPaginationButton euiPaginationButton--hideOnMobile"
                                  color="text"
                                  data-test-subj="pagination-button-1"
-                                  href="#generated-id"
+                                  href="#__table_generated-id"
                                  isDisabled={false}
                                  onClick={[Function]}
                                  size="s"
                                >
                                  <a
-                                    aria-controls="generated-id"
+                                    aria-controls="__table_generated-id"
                                    aria-label="Page 2 of 2"
                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                                    data-test-subj="pagination-button-1"
-                                    href="#generated-id"
+                                    href="#__table_generated-id"
                                    onClick={[Function]}
                                    rel="noreferrer"
                                  >
@ -10685,20 +10685,20 @@ exports[`ReportListing Report job listing with some items 1`] = `
                        token="euiPagination.disabledNextPage"
                      >
                        <EuiButtonIcon
-                          aria-controls="generated-id"
+                          aria-controls="__table_generated-id"
                          aria-label="Next page, 2"
                          color="text"
                          data-test-subj="pagination-button-next"
-                          href="#generated-id"
+                          href="#__table_generated-id"
                          iconType="arrowRight"
                          onClick={[Function]}
                        >
                          <a
-                            aria-controls="generated-id"
+                            aria-controls="__table_generated-id"
                            aria-label="Next page, 2"
                            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                            data-test-subj="pagination-button-next"
-                            href="#generated-id"
+                            href="#__table_generated-id"
                            onClick={[Function]}
                            rel="noreferrer"
                          >
--- a/x-pack/plugins/reporting/public/management/report_listing.test.tsx
+++ b/x-pack/plugins/reporting/public/management/report_listing.test.tsx
@ -26,12 +26,6 @@ import { Job } from '../lib/job';
 import { InternalApiClientProvider, ReportingAPIClient } from '../lib/reporting_api_client';
 import { KibanaContextProvider } from '../shared_imports';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 interface PayloadMock {
  payload: Omit<ReportApiJSON['payload'], 'browserTimezone' | 'version' | 'layout'>;
 }
--- a/x-pack/plugins/security_solution/public/common/components/conditions_table/snapshots/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/conditions_table/snapshots/index.test.tsx.snap
@ -58,7 +58,12 @@ exports[`conditions_table ConditionsTable should render multi item table with an
          },
        ]
      }
-      noItemsMessage="No items found"
+      noItemsMessage={
+        <EuiI18n
+          default="No items found"
+          token="euiBasicTable.noItemsMessage"
+        />
+      }
      responsive={true}
      tableLayout="fixed"
    />
@ -124,7 +129,12 @@ exports[`conditions_table ConditionsTable should render multi item table with or
          },
        ]
      }
-      noItemsMessage="No items found"
+      noItemsMessage={
+        <EuiI18n
+          default="No items found"
+          token="euiBasicTable.noItemsMessage"
+        />
+      }
      responsive={true}
      tableLayout="fixed"
    />
@ -165,7 +175,12 @@ exports[`conditions_table ConditionsTable should render single item table correc
          },
        ]
      }
-      noItemsMessage="No items found"
+      noItemsMessage={
+        <EuiI18n
+          default="No items found"
+          token="euiBasicTable.noItemsMessage"
+        />
+      }
      responsive={true}
      tableLayout="fixed"
    />
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
@ -36,10 +36,6 @@ import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_ex
 import { resolvePathVariables } from '../../../../common/utils/resolve_path_variables';
 import { licenseService } from '../../../../common/hooks/use_license';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
-  htmlIdGenerator: () => () => 'mockId',
-}));
-
 // TODO: remove this mock when feature flag is removed
 jest.mock('../../../../common/hooks/use_experimental_features');
 const useIsExperimentalFeatureEnabledMock = useIsExperimentalFeatureEnabled as jest.Mock;
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -1162,8 +1162,6 @@
    "core.euiLink.external.ariaLabel": "外部リンク",
    "core.euiLink.newTarget.screenReaderOnlyText": "（新しいタブまたはウィンドウで開く）",
    "core.euiMarkdownEditorFooter.closeButton": "閉じる",
-    "core.euiMarkdownEditorFooter.descriptionPrefix": "このエディターは使用します",
-    "core.euiMarkdownEditorFooter.descriptionSuffix": "これらの追加の構文プラグインを利用して、リッチコンテンツをテキストに追加することもできます。",
    "core.euiMarkdownEditorFooter.errorsTitle": "エラー",
    "core.euiMarkdownEditorFooter.openUploadModal": "ファイルのアップロードモーダルを開く",
    "core.euiMarkdownEditorFooter.showMarkdownHelp": "マークダウンヘルプを表示",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -1180,8 +1180,6 @@
    "core.euiLink.external.ariaLabel": "外部链接",
    "core.euiLink.newTarget.screenReaderOnlyText": "（在新选项卡或窗口中打开）",
    "core.euiMarkdownEditorFooter.closeButton": "关闭",
-    "core.euiMarkdownEditorFooter.descriptionPrefix": "此编辑器使用",
-    "core.euiMarkdownEditorFooter.descriptionSuffix": "还可以利用这些附加的语法插件向文本添加富文本内容。",
    "core.euiMarkdownEditorFooter.errorsTitle": "错误",
    "core.euiMarkdownEditorFooter.openUploadModal": "打开上传文件模式窗口",
    "core.euiMarkdownEditorFooter.showMarkdownHelp": "显示 Markdown 帮助",
--- a/x-pack/plugins/uptime/public/components/common/charts/snapshots/donut_chart.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/common/charts/snapshots/donut_chart.test.tsx.snap
@ -347,10 +347,18 @@ exports[`DonutChart component passes correct props without errors for valid prop
          },
          "barSeriesStyle": Object {
            "displayValue": Object {
-              "fill": "rgba(106, 113, 125, 1)",
+              "alignment": Object {
+                "horizontal": "center",
+                "vertical": "middle",
+              },
+              "fill": Object {
+                "textBorder": 0,
+                "textContrast": true,
+                "textInvertible": true,
+              },
              "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont,
  'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-              "fontSize": 8,
+              "fontSize": 10,
            },
          },
          "chartMargins": Object {
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.test.tsx
@ -13,12 +13,6 @@ import { render } from '../../../../lib/helper/rtl_helpers';

 mockMoment();

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 describe('LocationStatusTags component', () => {
  let monitorLocations: MonitorLocation[];

--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.test.tsx
@ -23,12 +23,6 @@ import { mockMoment } from '../../../lib/helper/test_helpers';
 import { render } from '../../../lib/helper/rtl_helpers';
 import { NO_DATA_MESSAGE } from './translations';

-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
-  return {
-    htmlIdGenerator: () => () => `generated-id`,
-  };
-});
-
 const testFooPings: Ping[] = [
  makePing({
    docId: 'foo1',
--- a/yarn.lock
+++ b/yarn.lock
@ -2412,10 +2412,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@38.0.1":
-  version "38.0.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-38.0.1.tgz#de03c4436cd1b58327f54f57e4248183d681c0f8"
-  integrity sha512-yzV56rGVwhALnLVXsw2LGsFksh7c27BwIQOl2memDfm15VprzX5Fd+u6TpX8TkpFbTTgnYfyhI11W3eKVUYt1g==
+"@elastic/eui@39.0.0":
+  version "39.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-39.0.0.tgz#abac19edd466eee13612d5668e5456961dc813b8"
+  integrity sha512-8sf8sbxjpRxV23dFTwbkaWH6LhWrOlMpdUUMVUC9zd0g5iQLj1IxkxQCeyYM/p++SQFl+1hshAuaH//DCz5Xrw==
  dependencies:
    "@types/chroma-js" "^2.0.0"
    "@types/lodash" "^4.14.160"