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](elastic/eui#6646))

**Bug fixes**

- Fixed `EuiFlyout` to preserve body scrollbar width on open
([#6645](elastic/eui#6645))
- Fixed `EuiImage`'s full screen mode to not scroll jump & to preserve
body scrollbar width on open
([#6645](elastic/eui#6645))
- Fixed `EuiCodeBlock`'s full screen mode to not scroll jump & to
preserve body scrollbar width on open
([#6645](elastic/eui#6645))

## [`76.2.0`](https://github.com/elastic/eui/tree/v76.2.0)

- Added new `renderCustomGridBody` escape hatch rendering prop to
`EuiDataGrid` ([#6624](elastic/eui#6624))

**Bug fixes**

- Fixed visual listbox focus ring bug on non-searchable `EuiSelectable`s
([#6637](elastic/eui#6637))
- Added a legacy `alert` alias for the `warning` `EuiIcon` type
([#6640](elastic/eui#6640))
- Fixed a type definition incorrectly coming from a dev dependency,
which was causing issues for some consuming projects
([#6643](elastic/eui#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](elastic/eui#6589))
- Added new `placeholder` prop to `EuiSuperSelect`
([#6630](elastic/eui#6630))
- Added new `setCellPopoverProps` parameter callback to `EuiDataGrid`'s
`renderCellPopover` prop
([#6632](elastic/eui#6632))

**Bug fixes**

- Fixed an ARIA attribute in `EuiSelectableList`
([#6589](elastic/eui#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](elastic/eui#6631))

---------

Co-authored-by: Tiago Costa <tiago.costa@elastic.co>

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

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

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

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

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();
 

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 () => {

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();
   });
 

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();
     });

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 () => {

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();
     });
   });

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(

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 () {

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();

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

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

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

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"