Graph a11y tests (#134694)

Graph a11y tests

(cherry picked from commit 7e44314)

x-pack/plugins/graph/public/components/settings/settings.tsx

@@ -105,10 +105,11 @@ export function SettingsComponent({
         <EuiTabs style={{ margin: '0 -16px -25px' }}>
           {tabs
             .filter(({ id }) => id !== 'drillDowns' || workspaceProps.canEditDrillDownUrls)
-            .map(({ title }, index) => (
+            .map(({ title, id }, index) => (
               <EuiTab
                 key={title}
                 isSelected={activeTab === index}
+                data-test-subj={id}
                 onClick={() => {
                   setActiveTab(index);
                 }}

x-pack/plugins/graph/public/components/settings/url_template_form.tsx

@@ -264,6 +264,7 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
           <div role="listbox">
             {urlTemplateIconChoices.map((icon) => (
               <LegacyIcon
+                aria-label={icon.label}
                 key={icon.class}
                 selected={icon === currentTemplate.icon}
                 icon={icon}

x-pack/plugins/graph/public/components/workspace_layout/workspace_top_nav_menu.tsx

@@ -118,6 +118,7 @@ export const WorkspaceTopNavMenu = (props: WorkspaceTopNavMenuProps) => {
     run: () => {
       props.setShowInspect((prevShowInspect) => !prevShowInspect);
     },
+    testId: 'graphInspectButton',
   });
 
   topNavMenu.push({
@@ -164,6 +165,7 @@ export const WorkspaceTopNavMenu = (props: WorkspaceTopNavMenuProps) => {
         }
       );
     },
+    testId: 'graphSettingsButton',
   });
 
   return (

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

@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const a11y = getService('a11y');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const browser = getService('browser');
+  const PageObjects = getPageObjects(['settings', 'common', 'graph', 'header', 'home']);
+
+  describe('Graph app a11y tests', () => {
+    before(async () => {
+      await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
+        useActualUrl: true,
+      });
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.home.addSampleDataSet('flights');
+      await PageObjects.common.navigateToApp('graph');
+    });
+
+    after(async () => {
+      await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
+        useActualUrl: true,
+      });
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.home.removeSampleDataSet('flights');
+    });
+
+    it('Graph listing page', async function () {
+      await a11y.testAppSnapshot();
+    });
+
+    it('Edit Graph page', async function () {
+      await testSubjects.click('graphListingTitleLink-Kibana-Sample-Data---Flights');
+      await a11y.testAppSnapshot();
+    });
+
+    it('Syntax options panel', async function () {
+      await testSubjects.click('switchQueryLanguageButton');
+      await a11y.testAppSnapshot();
+      await browser.pressKeys(browser.keys.ESCAPE);
+    });
+
+    it('Add fields panel', async function () {
+      await testSubjects.click('graph-add-field-button');
+      await retry.waitFor(
+        'Add fields panel is visible',
+        async () => await testSubjects.exists('graph-add-field-button')
+      );
+      await a11y.testAppSnapshot();
+      await browser.pressKeys(browser.keys.ESCAPE);
+    });
+
+    it('Graph save panel', async function () {
+      await testSubjects.click('graphSaveButton');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('saveCancelButton');
+    });
+
+    it('Graph inspect panel', async function () {
+      await testSubjects.click('graphInspectButton');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('graphInspectButton');
+    });
+
+    it('Graph settings - advanced settings tab', async function () {
+      await testSubjects.click('graphSettingsButton');
+      await a11y.testAppSnapshot();
+    });
+
+    it('Graph settings - block list tab', async function () {
+      await testSubjects.click('blocklist');
+      await a11y.testAppSnapshot();
+    });
+
+    it('Graph settings - drilldowns tab', async function () {
+      await testSubjects.click('drillDowns');
+      await a11y.testAppSnapshot();
+      await browser.pressKeys(browser.keys.ESCAPE);
+    });
+
+    // https://github.com/elastic/kibana/issues/134693
+    it.skip('Graph settings drilldown tab - add new drilldown', async function () {
+      await testSubjects.click('graphAddNewTemplate');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('graphRemoveUrlTemplate');
+      await testSubjects.click('euiFlyoutCloseButton');
+      await browser.pressKeys(browser.keys.ESCAPE);
+    });
+
+    it('Create new graph page', async function () {
+      await testSubjects.click('graphNewButton');
+      await testSubjects.click('confirmModalConfirmButton');
+      await a11y.testAppSnapshot();
+    });
+  });
+}

x-pack/test/accessibility/config.ts

@@ -36,6 +36,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/upgrade_assistant'),
       require.resolve('./apps/canvas'),
       require.resolve('./apps/maps'),
+      require.resolve('./apps/graph'),
       require.resolve('./apps/security_solution'),
       require.resolve('./apps/ml_embeddables_in_dashboard'),
       require.resolve('./apps/remote_clusters'),