Upgrade EUI to v76.3.0 (#153341)

## Summary eui@76.0.2 ⏩ eui@76.3.0 ## [`76.3.0`](https://github.com/elastic/eui/tree/v76.3.0) - Updated `EuiSkipLink`'s `fallbackDestination` prop to support an array of query selector strings ([#6646](https://github.com/elastic/eui/pull/6646)) **Bug fixes** - Fixed `EuiFlyout` to preserve body scrollbar width on open ([#6645](https://github.com/elastic/eui/pull/6645)) - Fixed `EuiImage`'s full screen mode to not scroll jump & to preserve body scrollbar width on open ([#6645](https://github.com/elastic/eui/pull/6645)) - Fixed `EuiCodeBlock`'s full screen mode to not scroll jump & to preserve body scrollbar width on open ([#6645](https://github.com/elastic/eui/pull/6645)) ## [`76.2.0`](https://github.com/elastic/eui/tree/v76.2.0) - Added new `renderCustomGridBody` escape hatch rendering prop to `EuiDataGrid` ([#6624](https://github.com/elastic/eui/pull/6624)) **Bug fixes** - Fixed visual listbox focus ring bug on non-searchable `EuiSelectable`s ([#6637](https://github.com/elastic/eui/pull/6637)) - Added a legacy `alert` alias for the `warning` `EuiIcon` type ([#6640](https://github.com/elastic/eui/pull/6640)) - Fixed a type definition incorrectly coming from a dev dependency, which was causing issues for some consuming projects ([#6643](https://github.com/elastic/eui/pull/6643)) ## [`76.1.0`](https://github.com/elastic/eui/tree/v76.1.0) - Added more detailed screen reader instructions to `EuiSelectable`, `EuiSuggest`, `EuiSelectableTemplateSitewide`, `EuiRange`, and `EuiDualRange`. ([#6589](https://github.com/elastic/eui/pull/6589)) - Added new `placeholder` prop to `EuiSuperSelect` ([#6630](https://github.com/elastic/eui/pull/6630)) - Added new `setCellPopoverProps` parameter callback to `EuiDataGrid`'s `renderCellPopover` prop ([#6632](https://github.com/elastic/eui/pull/6632)) **Bug fixes** - Fixed an ARIA attribute in `EuiSelectableList` ([#6589](https://github.com/elastic/eui/pull/6589)) - Fixed `EuiSelectable` to no longer show active selection state or respond to the Up/Down arrow keys when focus is inside the selectable container, but not on the searchbox or listbox. ([#6631](https://github.com/elastic/eui/pull/6631)) --------- Co-authored-by: Tiago Costa <tiago.costa@elastic.co>
2025-06-27 18:51:07 -04:00 · 2023-03-23 16:25:12 -05:00 · 2023-03-23 16:25:12 -05:00 · 6d55dd9fdd
commit 6d55dd9fdd
parent 3456ddd43c
18 changed files with 73 additions and 57 deletions
--- a/package.json
+++ b/package.json
@ -96,7 +96,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": "76.0.2",
+    "@elastic/eui": "76.3.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "1.2.1",
    "@elastic/numeral": "^2.5.1",
--- 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
@ -130,6 +130,7 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiDisplaySelector.lineCountLabel": "Lines per row",
          "euiDisplaySelector.resetButtonText": "Reset to default",
          "euiDisplaySelector.rowHeightLabel": "Row height",
+          "euiDualRange.sliderScreenReaderInstructions": "You are in a custom range slider. Use the Up and Down arrow keys to change the minimum value. Press Tab to interact with the maximum value.",
          "euiErrorBoundary.error": "Error",
          "euiFieldPassword.maskPassword": "Mask password",
          "euiFieldPassword.showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
@ -271,6 +272,7 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiQuickSelect.unitLabel": "Time unit",
          "euiQuickSelect.valueLabel": "Time value",
          "euiQuickSelectPopover.buttonLabel": "Date quick select",
+          "euiRange.sliderScreenReaderInstructions": "You are in a custom range slider. Use the Up and Down arrow keys to change the value.",
          "euiRecentlyUsed.legend": "Recently used date ranges",
          "euiRefreshInterval.fullDescriptionOff": [Function],
          "euiRefreshInterval.fullDescriptionOn": [Function],
@ -289,7 +291,7 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiSelectable.noAvailableOptions": "No options available",
          "euiSelectable.noMatchingOptions": [Function],
          "euiSelectable.placeholderName": "Filter options",
-          "euiSelectable.screenReaderInstructions": "Use up and down arrows to move focus over options. Enter to select. Escape to collapse options.",
+          "euiSelectable.screenReaderInstructions": "Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.",
          "euiSelectable.searchResults": [Function],
          "euiSelectableListItem.checkedOption": "Checked option.",
          "euiSelectableListItem.checkedOptionInstructions": "To uncheck this option, press enter.",
@ -327,8 +329,8 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiSuggest.stateUnchanged": "State: unchanged.",
          "euiSuggest.stateUnsaved": "State: unsaved.",
          "euiSuggest.stateUnsavedTooltip": "Changes have not been saved.",
+          "euiSuperSelect.ariaLabel": "Select listbox",
          "euiSuperSelect.screenReaderAnnouncement": "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.",
-          "euiSuperSelectControl.selectAnOption": [Function],
          "euiSuperUpdateButton.cannotUpdateTooltip": "Cannot update",
          "euiSuperUpdateButton.clickToApplyTooltip": "Click to apply",
          "euiSuperUpdateButton.refreshButtonLabel": "Refresh",
--- 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
@ -1475,7 +1475,7 @@ export const getEuiContextMapping = (): EuiTokensObject => {
      'core.euiSelectable.screenReaderInstructions',
      {
        defaultMessage:
-          'Use up and down arrows to move focus over options. Enter to select. Escape to collapse options.',
+          'Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.',
      }
    ),
    'euiSelectable.searchResults': ({ resultsLength }: EuiValues) =>
@ -1664,11 +1664,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
          'You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close.',
      }
    ),
