Bumping EUI to 38.0.1

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.20",
     "@elastic/ems-client": "7.15.0",
-    "@elastic/eui": "37.6.0",
+    "@elastic/eui": "38.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/maki": "6.3.0",

src/core/public/chrome/ui/header/header.test.tsx

@@ -15,10 +15,6 @@ import { applicationServiceMock } from '../../../mocks';
 import { Header } from './header';
 import { ChromeBreadcrumbsAppendExtension } from '../../types';
 
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
-  htmlIdGenerator: () => () => 'mockId',
-}));
-
 function mockProps() {
   const http = httpServiceMock.createSetupContract({ basePath: '/test' });
   const application = applicationServiceMock.createInternalStartContract();

src/dev/license_checker/config.ts

@@ -75,7 +75,7 @@ export const LICENSE_OVERRIDES = {
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '[email protected]': ['(GPL-2.0 OR MIT)'], // GPL-2.0* https://github.com/taozhi8833998/node-sql-parser
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@37.6.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@38.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
 
   // TODO can be removed if the https://github.com/jindw/xmldom/issues/239 is released
   '[email protected]': ['MIT'],

test/functional/apps/dashboard/dashboard_clone.ts

@@ -40,7 +40,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.loadSavedDashboard(clonedDashboardName);
       await retry.try(async () => {
         const panelTitles = await PageObjects.dashboard.getPanelTitles();
-        expect(panelTitles).to.eql(PageObjects.dashboard.getTestVisualizationNames());
+        const visiblePanelTitles = panelTitles.map((title) => title.split('\n')[1]);
+        expect(visiblePanelTitles).to.eql(PageObjects.dashboard.getTestVisualizationNames());
       });
     });
 

test/functional/apps/dashboard/dashboard_options.ts

@@ -18,6 +18,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   describe('dashboard data-shared attributes', () => {
     let originalTitles: string[] = [];
+    let originalAccessibleTitles: string[] = [];
 
     before(async () => {
       await esArchiver.load('test/functional/fixtures/es_archiver/dashboard/current/kibana');
@@ -28,22 +29,30 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.dashboard.preserveCrossAppState();
       await PageObjects.dashboard.loadSavedDashboard('few panels');
       await PageObjects.dashboard.switchToEditMode();
-      originalTitles = await PageObjects.dashboard.getPanelTitles();
+      originalTitles = await PageObjects.dashboard.getVisiblePanelTitles();
+      originalAccessibleTitles = await PageObjects.dashboard.getPanelTitles();
     });
 
     it('should be able to hide all panel titles', async () => {
       await PageObjects.dashboard.checkHideTitle();
       await retry.try(async () => {
-        const titles = await PageObjects.dashboard.getPanelTitles();
-        expect(titles[0]).to.eql('');
+        const hiddenTitles = await PageObjects.dashboard.getVisiblePanelTitles();
+        expect(hiddenTitles[0]).to.eql('');
       });
     });
 
     it('should be able to unhide all panel titles', async () => {
       await PageObjects.dashboard.checkHideTitle();
       await retry.try(async () => {
-        const titles = await PageObjects.dashboard.getPanelTitles();
-        expect(titles[0]).to.eql(originalTitles[0]);
+        const visibleTitles = await PageObjects.dashboard.getVisiblePanelTitles();
+        expect(visibleTitles[0]).to.eql(originalTitles[0]);
+      });
+    });
+
+    it('should always present accessible labels', async () => {
+      await retry.try(async () => {
+        const accessibleTitles = await PageObjects.dashboard.getPanelTitles();
+        expect(accessibleTitles[0]).to.eql(originalAccessibleTitles[0]);
       });
     });
   });

test/functional/apps/dashboard/data_shared_attributes.ts

@@ -55,7 +55,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('should have panels with expected data-shared-item title', async () => {
       await retry.try(async () => {
         const sharedData = await PageObjects.dashboard.getPanelSharedItemData();
-        originalPanelTitles = await PageObjects.dashboard.getPanelTitles();
+        originalPanelTitles = await PageObjects.dashboard.getVisiblePanelTitles();
         expect(sharedData.map((item) => item.title)).to.eql(originalPanelTitles);
       });
     });

test/functional/apps/dashboard/edit_embeddable_redirects.ts

@@ -49,7 +49,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const newPanelCount = await PageObjects.dashboard.getPanelCount();
       expect(newPanelCount).to.eql(originalPanelCount);
       const titles = await PageObjects.dashboard.getPanelTitles();
