Enabling Uptime and Dashboard a11y test (#91017) (#92325)

# Conflicts:
#	x-pack/test/accessibility/apps/uptime.ts

Author: Michail Yasonik

test/accessibility/services/a11y/analyze_with_axe.js

@@ -31,8 +31,19 @@ export function analyzeWithAxe(context, options, callback) {
               selector: '[data-test-subj="comboBoxSearchInput"] *',
             },
             {
+              // EUI bug: https://github.com/elastic/eui/issues/4474
               id: 'aria-required-parent',
-              selector: '[class=*"euiDataGridRowCell"][role="gridcell"] ',
+              selector: '[class=*"euiDataGridRowCell"][role="gridcell"]',
+            },
+            {
+              // 3rd-party library; button has aria-describedby
+              id: 'button-name',
+              selector: '[data-rbd-drag-handle-draggable-id]',
+            },
+            {
+              // EUI bug: https://github.com/elastic/eui/issues/4536
+              id: 'duplicate-id',
+              selector: '.euiSuperDatePicker *',
             },
           ],
         });

test/functional/services/dashboard/panel_actions.ts

@@ -96,7 +96,7 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }: Ft
 
     async clickExpandPanelToggle() {
       log.debug(`clickExpandPanelToggle`);
-      this.openContextMenu();
+      await this.openContextMenu();
       const isActionVisible = await testSubjects.exists(TOGGLE_EXPAND_PANEL_DATA_TEST_SUBJ);
       if (!isActionVisible) await this.clickContextMenuMoreItem();
       await testSubjects.click(TOGGLE_EXPAND_PANEL_DATA_TEST_SUBJ);

test/functional/services/toasts.ts

@@ -45,10 +45,21 @@ export function ToastsProvider({ getService }: FtrProviderContext) {
     public async dismissAllToasts() {
       const list = await this.getGlobalToastList();
       const toasts = await list.findAllByCssSelector(`.euiToast`);
+
+      if (toasts.length === 0) return;
+
       for (const toast of toasts) {
         await toast.moveMouseTo();
-        const dismissButton = await testSubjects.findDescendant('toastCloseButton', toast);
-        await dismissButton.click();
+
+        if (await testSubjects.descendantExists('toastCloseButton', toast)) {
+          try {
+            const dismissButton = await testSubjects.findDescendant('toastCloseButton', toast);
+            await dismissButton.click();
+          } catch (err) {
+            // ignore errors
+            // toasts are finnicky because they can dismiss themselves right before you close them
+          }
+        }
       }
     }
 

x-pack/test/accessibility/apps/dashboard_edit_panel.ts

@@ -18,8 +18,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['security', 'common']);
   const toasts = getService('toasts');
 
-  // Failing: See https://github.com/elastic/kibana/issues/91592
-  describe.skip('Dashboard Edit Panel', () => {
+  const PANEL_TITLE = 'Visualization PieChart';
+
+  describe('Dashboard Edit Panel', () => {
     before(async () => {
       await esArchiver.load('dashboard/drilldowns');
       await esArchiver.loadIfNeeded('logstash_functional');
@@ -33,100 +34,68 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await esArchiver.unload('dashboard/drilldowns');
     });
 
-    // embeddable edit panel
-    it(' A11y test on dashboard edit panel menu options', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
+    it('can open menu', async () => {
+      await dashboardPanelActions.openContextMenu();
       await a11y.testAppSnapshot();
     });
 
-    // https://github.com/elastic/kibana/issues/77931
-    it.skip('A11y test for edit visualization and save', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelAction-editPanel');
-      await testSubjects.click('visualizesaveAndReturnButton');
+    it('can clone panel', async () => {
+      await dashboardPanelActions.clonePanelByTitle(PANEL_TITLE);
       await a11y.testAppSnapshot();
+      await toasts.dismissAllToasts();
+      await dashboardPanelActions.removePanelByTitle(`${PANEL_TITLE} (copy)`);
     });
 
-    // clone panel
-    it(' A11y test on dashboard embeddable clone panel', async () => {
-      await testSubjects.click('embeddablePanelAction-clonePanel');
+    it('can customize panel', async () => {
+      await dashboardPanelActions.customizePanel();
       await a11y.testAppSnapshot();
-      await toasts.dismissAllToasts();
-      await dashboardPanelActions.removePanelByTitle('Visualization PieChart (copy)');
     });
 
-    // edit panel title
-    it(' A11y test on dashboard embeddable edit dashboard title', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelAction-ACTION_CUSTOMIZE_PANEL');
-      await a11y.testAppSnapshot();
-      await testSubjects.click('customizePanelHideTitle');
+    it('can hide panel title', async () => {
+      await dashboardPanelActions.clickHidePanelTitleToggle();
       await a11y.testAppSnapshot();
       await testSubjects.click('saveNewTitleButton');
     });
 
-    // create drilldown
-    it('A11y test on dashboard embeddable open flyout and drilldown', async () => {
+    it('can drilldown', async () => {
       await testSubjects.click('embeddablePanelToggleMenuIcon');
       await testSubjects.click('embeddablePanelAction-OPEN_FLYOUT_ADD_DRILLDOWN');
       await a11y.testAppSnapshot();
       await testSubjects.click('flyoutCloseButton');
     });
 
-    // clicking on more button
-    it('A11y test on dashboard embeddable more button', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelMore-mainMenu');
+    it('can view more actions', async () => {
+      await dashboardPanelActions.openContextMenuMorePanel();
       await a11y.testAppSnapshot();
     });
 
-    // https://github.com/elastic/kibana/issues/77422
-    it.skip('A11y test on dashboard embeddable custom time range', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
+    it('can create a custom time range', async () => {
+      await dashboardPanelActions.openContextMenuMorePanel();
       await testSubjects.click('embeddablePanelAction-CUSTOM_TIME_RANGE');
       await a11y.testAppSnapshot();
+      await testSubjects.click('addPerPanelTimeRangeButton');
     });
 
-    // flow will change whenever the custom time range a11y issue gets fixed.
-    // Will need to click on gear icon and then click on more.
-
-    // inspector panel
-    it('A11y test on dashboard embeddable open inspector', async () => {
-      await testSubjects.click('embeddablePanelAction-openInspector');
+    it('can open inspector', async () => {
+      await dashboardPanelActions.openInspector();
       await a11y.testAppSnapshot();
       await testSubjects.click('euiFlyoutCloseButton');
     });
 
-    // fullscreen
-    it('A11y test on dashboard embeddable fullscreen', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelMore-mainMenu');
-      await testSubjects.click('embeddablePanelAction-togglePanel');
-      await a11y.testAppSnapshot();
-    });
-
-    // minimize fullscreen panel
-    it('A11y test on dashboard embeddable fullscreen minimize ', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelMore-mainMenu');
-      await testSubjects.click('embeddablePanelAction-togglePanel');
+    it('can go fullscreen', async () => {
+      await dashboardPanelActions.clickExpandPanelToggle();
       await a11y.testAppSnapshot();
+      await dashboardPanelActions.clickExpandPanelToggle();
     });
 
-    // replace panel
-    it('A11y test on dashboard embeddable replace panel', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelMore-mainMenu');
-      await testSubjects.click('embeddablePanelAction-replacePanel');
+    it('can replace panel', async () => {
+      await dashboardPanelActions.replacePanelByTitle();
       await a11y.testAppSnapshot();
       await testSubjects.click('euiFlyoutCloseButton');
     });
 
-    // delete from dashboard
-    it('A11y test on dashboard embeddable delete panel', async () => {
-      await testSubjects.click('embeddablePanelToggleMenuIcon');
-      await testSubjects.click('embeddablePanelMore-mainMenu');
-      await testSubjects.click('embeddablePanelAction-deletePanel');
+    it('can delete panel', async () => {
+      await dashboardPanelActions.removePanel();
       await a11y.testAppSnapshot();
     });
   });

x-pack/test/accessibility/apps/uptime.ts

@@ -17,9 +17,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const uptimeService = getService('uptime');
   const esArchiver = getService('esArchiver');
   const es = getService('es');
+  const toasts = getService('toasts');
 
-  // Failing: See https://github.com/elastic/kibana/issues/90555
-  describe.skip('uptime', () => {
+  describe('uptime', () => {
     before(async () => {
       await esArchiver.load('uptime/blank');
       await makeChecks(es, A11Y_TEST_MONITOR_ID, 150, 1, 1000, {
@@ -60,7 +60,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('overview alert popover controls', async () => {
       await uptimeService.overview.openAlertsPopover();
+      await toasts.dismissAllToasts();
       await a11y.testAppSnapshot();
+    });
+
+    it('overview alert popover controls nested content', async () => {
       await uptimeService.overview.navigateToNestedPopover();
       await a11y.testAppSnapshot();
     });