-    'euiSuperSelectControl.selectAnOption': ({ selectedValue }: EuiValues) =>
-      i18n.translate('core.euiSuperSelectControl.selectAnOption', {
-        defaultMessage: 'Select an option: {selectedValue}, is selected',
-        values: { selectedValue },
-      }),
    'euiSuperUpdateButton.cannotUpdateTooltip': i18n.translate(
      'core.euiSuperUpdateButton.cannotUpdateTooltip',
      {
@ -1812,5 +1807,25 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        defaultMessage: 'Loaded {contentAriaLabel}',
        values: { contentAriaLabel },
      }),
+    'euiDualRange.sliderScreenReaderInstructions': i18n.translate(
+      'core.euiDualRange.sliderScreenReaderInstructions',
+      {
+        defaultMessage:
+          'You are in a custom range slider. Use the Up and Down arrow keys to change the minimum value. Press Tab to interact with the maximum value.',
+        description: 'Screen reader instructions for changing dual range slider values.',
+      }
+    ),
+    'euiRange.sliderScreenReaderInstructions': i18n.translate(
+      'core.euiRange.sliderScreenReaderInstructions',
+      {
+        defaultMessage:
+          'You are in a custom range slider. Use the Up and Down arrow keys to change the value.',
+        description: 'Screen reader instructions for changing range slider values.',
+      }
+    ),
+    'euiSuperSelect.ariaLabel': i18n.translate('core.euiSuperSelect.ariaLabel', {
+      defaultMessage: 'Select listbox',
+      description: 'Accessible label for Super Selects without a visible label.',
+    }),
  };
 };
--- 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@76.0.2': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@76.3.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/test/tsconfig.json
+++ b/test/tsconfig.json
@ -4,9 +4,10 @@
    "outDir": "target/types",
    "types": [
      "node",
+      "cheerio",
      "@emotion/react/types/css-prop",
      "@kbn/ambient-ui-types",
-      "@kbn/ambient-ftr-types",
+      "@kbn/ambient-ftr-types"
    ]
  },
  "include": [
@ -16,13 +17,9 @@
    "api_integration/apis/logstash/pipeline/fixtures/*.json",
    "api_integration/apis/logstash/pipelines/fixtures/*.json",
    "api_integration/apis/telemetry/fixtures/*.json",
-    "api_integration/apis/telemetry/fixtures/*.json",
-  ],
-  "exclude": [
-    "target/**/*",
-    "*/plugins/**/*",
-    "plugins/**/*",
+    "api_integration/apis/telemetry/fixtures/*.json"
  ],