-      expect(titles.indexOf(newTitle)).to.not.be(-1);
+      const visibleTitles = titles.map((title) => title.split('\n')[1]);
+      expect(visibleTitles.indexOf(newTitle)).to.not.be(-1);
     });
 
     it('redirects via save as button after edit, adding a new panel', async () => {
@@ -66,7 +67,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const newPanelCount = await PageObjects.dashboard.getPanelCount();
       expect(newPanelCount).to.eql(originalPanelCount + 1);
       const titles = await PageObjects.dashboard.getPanelTitles();
-      expect(titles.indexOf(newTitle)).to.not.be(-1);
+      const visibleTitles = titles.map((title) => title.split('\n')[1]);
+      expect(visibleTitles.indexOf(newTitle)).to.not.be(-1);
     });
 
     it('loses originatingApp connection after save as when redirectToOrigin is false', async () => {

test/functional/apps/dashboard/panel_cloning.ts

@@ -35,17 +35,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('clones a panel', async () => {
-      const initialPanelTitles = await PageObjects.dashboard.getPanelTitles();
+      const initialPanelTitles = await PageObjects.dashboard.getVisiblePanelTitles();
       await dashboardPanelActions.clonePanelByTitle(PIE_CHART_VIS_NAME);
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
-      const postPanelTitles = await PageObjects.dashboard.getPanelTitles();
+      const postPanelTitles = await PageObjects.dashboard.getVisiblePanelTitles();
       expect(postPanelTitles.length).to.equal(initialPanelTitles.length + 1);
-    });
-
-    it('appends a clone title tag', async () => {
-      const panelTitles = await PageObjects.dashboard.getPanelTitles();
-      expect(panelTitles[1]).to.equal(PIE_CHART_VIS_NAME + ' (copy)');
+      expect(postPanelTitles[1]).to.equal(PIE_CHART_VIS_NAME + ' (copy)');
     });
 
     it('retains original panel dimensions', async () => {
@@ -54,12 +50,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('gives a correct title to the clone of a clone', async () => {
-      const initialPanelTitles = await PageObjects.dashboard.getPanelTitles();
+      const initialPanelTitles = await PageObjects.dashboard.getVisiblePanelTitles();
       const clonedPanelName = initialPanelTitles[initialPanelTitles.length - 1];
       await dashboardPanelActions.clonePanelByTitle(clonedPanelName);
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
-      const postPanelTitles = await PageObjects.dashboard.getPanelTitles();
+      const postPanelTitles = await PageObjects.dashboard.getVisiblePanelTitles();
       expect(postPanelTitles.length).to.equal(initialPanelTitles.length + 1);
       expect(postPanelTitles[postPanelTitles.length - 1]).to.equal(
         PIE_CHART_VIS_NAME + ' (copy 1)'

test/functional/apps/dashboard/panel_replacing.ts

@@ -50,8 +50,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await dashboardReplacePanel.replaceEmbeddable(AREA_CHART_VIS_NAME);
       await PageObjects.header.waitUntilLoadingHasFinished();
       const panelTitles = await PageObjects.dashboard.getPanelTitles();
-      expect(panelTitles.length).to.be(2);
-      expect(panelTitles[0]).to.be(AREA_CHART_VIS_NAME);
+      const visiblePanelTitles = panelTitles.map((panelTitle) => panelTitle.split('\n')[1]);
+      expect(visiblePanelTitles.length).to.be(2);
+      expect(visiblePanelTitles[0]).to.be(AREA_CHART_VIS_NAME);
       const newDimensions = await PageObjects.dashboard.getPanelDimensions();
       expect(intialDimensions![0]).to.eql(newDimensions[0]);
     });
@@ -64,8 +65,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
       const panelTitles = await PageObjects.dashboard.getPanelTitles();
-      expect(panelTitles.length).to.be(2);
-      expect(panelTitles[0]).to.be(AREA_CHART_VIS_NAME);
+      const visiblePanelTitles = panelTitles.map((title) => title.split('\n')[1]);
+      expect(visiblePanelTitles.length).to.be(2);
+      expect(visiblePanelTitles[0]).to.be(AREA_CHART_VIS_NAME);
     });
 
     it('replaced panel with saved search', async () => {
@@ -83,7 +85,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await dashboardReplacePanel.replaceEmbeddable(replacedSearch, 'search');
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
-      const panelTitles = await PageObjects.dashboard.getPanelTitles();
+      const panelTitles = await PageObjects.dashboard.getVisiblePanelTitles();
       expect(panelTitles.length).to.be(2);
       expect(panelTitles[0]).to.be(replacedSearch);
     });

test/functional/apps/discover/_data_grid.ts

@@ -39,19 +39,19 @@ export default function ({
       const getTitles = async () =>
         (await testSubjects.getVisibleText('dataGridHeader')).replace(/\s|\r?\n|\r/g, ' ');
 
-      expect(await getTitles()).to.be('Time (@timestamp) Document');
+      expect(await getTitles()).to.be('Control column Select column Time (@timestamp) Document');
 
       await PageObjects.discover.clickFieldListItemAdd('bytes');
-      expect(await getTitles()).to.be('Time (@timestamp) bytes');
+      expect(await getTitles()).to.be('Control column Select column Time (@timestamp) bytes');
 
       await PageObjects.discover.clickFieldListItemAdd('agent');
-      expect(await getTitles()).to.be('Time (@timestamp) bytes agent');
+      expect(await getTitles()).to.be('Control column Select column Time (@timestamp) bytes agent');
 
       await PageObjects.discover.clickFieldListItemRemove('bytes');
-      expect(await getTitles()).to.be('Time (@timestamp) agent');
+      expect(await getTitles()).to.be('Control column Select column Time (@timestamp) agent');
 
       await PageObjects.discover.clickFieldListItemRemove('agent');
-      expect(await getTitles()).to.be('Time (@timestamp) Document');
+      expect(await getTitles()).to.be('Control column Select column Time (@timestamp) Document');
     });
   });
 }

