[8.x] Upgrade EUI to v95.11.0 (#192756) (#193803)

# Backport This will backport the following commits from `main` to `8.x`: - [Upgrade EUI to v95.11.0 (#192756)](https://github.com/elastic/kibana/pull/192756)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: Cee Chen <constance.chen@elastic.co>
2025-04-23 17:28:26 -04:00 · 2024-09-27 14:17:53 +10:00 · 2024-09-27 14:17:53 +10:00 · 6dfc890eaf
commit 6dfc890eaf
parent 621b19228b
24 changed files with 114 additions and 164 deletions
--- a/package.json
+++ b/package.json
@ -115,7 +115,7 @@
    "@elastic/ecs": "^8.11.1",
    "@elastic/elasticsearch": "^8.15.0",
    "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.10.1",
+    "@elastic/eui": "95.11.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
@ -35,8 +35,9 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiCodeBlockCopy.copy": "Copy",
          "euiCodeBlockFullScreen.fullscreenCollapse": "Collapse",
          "euiCodeBlockFullScreen.fullscreenExpand": "Expand",
-          "euiCollapsedItemActions.allActions": "All actions",
+          "euiCollapsedItemActions.allActions": [Function],
          "euiCollapsedItemActions.allActionsDisabled": "Individual item actions are disabled when rows are being selected.",
+          "euiCollapsedItemActions.allActionsTooltip": "All actions",
          "euiCollapsedNavButton.ariaLabelButtonIcon": [Function],
          "euiCollapsibleNavBeta.ariaLabel": "Site menu",
          "euiCollapsibleNavButton.ariaLabelClose": "Close navigation",
@ -58,6 +59,7 @@ exports[`#start() returns \`Context\` component 1`] = `
          "euiColumnActions.moveLeft": "Move left",
          "euiColumnActions.moveRight": "Move right",
          "euiColumnActions.sort": [Function],
+          "euiColumnActions.unsort": [Function],
          "euiColumnSelector.button": "Columns",
          "euiColumnSelector.dragHandleAriaLabel": "Drag handle",
          "euiColumnSelector.hideAll": "Hide all",
--- 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
@ -163,12 +163,18 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        description: 'ARIA label for a button that enters fullscreen view',
      }
    ),
-    'euiCollapsedItemActions.allActions': i18n.translate(
-      'core.euiCollapsedItemActions.allActions',
+    'euiCollapsedItemActions.allActions': ({ index }: EuiValues) =>
+      i18n.translate('core.euiCollapsedItemActions.allActions', {
+        defaultMessage: 'All actions, row {index}',
+        values: { index },
+        description:
+          'ARIA label for a button that is rendered on multiple table rows, that expands an actions menu',
+      }),
+    'euiCollapsedItemActions.allActionsTooltip': i18n.translate(
+      'core.euiCollapsedItemActions.allActionsTooltip',
      {
        defaultMessage: 'All actions',
-        description:
-          'ARIA label and tooltip content describing a button that expands an actions menu',
+        description: 'Tooltip content describing a button that expands an actions menu',
      }
    ),
    'euiCollapsedItemActions.allActionsDisabled': i18n.translate(
@ -251,6 +257,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        defaultMessage: 'Sort {schemaLabel}',
        values: { schemaLabel },
      }),
+    'euiColumnActions.unsort': ({ schemaLabel }: EuiValues) =>
+      i18n.translate('core.euiColumnActions.unsort', {
+        defaultMessage: 'Unsort {schemaLabel}',
+        values: { schemaLabel },
+      }),
    'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', {
      defaultMessage: 'Move left',
    }),
@ -529,10 +540,10 @@ export const getEuiContextMapping = (): EuiTokensObject => {
        values: { page, pageCount },
        description: 'Screen reader text to describe the size of the data grid',
      }),
-    'euiDataGridCell.position': ({ columnId, row, col }: EuiValues) =>
+    'euiDataGridCell.position': ({ columnName, columnIndex, rowIndex }: EuiValues) =>
      i18n.translate('core.euiDataGridCell.position', {
-        defaultMessage: '{columnId}, column {col}, row {row}',
-        values: { columnId, row, col },
+        defaultMessage: '{columnName}, column {columnIndex}, row {rowIndex}',
+        values: { columnName, columnIndex, rowIndex },
      }),
    'euiDataGridCell.expansionEnterPrompt': i18n.translate(
      'core.euiDataGridCell.expansionEnterPrompt',
--- a/packages/kbn-unified-data-table/src/components/data_table.scss
+++ b/packages/kbn-unified-data-table/src/components/data_table.scss
@ -43,13 +43,16 @@
  .euiDataGridHeaderCell {
    align-items: start;

-    &:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button {
-      height: 100%;
-      align-items: flex-start;
+    .euiPopover[class*='euiDataGridHeaderCell__popover'] {
+      align-self: center;
    }
  }

-  .euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+  .euiDataGrid--bordersHorizontal .euiDataGridHeader {
+    border-top: none;
+  }
+
+  .euiDataGrid--headerUnderline .euiDataGridHeader {
    border-bottom: $euiBorderThin;
  }

@ -93,7 +96,8 @@
  }

  .euiDataGridRowCell__content--autoHeight,
-  .euiDataGridRowCell__content--lineCountHeight {
+  .euiDataGridRowCell__content--lineCountHeight,
+  .euiDataGridHeaderCell__content {
    white-space: pre-wrap;
  }
 }
@ -104,25 +108,6 @@
  min-height: 0;
 }

-// We only truncate if the cell is not a control column.
-.euiDataGridHeader {
-
-  .euiDataGridHeaderCell__content {
-    white-space: pre-wrap;
-  }
-
-  .euiDataGridHeaderCell__popover {
-    flex-grow: 0;
-    flex-basis: auto;
-    width: auto;
-    padding-left: $euiSizeXS;
-  }
-}
-
-.euiDataGridRowCell--numeric {
-  text-align: right;
-}
-
 .euiDataGrid__loading,
 .euiDataGrid__noResults {
  display: flex;
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -87,7 +87,7 @@ 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.5.3': ['Elastic License 2.0'],
-  '@elastic/eui@95.10.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@95.11.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
  'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
  'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
  '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
--- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.scss
+++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.scss
@ -72,11 +72,11 @@
 }

 .kbnDocViewer__fieldsGrid {
-  &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell {
+  &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeader {
    border-top: none;
  }

-  &.euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+  &.euiDataGrid--headerUnderline .euiDataGridHeader {
    border-bottom: $euiBorderThin;
  }

--- a/test/functional/apps/discover/esql/_esql_view.ts
+++ b/test/functional/apps/discover/esql/_esql_view.ts
@ -199,7 +199,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        const cell = await dataGrid.getCellElementExcludingControlColumns(0, 1);
        expect(await cell.getVisibleText()).to.be(' - ');
        expect(await dataGrid.getHeaders()).to.eql([
-          'Select column',
+          "Select columnPress the Enter key to interact with this cell's contents.", // contains screen reader help text
          'Control column',
          'Access to degraded docs',
          'Access to available stacktraces',
--- a/test/functional/services/data_grid.ts
+++ b/test/functional/services/data_grid.ts
@ -34,7 +34,7 @@ export class DataGridService extends FtrService {
    const table = await this.find.byCssSelector('.euiDataGrid');
    const $ = await table.parseDomContent();

-    const columns = $('.euiDataGridHeaderCell__content')
+    const columns = $('.euiDataGridHeaderCell')
      .toArray()
      .map((cell) => $(cell).text());
    const cells = $.findTestSubjects('dataGridRowCell')
@ -59,7 +59,7 @@ export class DataGridService extends FtrService {
    cellDataTestSubj: string
  ): Promise<string[][]> {
    const $ = await element.parseDomContent();
-    const columnNumber = $('.euiDataGridHeaderCell__content').length;
+    const columnNumber = $('.euiDataGridHeaderCell').length;
    const cells = $.findTestSubjects('dataGridRowCell')
      .toArray()
      .map((cell) =>
@ -79,7 +79,7 @@ export class DataGridService extends FtrService {
  public async getHeaders() {
    const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
    const $ = await header.parseDomContent();
-    return $('.euiDataGridHeaderCell__content')
+    return $('.euiDataGridHeaderCell')
      .toArray()
      .map((cell) => $(cell).text());
  }
@ -134,6 +134,7 @@ export class DataGridService extends FtrService {
    let actionButton: WebElementWrapper | undefined;
    await this.retry.try(async () => {
      const cell = await this.getCellElement(rowIndex, columnIndex);
+      await cell.moveMouseTo();
      await cell.click();
      actionButton = await cell.findByTestSubject(selector);
      if (!actionButton) {
@ -154,6 +155,7 @@ export class DataGridService extends FtrService {
      columnIndex,
      'euiDataGridCellExpandButton'
    );
+    await actionButton.moveMouseTo();
    await actionButton.click();
    await this.retry.waitFor('popover to be opened', async () => {
      return await this.testSubjects.exists('euiDataGridExpansionPopover');
@ -197,6 +199,7 @@ export class DataGridService extends FtrService {
   */
  public async clickCellFilterForButton(rowIndex: number = 0, columnIndex: number = 0) {
    const actionButton = await this.getCellActionButton(rowIndex, columnIndex, 'filterForButton');
+    await actionButton.moveMouseTo();
    await actionButton.click();
  }

@ -215,11 +218,13 @@ export class DataGridService extends FtrService {
      controlsCount + columnIndex,
      'filterForButton'
    );
+    await actionButton.moveMouseTo();
    await actionButton.click();
  }

  public async clickCellFilterOutButton(rowIndex: number = 0, columnIndex: number = 0) {
    const actionButton = await this.getCellActionButton(rowIndex, columnIndex, 'filterOutButton');
+    await actionButton.moveMouseTo();
    await actionButton.click();
  }

@ -233,6 +238,7 @@ export class DataGridService extends FtrService {
      controlsCount + columnIndex,
      'filterOutButton'
    );
+    await actionButton.moveMouseTo();
    await actionButton.click();
  }

@ -374,6 +380,7 @@ export class DataGridService extends FtrService {

    if (toggle) {
      await toggle.scrollIntoViewIfNecessary();
+      await toggle.moveMouseTo();
      await toggle.click();
      await this.retry.waitFor('doc viewer to open', async () => {
        return this.isShowingDocViewer();
@ -402,9 +409,7 @@ export class DataGridService extends FtrService {
  }

  public async getHeaderFields(): Promise<string[]> {
-    const result = await this.find.allByCssSelector(
-      '.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content'
-    );
+    const result = await this.find.allByCssSelector('.euiDataGridHeaderCell__content');

    const textArr = [];
    for (const cell of result) {
@ -415,9 +420,7 @@ export class DataGridService extends FtrService {
  }

  public async getControlColumnHeaderFields(): Promise<string[]> {
-    const result = await this.find.allByCssSelector(
-      '.euiDataGridHeaderCell--controlColumn .euiDataGridHeaderCell__content'
-    );
+    const result = await this.find.allByCssSelector('.euiDataGridHeaderCell--controlColumn');

    const textArr = [];
    for (const cell of result) {
@ -628,7 +631,9 @@ export class DataGridService extends FtrService {
    const cellSelector = ['addFilterForValueButton', 'addFilterOutValueButton'].includes(actionName)
      ? `tableDocViewRow-${fieldName}-value`
      : `tableDocViewRow-${fieldName}-name`;
+    await this.testSubjects.moveMouseTo(cellSelector);
    await this.testSubjects.click(cellSelector);
+
    await this.retry.waitFor('grid cell actions to appear', async () => {
      return this.testSubjects.exists(`${actionName}-${fieldName}`);
    });
@ -636,7 +641,10 @@ export class DataGridService extends FtrService {

  public async clickFieldActionInFlyout(fieldName: string, actionName: string): Promise<void> {
    await this.showFieldCellActionInFlyout(fieldName, actionName);
-    await this.testSubjects.click(`${actionName}-${fieldName}`);
+
+    const actionSelector = `${actionName}-${fieldName}`;
+    await this.testSubjects.moveMouseTo(actionSelector);
+    await this.testSubjects.click(actionSelector);
  }

  public async isFieldPinnedInFlyout(fieldName: string): Promise<boolean> {
@ -658,11 +666,14 @@ export class DataGridService extends FtrService {
  }

  public async expandFieldNameCellInFlyout(fieldName: string): Promise<void> {
+    const cellSelector = `tableDocViewRow-${fieldName}-name`;
    const buttonSelector = 'euiDataGridCellExpandButton';
-    await this.testSubjects.click(`tableDocViewRow-${fieldName}-name`);
+    await this.testSubjects.moveMouseTo(cellSelector);
+    await this.testSubjects.click(cellSelector);
    await this.retry.waitFor('grid cell actions to appear', async () => {
      return this.testSubjects.exists(buttonSelector);
    });
+    await this.testSubjects.moveMouseTo(buttonSelector);
    await this.testSubjects.click(buttonSelector);
  }

--- a/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx
+++ b/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx
@ -139,9 +139,9 @@ describe('DataTable', () => {
      wrapper.update();
      expect(
        wrapper
-          .find('[data-test-subj="dataGridRowCell"]')
+          .find('div[data-test-subj="dataGridRowCell"]')
          .at(0)
-          .find('.euiDataGridRowCell__content')
+          .find('div.euiDataGridRowCell__content')
          .childAt(0)
          .text()
      ).toEqual(mockTimelineData[0].ecs.timestamp);
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
@ -141,9 +141,9 @@ describe('DatatableComponent', () => {
    expect(screen.getByLabelText('My fanci metric chart')).toBeInTheDocument();
    expect(screen.getByRole('row')).toBeInTheDocument();
    expect(screen.queryAllByRole('gridcell').map((cell) => cell.textContent)).toEqual([
-      'shoes- a, column 1, row 1',
-      '1588024800000- b, column 2, row 1',
-      '3- c, column 3, row 1',
+      'shoes',
+      '1588024800000',
+      '3',
    ]);
  });

@ -352,8 +352,8 @@ describe('DatatableComponent', () => {
      },
    });
    expect(screen.queryAllByRole('gridcell').map((cell) => cell.textContent)).toEqual([
-      '1588024800000- b, column 1, row 1',
-      '3- c, column 2, row 1',
+      '1588024800000',
+      '3',
    ]);
  });

@ -698,9 +698,9 @@ describe('DatatableComponent', () => {
          .map((cell) => [cell.textContent, cell.style.backgroundColor]);

        expect(cellColors).toEqual([
-          ['shoes- a, column 1, row 1', 'red'],
-          ['1588024800000- b, column 2, row 1', ''],
-          ['3- c, column 3, row 1', ''],
+          ['shoes', 'red'],
+          ['1588024800000', ''],
+          ['3', ''],
        ]);
      });

@ -717,9 +717,9 @@ describe('DatatableComponent', () => {
          .map((cell) => [cell.textContent, cell.style.backgroundColor]);

        expect(cellColors).toEqual([
-          ['shoes- a, column 1, row 1', ''],
-          ['1588024800000- b, column 2, row 1', ''],
-          ['3- c, column 3, row 1', 'red'],
+          ['shoes', ''],
+          ['1588024800000', ''],
+          ['3', 'red'],
        ]);
      });
    });
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.test.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.test.tsx
@ -285,7 +285,7 @@ describe('SLOs Page', () => {
        expect(await screen.findByTestId('compactView')).toBeTruthy();
        fireEvent.click(screen.getByTestId('compactView'));

-        (await screen.findAllByLabelText('All actions')).at(0)?.click();
+        (await screen.findByLabelText('All actions, row 1')).click();

        await waitForEuiPopoverOpen();

@ -311,7 +311,7 @@ describe('SLOs Page', () => {
        });
        expect(await screen.findByTestId('compactView')).toBeTruthy();
        fireEvent.click(screen.getByTestId('compactView'));
-        screen.getAllByLabelText('All actions').at(0)?.click();
+        screen.getByLabelText('All actions, row 1').click();

        await waitForEuiPopoverOpen();

@ -337,7 +337,7 @@ describe('SLOs Page', () => {
        });
        expect(await screen.findByTestId('compactView')).toBeTruthy();
        fireEvent.click(screen.getByTestId('compactView'));
-        screen.getAllByLabelText('All actions').at(0)?.click();
+        screen.getByLabelText('All actions, row 1').click();

        await waitForEuiPopoverOpen();

@ -364,7 +364,7 @@ describe('SLOs Page', () => {

        expect(await screen.findByTestId('compactView')).toBeTruthy();
        fireEvent.click(screen.getByTestId('compactView'));
-        (await screen.findAllByLabelText('All actions')).at(0)?.click();
+        screen.getByLabelText('All actions, row 1').click();

        await waitForEuiPopoverOpen();

@ -396,7 +396,7 @@ describe('SLOs Page', () => {

        expect(await screen.findByTestId('compactView')).toBeTruthy();
        fireEvent.click(screen.getByTestId('compactView'));
-        screen.getAllByLabelText('All actions').at(0)?.click();
+        screen.getByLabelText('All actions, row 1').click();

        await waitForEuiPopoverOpen();

--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx
@ -383,11 +383,7 @@ describe('query tab with unified timeline', () => {

        expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message'));

        await waitFor(() => {
          expect(screen.getByTitle('Move left')).toBeEnabled();
@ -416,11 +412,7 @@ describe('query tab with unified timeline', () => {

        expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-message'));

        await waitFor(() => {
          expect(screen.getByTitle('Remove column')).toBeVisible();
@ -449,16 +441,12 @@ describe('query tab with unified timeline', () => {
          container.querySelector('[data-gridcell-column-id="@timestamp"]')
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-@timestamp'));

        await waitFor(() => {
          expect(screen.getByTitle('Sort Old-New')).toBeVisible();
        });
-        expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+        expect(screen.getByTitle('Unsort New-Old')).toBeVisible();

        useTimelineEventsMock.mockClear();

@ -495,11 +483,7 @@ describe('query tab with unified timeline', () => {
          container.querySelector('[data-gridcell-column-id="host.name"]')
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-host.name'));

        await waitFor(() => {
          expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
@ -554,11 +538,7 @@ describe('query tab with unified timeline', () => {
          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`));

        await waitFor(() => {
          expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
@ -239,11 +239,7 @@ describe('unified timeline', () => {
          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`));

        await waitFor(() => {
          expect(screen.getByTitle('Move left')).toBeEnabled();
@ -278,11 +274,7 @@ describe('unified timeline', () => {
          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`));

        await waitFor(() => {
          expect(screen.getByTitle('Move right')).toBeEnabled();
@ -314,11 +306,7 @@ describe('unified timeline', () => {
          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`));

        // column is currently present in the state
        const currentColumns = getTimelineFromStore(customStore).columns;
@ -363,16 +351,12 @@ describe('unified timeline', () => {
          container.querySelector('[data-gridcell-column-id="@timestamp"]')
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-@timestamp'));

        await waitFor(() => {
          expect(screen.getByTitle('Sort Old-New')).toBeVisible();
        });
-        expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+        expect(screen.getByTitle('Unsort New-Old')).toBeVisible();

        useTimelineEventsMock.mockClear();

@ -404,11 +388,7 @@ describe('unified timeline', () => {
          container.querySelector('[data-gridcell-column-id="host.name"]')
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId('dataGridHeaderCellActionButton-host.name'));

        await waitFor(() => {
          expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
@ -457,11 +437,7 @@ describe('unified timeline', () => {
          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`));

        await waitFor(() => {
          expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
@ -512,11 +488,7 @@ describe('unified timeline', () => {
          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
        ).toBeInTheDocument();

-        fireEvent.click(
-          container.querySelector(
-            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-          ) as HTMLElement
-        );
+        fireEvent.click(screen.getByTestId(`dataGridHeaderCellActionButton-${field.name}`));

        await waitFor(() => {
          expect(screen.getByTitle('Edit data view field')).toBeEnabled();
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -626,7 +626,6 @@
    "core.euiCodeBlockCopy.copy": "Copier",
    "core.euiCodeBlockFullScreen.fullscreenCollapse": "Réduire",
    "core.euiCodeBlockFullScreen.fullscreenExpand": "Développer",
-    "core.euiCollapsedItemActions.allActions": "Toutes les actions",
    "core.euiCollapsedItemActions.allActionsDisabled": "Les actions individuelles sont désactivées lorsque plusieurs lignes sont sélectionnées.",
    "core.euiCollapsedNavButton.ariaLabelButtonIcon": "{title}, menu de navigation rapide",
    "core.euiCollapsibleNavBeta.ariaLabel": "Menu du site",
@ -681,7 +680,7 @@
    "core.euiDataGrid.screenReaderNotice": "Cette cellule contient du contenu interactif.",
    "core.euiDataGridCell.expansionEnterPrompt": "Appuyez sur Entrée pour développer cette cellule.",
    "core.euiDataGridCell.focusTrapEnterPrompt": "Appuyez sur Entrée pour interagir avec le contenu de cette cellule.",
-    "core.euiDataGridCell.position": "{columnId}, colonne {col}, ligne {row}",
+    "core.euiDataGridCell.position": "{columnName}, colonne {columnIndex}, ligne {rowIndex}",
    "core.euiDataGridCellActions.expandButtonTitle": "Cliquez ou appuyez sur Entrée pour interagir avec le contenu de la cellule.",
    "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}. Cliquez pour afficher les actions d'en-tête de colonne",
    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "Pour naviguer dans la liste des actions de la colonne, appuyez sur la touche Tab ou sur les flèches vers le haut et vers le bas.",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -628,7 +628,6 @@
    "core.euiCodeBlockCopy.copy": "コピー",
    "core.euiCodeBlockFullScreen.fullscreenCollapse": "縮小",
    "core.euiCodeBlockFullScreen.fullscreenExpand": "拡張",
-    "core.euiCollapsedItemActions.allActions": "すべてのアクション",
    "core.euiCollapsedItemActions.allActionsDisabled": "行が選択されているときには、個別の項目アクションは無効です。",
    "core.euiCollapsedNavButton.ariaLabelButtonIcon": "{title}、クイックナビゲーションメニュー",
    "core.euiCollapsibleNavBeta.ariaLabel": "サイトメニュー",
@ -683,7 +682,7 @@
    "core.euiDataGrid.screenReaderNotice": "セルにはインタラクティブコンテンツが含まれます。",
    "core.euiDataGridCell.expansionEnterPrompt": "このセルを展開するには、Enterキーを押してください。",
    "core.euiDataGridCell.focusTrapEnterPrompt": "このセルの内容を操作するには、Enterキーを押してください。",
-    "core.euiDataGridCell.position": "{columnId}, 列{col}, 行{row}",
+    "core.euiDataGridCell.position": "{columnName}, 列{columnIndex}, 行{rowIndex}",
    "core.euiDataGridCellActions.expandButtonTitle": "クリックするか enter を押すと、セルのコンテンツとインタラクトできます。",
    "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。クリックすると、列ヘッダーアクションが表示されます",
    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -626,7 +626,6 @@
    "core.euiCodeBlockCopy.copy": "复制",
    "core.euiCodeBlockFullScreen.fullscreenCollapse": "折叠",
    "core.euiCodeBlockFullScreen.fullscreenExpand": "展开",
-    "core.euiCollapsedItemActions.allActions": "所有操作",
    "core.euiCollapsedItemActions.allActionsDisabled": "正选择行时将禁用单个项目操作。",
    "core.euiCollapsedNavButton.ariaLabelButtonIcon": "{title}，快速导航菜单",
    "core.euiCollapsibleNavBeta.ariaLabel": "站点菜单",
@ -681,7 +680,7 @@
    "core.euiDataGrid.screenReaderNotice": "单元格包含交互内容。",
    "core.euiDataGridCell.expansionEnterPrompt": "按 Enter 键展开此单元格。",
    "core.euiDataGridCell.focusTrapEnterPrompt": "按 Enter 键与此单元格的内容进行交互。",
-    "core.euiDataGridCell.position": "{columnId}，列 {col}，行 {row}",
+    "core.euiDataGridCell.position": "{columnName}，列 {columnIndex}，行 {rowIndex}",
    "core.euiDataGridCellActions.expandButtonTitle": "单击或按 Enter 键以便与单元格内容进行交互",
    "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。单击以查看列标题操作",
    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "要在列操作列表中导航，请按 Tab 键或向上和向下箭头键。",
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx
@ -907,8 +907,8 @@ describe('AlertsTableState', () => {
      await waitFor(() => {
        expect(queryByTestId(`dataGridHeaderCell-${AlertsField.uuid}`)).not.toBe(null);
        expect(
-          getByTestId('dataGridHeader')
-            .querySelectorAll('.euiDataGridHeaderCell__content')[2]
+          queryByTestId(`dataGridHeaderCell-${AlertsField.uuid}`)!
+            .querySelector('.euiDataGridHeaderCell__content')!
            .getAttribute('title')
        ).toBe(AlertsField.uuid);
      });
--- a/x-pack/test/functional/apps/lens/group2/table.ts
+++ b/x-pack/test/functional/apps/lens/group2/table.ts
@ -36,7 +36,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120');
      // Remove the sorting
      await retry.try(async () => {
-        await lens.changeTableSortingBy(0, 'none');
+        await lens.changeTableSortingBy(0, 'descending');
        await lens.waitForVisualization();
        expect(await lens.isDatatableHeaderSorted(0)).to.eql(false);
      });
@ -73,7 +73,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120');

      await retry.try(async () => {
-        await lens.changeTableSortingBy(4, 'none');
+        await lens.changeTableSortingBy(4, 'descending');
        await lens.waitForVisualization();
        expect(await lens.isDatatableHeaderSorted(0)).to.eql(false);
      });
--- a/x-pack/test/functional/apps/lens/group2/table_dashboard.ts
+++ b/x-pack/test/functional/apps/lens/group2/table_dashboard.ts
@ -28,7 +28,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
    expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120');
    // Remove the sorting
    await retry.try(async () => {
-      await lens.changeTableSortingBy(0, 'none');
+      await lens.changeTableSortingBy(0, 'ascending');
      await lens.waitForVisualization();
      expect(await lens.isDatatableHeaderSorted(0)).to.eql(false);
    });
--- a/x-pack/test/functional/page_objects/lens_page.ts
+++ b/x-pack/test/functional/page_objects/lens_page.ts
@ -1255,21 +1255,14 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
      );
    },

-    async changeTableSortingBy(colIndex = 0, direction: 'none' | 'ascending' | 'descending') {
+    async changeTableSortingBy(colIndex = 0, direction: 'ascending' | 'descending') {
      const el = await this.getDatatableHeader(colIndex);
      await el.moveMouseTo({ xOffset: 0, yOffset: -16 }); // Prevent the first data row's cell actions from overlapping/intercepting the header click
      const popoverToggle = await el.findByClassName('euiDataGridHeaderCell__button');
      await popoverToggle.click();
-      let buttonEl;
-      if (direction !== 'none') {
-        buttonEl = await find.byCssSelector(
-          `[data-test-subj^="dataGridHeaderCellActionGroup"] [title="Sort ${direction}"]`
-        );
-      } else {
-        buttonEl = await find.byCssSelector(
-          `[data-test-subj^="dataGridHeaderCellActionGroup"] li[class*="selected"] [title^="Sort"]`
-        );
-      }
+      const buttonEl = await find.byCssSelector(
+        `[data-test-subj^="dataGridHeaderCellActionGroup"] [title="Sort ${direction}"]`
+      );
      return buttonEl.click();
    },

--- a/x-pack/test/functional/services/ml/common_data_grid.ts
+++ b/x-pack/test/functional/services/ml/common_data_grid.ts
@ -37,16 +37,14 @@ export function MachineLearningCommonDataGridProvider({ getService }: FtrProvide
      // Get the content of each cell and divide them up into rows.
      // Virtualized cells outside the view area are not present in the DOM until they
      // are scroilled into view, so we're limiting the number of parsed columns.
-      // To determine row and column of a cell, we're utilizing the screen reader
-      // help text, which enumerates the rows and columns 1-based.
+      // To determine row and column of a cell, we're utilizing EUI's data attributes
      const cells = $.findTestSubjects('dataGridRowCell')
        .toArray()
        .map((cell) => {
          const cellText = $(cell).text();
-          const pattern = /^(.*)-(?:.*), column (\d+), row (\d+)$/;
-          const matches = cellText.match(pattern);
-          expect(matches).to.not.eql(null, `Cell text should match pattern '${pattern}'`);
-          return { text: matches![1], column: Number(matches![2]), row: Number(matches![3]) };
+          const columnData = $(cell).attr('data-gridcell-column-index');
+          const rowData = $(cell).attr('data-gridcell-row-index');
+          return { text: cellText, column: Number(columnData) + 1, row: Number(rowData) };
        })
        .filter((cell) =>
          maxColumnsToParse !== undefined ? cell?.column <= maxColumnsToParse : false
@ -150,9 +148,9 @@ export function MachineLearningCommonDataGridProvider({ getService }: FtrProvide

    async assertColumnSelectorsSwitchState(expectedState: boolean) {
      await retry.tryForTime(5 * 1000, async () => {
-        const visibilityToggles = await (
-          await find.byClassName('euiDataGrid__controlScroll')
-        ).findAllByCssSelector('[role="switch"]');
+        const visibilityToggles = await find.allByCssSelector(
+          '.euiDataGridColumnSelector__item [role="switch"]'
+        );

        await asyncForEachWithLimit(visibilityToggles, 1, async (toggle) => {
          const checked = (await toggle.getAttribute('aria-checked')) === 'true';
--- a/x-pack/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/threat_intelligence/common.ts
@ -109,6 +109,7 @@ export const openBarchartPopoverMenu = () => {
 export const clickAction = (propertySelector: string, rowIndex: number, actionSelector: string) => {
  recurse(
    () => {
+      cy.get(propertySelector).eq(rowIndex).click(); // Triggers scrollIntoView
      cy.get(propertySelector).eq(rowIndex).realHover();
      return cy.get(actionSelector).first();
    },
--- a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts
+++ b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts
@ -202,7 +202,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
        const cell = await dataGrid.getCellElementExcludingControlColumns(0, 1);
        expect(await cell.getVisibleText()).to.be(' - ');
        expect(await dataGrid.getHeaders()).to.eql([
-          'Select column',
+          "Select columnPress the Enter key to interact with this cell's contents.", // contains screen reader help text
          'Control column',
          'Access to degraded docs',
          'Access to available stacktraces',
--- a/yarn.lock
+++ b/yarn.lock
@ -1741,10 +1741,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@95.10.1":
-  version "95.10.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.10.1.tgz#f3fb356ad49ba45e42981e39748693ba392567fe"
-  integrity sha512-1kqyx/NfiQE/bKMf1E3uJEpYZnQnPBrI5zO0l2FB+fs7Naf7wT7zq1VFRzNLn/r1x6mnou8wJ+VlouHCI+prLw==
+"@elastic/eui@95.11.0":
+  version "95.11.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.11.0.tgz#40e8124ac54c625ba7160cb84a378507abdeaf40"
+  integrity sha512-O688EbhrgSrV9j54mnK4xLyhv+imkBv5ti7isqLxJtd0L7Fe2A1d6EaA11Qv5plOwwC+cGsrkrDnlSqi1MtNoQ==
  dependencies:
    "@hello-pangea/dnd" "^16.6.0"
    "@types/lodash" "^4.14.202"