+  "exclude": ["target/**/*", "*/plugins/**/*", "plugins/**/*"],
  "kbn_references": [
    "@kbn/core",
    { "path": "../src/setup_node_env/tsconfig.json" },
@ -68,6 +65,6 @@
    "@kbn/safer-lodash-set",
    "@kbn/utility-types",
    "@kbn/dev-proc-runner",
-    "@kbn/enterprise-search-plugin",
+    "@kbn/enterprise-search-plugin"
  ]
 }
--- a/x-pack/plugins/apm/public/components/alerting/rule_types/transaction_duration_anomaly_rule_type/select_anomaly_severity.test.tsx
+++ b/x-pack/plugins/apm/public/components/alerting/rule_types/transaction_duration_anomaly_rule_type/select_anomaly_severity.test.tsx
@ -24,7 +24,10 @@ describe('SelectAnomalySeverity', () => {
      />,
      { wrapper: Wrapper }
    );
-    const button = (await result.findAllByText('critical'))[1];
+
+    // SR-only text 'Critical, is selected'
+    // was removed here: https://github.com/elastic/eui/pull/6630#discussion_r1123655995
+    const button = await result.findByText('critical');

    button.click();

--- a/x-pack/plugins/cases/public/components/all_cases/severity_filter.test.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/severity_filter.test.tsx
@ -34,8 +34,9 @@ describe('Severity form field', () => {
  // default to LOW in this test configuration
  it('defaults to the correct value', () => {
    const result = appMockRender.render(<SeverityFilter {...props} />);
-    // two items. one for the popover one for the selected field
-    expect(result.getAllByTestId('case-severity-filter-low').length).toBe(2);
+    // Popver span and ID was removed here:
+    // https://github.com/elastic/eui/pull/6630#discussion_r1123655995
+    expect(result.getAllByTestId('case-severity-filter-low').length).toBe(1);
  });

  it('selects the correct value when changed', async () => {
--- a/x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx
+++ b/x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx
@ -235,7 +235,7 @@ describe('ConnectorsDropdown', () => {
        .find('[data-test-subj="dropdown-connectors"]')
        .first()
        .text()
-        .includes('My SN connector, is selected')
+        .includes('My SN connector')
    ).toBeTruthy();
  });

--- a/x-pack/plugins/cases/public/components/create/form_context.test.tsx
+++ b/x-pack/plugins/cases/public/components/create/form_context.test.tsx
@ -359,8 +359,9 @@ describe('Create case', () => {
      await waitForFormToRender(screen);

      expect(screen.getByTestId('caseSeverity')).toBeTruthy();
-      // there should be 2 low elements. one for the options popover and one for the displayed one.
-      expect(screen.getAllByTestId('case-severity-selection-low').length).toBe(2);
+      // ID removed for options dropdown here:
+      // https://github.com/elastic/eui/pull/6630#discussion_r1123657852
+      expect(screen.getAllByTestId('case-severity-selection-low').length).toBe(1);

      await waitForComponentToUpdate();
    });
--- a/x-pack/plugins/cases/public/components/create/severity.test.tsx
+++ b/x-pack/plugins/cases/public/components/create/severity.test.tsx
@ -54,8 +54,9 @@ describe('Severity form field', () => {
      </MockHookWrapperComponent>
    );
    expect(result.getByTestId('caseSeverity')).toBeTruthy();
-    // two items. one for the popover one for the selected field
-    expect(result.getAllByTestId('case-severity-selection-low').length).toBe(2);
+    // ID removed for options dropdown here:
+    // https://github.com/elastic/eui/pull/6630#discussion_r1123657852
+    expect(result.getAllByTestId('case-severity-selection-low').length).toBe(1);
  });

  it('selects the correct value when changed', async () => {
--- a/x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.test.tsx
+++ b/x-pack/plugins/ml/public/application/components/controls/select_severity/select_severity.test.tsx
@ -37,7 +37,7 @@ describe('SelectSeverity', () => {
    );

    // assert initial state
-    expect(getAllByText('warning')).toHaveLength(2);
+    expect(getAllByText('warning')).toHaveLength(1);
    expect(queryByText('minor')).not.toBeInTheDocument();
    expect(queryByText('major')).not.toBeInTheDocument();
    expect(queryByText('critical')).not.toBeInTheDocument();
@ -48,7 +48,7 @@ describe('SelectSeverity', () => {
    });

    // assert open popover
-    expect(getAllByText('warning')).toHaveLength(3);
+    expect(getAllByText('warning')).toHaveLength(2);
    expect(getAllByText('minor')).toHaveLength(1);
    expect(getAllByText('major')).toHaveLength(1);
    expect(getAllByText('critical')).toHaveLength(1);
@ -63,7 +63,7 @@ describe('SelectSeverity', () => {
    await waitFor(() => {
      expect(queryByText('warning')).not.toBeInTheDocument();
      expect(queryByText('minor')).not.toBeInTheDocument();
-      expect(getAllByText('major')).toHaveLength(2);
+      expect(getAllByText('major')).toHaveLength(1);
      expect(queryByText('critical')).not.toBeInTheDocument();
    });
  });
--- a/x-pack/plugins/observability/e2e/journeys/step_duration.journey.ts
+++ b/x-pack/plugins/observability/e2e/journeys/step_duration.journey.ts
@ -63,7 +63,7 @@ journey('Exploratory view', async ({ page, params }) => {
    await page.click('[aria-label="Remove report metric"]');
    await page.click('button:has-text("Select report metric")');
    await page.click('button:has-text("Step duration")');
-    await page.click('text=Select an option: Monitor type, is selectedMonitor type >> button');
+    await page.click('button[data-test-subj="seriesBreakdown"]:has-text("Monitor type")');
    await page.click('button[role="option"]:has-text("Step name")');
    await page.click('.euiComboBox__inputWrap');
    await page.click(
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/operation_type_select.test.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/operation_type_select.test.tsx
@ -14,7 +14,9 @@ describe('OperationTypeSelect', function () {
  it('should render properly', function () {
    render(<OperationTypeSelect seriesId={0} series={mockUxSeries} />);

-    screen.getByText('Select an option: , is selected');
+    // SR-only text 'Select an option: , is selected'
+    // was removed here: https://github.com/elastic/eui/pull/6630#discussion_r1123655995
+    screen.getByRole('button');
  });

  it('should display selected value', function () {
--- a/x-pack/plugins/synthetics/e2e/journeys/synthetics/management_list.journey.ts
+++ b/x-pack/plugins/synthetics/e2e/journeys/synthetics/management_list.journey.ts
@ -66,25 +66,22 @@ journey(`MonitorManagementList`, async ({ page, params }) => {
    await page.click('[aria-label="expands filter group for Type filter"]');
  });

-  step(
-    'Click [aria-label="Use up and down arrows to move focus over options. Enter to select. Escape to collapse options."] >> text="Journey / Page"',
-    async () => {
-      await page.click(
-        '[aria-label="Use up and down arrows to move focus over options. Enter to select. Escape to collapse options."] >> text="Journey / Page"'
-      );
-      await page.click('[aria-label="Apply the selected filters for Type"]');
-      expect(page.url()).toBe(`${pageBaseUrl}?monitorTypes=%5B%22browser%22%5D`);
-      await page.click('[placeholder="Search by name, url, host, tag, project or location"]');
-      await Promise.all([
-        page.waitForNavigation({
-          url: `${pageBaseUrl}?monitorTypes=%5B%22browser%22%5D&query=3`,
-        }),
-        page.fill('[placeholder="Search by name, url, host, tag, project or location"]', '3'),
-      ]);
-      await page.click('text=1-1');
-      await page.waitForSelector('text=Showing 1-1 of 1 Configuration');
-    }
-  );
+  step('Click listbox option >> text="Journey / Page"', async () => {
+    // Refactored the aria-label in https://github.com/elastic/eui/pull/6589
+    // to an aria-describedby so it would be announced on EuiSelectable focus.
+    await page.click('span >> text="Journey / Page"');
+    await page.click('[aria-label="Apply the selected filters for Type"]');
+    expect(page.url()).toBe(`${pageBaseUrl}?monitorTypes=%5B%22browser%22%5D`);
+    await page.click('[placeholder="Search by name, url, host, tag, project or location"]');
+    await Promise.all([
+      page.waitForNavigation({
+        url: `${pageBaseUrl}?monitorTypes=%5B%22browser%22%5D&query=3`,
+      }),
+      page.fill('[placeholder="Search by name, url, host, tag, project or location"]', '3'),
+    ]);
+    await page.click('text=1-1');
+    await page.waitForSelector('text=Showing 1-1 of 1 Configuration');
+  });

  step('when no results appears', async () => {
    await searchBarInput.click();
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -610,7 +610,6 @@
    "core.euiStepStrings.simpleWarning": "L'étape {number} comporte des avertissements",
    "core.euiStepStrings.step": "Étape {number} : {title}",
    "core.euiStepStrings.warning": "L'étape {number} : {title} comporte des avertissements",
-    "core.euiSuperSelectControl.selectAnOption": "Choisir une option : {selectedValue} est sélectionné",
    "core.euiTableHeaderCell.titleTextWithDesc": "{innerText}; {description}",
    "core.euiTablePagination.rowsPerPageOption": "{rowsPerPage} lignes",
    "core.euiTourStepIndicator.ariaLabel": "Étape {number} {status}",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -610,7 +610,6 @@
    "core.euiStepStrings.simpleWarning": "ステップ{number}には警告があります",
    "core.euiStepStrings.step": "ステップ{number}：{title}",
    "core.euiStepStrings.warning": "ステップ{number}：{title}には警告があります",
-    "core.euiSuperSelectControl.selectAnOption": "オプションの選択：{selectedValue}件を選択済み",
    "core.euiTableHeaderCell.titleTextWithDesc": "{innerText}; {description}",
    "core.euiTablePagination.rowsPerPageOption": "{rowsPerPage}行",
    "core.euiTourStepIndicator.ariaLabel": "ステップ{number}{status}",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -610,7 +610,6 @@
    "core.euiStepStrings.simpleWarning": "第 {number} 步有警告",
    "core.euiStepStrings.step": "第 {number} 步：{title}",
    "core.euiStepStrings.warning": "第 {number} 步：{title} 有警告",
-    "core.euiSuperSelectControl.selectAnOption": "选择选项：{selectedValue} 已选",
    "core.euiTableHeaderCell.titleTextWithDesc": "{innerText}; {description}",
    "core.euiTablePagination.rowsPerPageOption": "{rowsPerPage} 行",
    "core.euiTourStepIndicator.ariaLabel": "第 {number} 步{status}",
--- a/yarn.lock
+++ b/yarn.lock
@ -1543,10 +1543,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@76.0.2":
-  version "76.0.2"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-76.0.2.tgz#5b99730de10785167b4ab98fcfdb8717018343ce"
-  integrity sha512-HB6HyjkWQ6akYBcIWl9vGenONpymP3q8cYUui/g4DS3/WPUp8R0jV/zEryjlJ5HyJ4Vp3THDoKtCmIEVy+wZvg==
+"@elastic/eui@76.3.0":
+  version "76.3.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-76.3.0.tgz#65ab0d106a6da4ed962454c59148a9743f61f1e4"
+  integrity sha512-faSemLNfRvOcNFRYk6t7f9sep8ekOawppEGs2opKiSPDBefd5JNawMzluHYpnmIJuHqlCRVjP/Ph6yWvJwWfQg==
  dependencies:
    "@types/chroma-js" "^2.0.0"
    "@types/lodash" "^4.14.160"