test/functional/apps/discover/_data_grid_field_data.ts

@@ -72,7 +72,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         await retry.waitFor('first cell contains expected timestamp', async () => {
           const cell = await dataGrid.getCellElement(1, 3);
-          const text = await cell.getVisibleText();
+          const text = (await cell.getVisibleText()).split('\n')[0];
           return text === expectedTimeStamp;
         });
       });

test/functional/page_objects/dashboard_page.ts

@@ -516,6 +516,20 @@ export class DashboardPageObject extends FtrService {
     return await Promise.all(titleObjects.map(async (title) => await title.getVisibleText()));
   }
 
+  public async getVisiblePanelTitles() {
+    this.log.debug('visible in getPanelTitles');
+    const titleObjects = await this.testSubjects.findAll('dashboardPanelTitle');
+    return await Promise.all(
+      titleObjects.map(async (title) =>
+        (
+          await title.findByCssSelector(
+            '* :not(.euiScreenReaderOnly, .euiScreenReaderOnly--showOnFocus)'
+          )
+        ).getVisibleText()
+      )
+    );
+  }
+
   public async getPanelDimensions() {
     const panels = await this.find.allByCssSelector('.react-grid-item'); // These are gridster-defined elements and classes
     return await Promise.all(

x-pack/test/functional/apps/lens/smokescreen.ts

@@ -94,7 +94,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.lens.assertMetric('Maximum of bytes', '19,986');
       await PageObjects.lens.switchToVisualization('lnsDatatable');
       expect(await PageObjects.lens.getDatatableHeaderText()).to.eql('Maximum of bytes');
-      expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('19,986');
+      expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('19,986\nRow: 1; Column: 1');
       await PageObjects.lens.switchToVisualization('lnsMetric');
       await PageObjects.lens.assertMetric('Maximum of bytes', '19,986');
     });

yarn.lock

@@ -1441,10 +1441,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@37.6.0":
-  version "37.6.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-37.6.0.tgz#dc4fb2431e223047fa52b9035627c05a22197887"
-  integrity sha512-CeaKhwZCbTaq2h0cn3s9t0kGr+P+khVtYNa72zAVsH1Vhb6Ox0Z7cnvmn49qyjb3GnOHSYtQlbyrAcxqstfwbw==
+"@elastic/eui@38.0.0":
+  version "38.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-38.0.0.tgz#0b57088330b4b07a782c29611f28318544848196"
+  integrity sha512-jgXQAUSr96x04cqh73muGg8bvXvPR3PCvRkSwfyKzWc9YC0YwZ24jeqziBwnIlzz7mcytV2aGpNtTHoXfEomVA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"