[APM] add cypress-axe to e2e tests to check A11y (#126610)

* [APM] add cypress-axe to e2e tests to check A11y

* check A11y in dependecy overview

* PR comments

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/dependencies.spec.ts

@@ -6,6 +6,7 @@
  */
 import { synthtrace } from '../../../synthtrace';
 import { opbeans } from '../../fixtures/synthtrace/opbeans';
+import { checkA11y } from '../../support/commands';
 
 const start = '2021-10-10T00:00:00.000Z';
 const end = '2021-10-10T00:15:00.000Z';
@@ -43,6 +44,17 @@ describe('Dependencies', () => {
 
       cy.contains('h1', 'postgresql');
     });
+
+    it('has no detectable a11y violations on load', () => {
+      cy.visit(
+        `/app/apm/services/opbeans-java/dependencies?${new URLSearchParams(
+          timeRange
+        )}`
+      );
+      cy.contains('a[role="tab"]', 'Dependencies');
+      // set skipFailures to true to not fail the test when there are accessibility failures
+      checkA11y({ skipFailures: true });
+    });
   });
 
   describe('dependency overview page', () => {
@@ -62,6 +74,18 @@ describe('Dependencies', () => {
 
       cy.contains('h1', 'opbeans-java');
     });
+
+    it('has no detectable a11y violations on load', () => {
+      cy.visit(
+        `/app/apm/backends/overview?${new URLSearchParams({
+          ...timeRange,
+          backendName: 'postgresql',
+        })}`
+      );
+      cy.contains('h1', 'postgresql');
+      // set skipFailures to true to not fail the test when there are accessibility failures
+      checkA11y({ skipFailures: true });
+    });
   });
 
   describe('service overview page', () => {

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/error_details.spec.ts

@@ -7,6 +7,7 @@
 
 import url from 'url';
 import { synthtrace } from '../../../../synthtrace';
+import { checkA11y } from '../../../support/commands';
 import { generateData } from './generate_data';
 
 const start = '2021-10-10T00:00:00.000Z';
@@ -39,6 +40,13 @@ describe('Error details', () => {
       await synthtrace.clean();
     });
 
+    it('has no detectable a11y violations on load', () => {
+      cy.visit(errorDetailsPageHref);
+      cy.contains('Error group 00000');
+      // set skipFailures to true to not fail the test when there are accessibility failures
+      checkA11y({ skipFailures: true });
+    });
+
     describe('when error has no occurrences', () => {
       it('shows an empty message', () => {
         cy.visit(

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/errors/errors_page.spec.ts

@@ -7,6 +7,7 @@
 
 import url from 'url';
 import { synthtrace } from '../../../../synthtrace';
+import { checkA11y } from '../../../support/commands';
 import { generateData } from './generate_data';
 
 const start = '2021-10-10T00:00:00.000Z';
@@ -41,6 +42,13 @@ describe('Errors page', () => {
       await synthtrace.clean();
     });
 
+    it('has no detectable a11y violations on load', () => {
+      cy.visit(javaServiceErrorsPageHref);
+      cy.contains('Error occurrences');
+      // set skipFailures to true to not fail the test when there are accessibility failures
+      checkA11y({ skipFailures: true });
+    });
+
     describe('when service has no errors', () => {
       it('shows empty message', () => {
         cy.visit(nodeServiceErrorsPageHref);

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts

@@ -7,6 +7,7 @@
 import url from 'url';
 import { synthtrace } from '../../../../synthtrace';
 import { opbeans } from '../../../fixtures/synthtrace/opbeans';
+import { checkA11y } from '../../../support/commands';
 
 const timeRange = {
   rangeFrom: '2021-10-10T00:00:00.000Z',
@@ -53,6 +54,12 @@ describe('When navigating to the service inventory', () => {
     cy.visit(serviceInventoryHref);
   });
 
+  it('has no detectable a11y violations on load', () => {
+    cy.contains('h1', 'Services');
+    // set skipFailures to true to not fail the test when there are accessibility failures
+    checkA11y({ skipFailures: true });
+  });
+
   it('has a list of services', () => {
     cy.contains('opbeans-node');
     cy.contains('opbeans-java');
@@ -93,7 +100,7 @@ describe('When navigating to the service inventory', () => {
       cy.wait(aliasNames);
     });
 
-    it.skip('when selecting a different time range and clicking the update button', () => {
+    it('when selecting a different time range and clicking the update button', () => {
       cy.wait(aliasNames);
 
       cy.selectAbsoluteTimeRange(

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts

@@ -8,6 +8,7 @@
 import url from 'url';
 import { synthtrace } from '../../../../synthtrace';
 import { opbeans } from '../../../fixtures/synthtrace/opbeans';
+import { checkA11y } from '../../../support/commands';
 
 const start = '2021-10-10T00:00:00.000Z';
 const end = '2021-10-10T00:15:00.000Z';
@@ -102,6 +103,13 @@ describe('Service Overview', () => {
       cy.loginAsReadOnlyUser();
       cy.visit(baseUrl);
     });
+
+    it('has no detectable a11y violations on load', () => {
+      cy.contains('opbeans-node');
+      // set skipFailures to true to not fail the test when there are accessibility failures
+      checkA11y({ skipFailures: true });
+    });
+
     it('transaction latency chart', () => {
       cy.get('[data-test-subj="latencyChart"]');
     });

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/transactions_overview/transactions_overview.spec.ts

@@ -8,11 +8,12 @@
 import url from 'url';
 import { synthtrace } from '../../../../synthtrace';
 import { opbeans } from '../../../fixtures/synthtrace/opbeans';
+import { checkA11y } from '../../../support/commands';
 
 const start = '2021-10-10T00:00:00.000Z';
 const end = '2021-10-10T00:15:00.000Z';
 
-const serviceOverviewHref = url.format({
+const serviceTransactionsHref = url.format({
   pathname: '/app/apm/services/opbeans-node/transactions',
   query: { rangeFrom: start, rangeTo: end },
 });
@@ -35,8 +36,18 @@ describe('Transactions Overview', () => {
     cy.loginAsReadOnlyUser();
   });
 
+  it('has no detectable a11y violations on load', () => {
+    cy.visit(serviceTransactionsHref);
+    cy.contains('aria-selected="true"', 'Transactions').should(
+      'have.class',
+      'euiTab-isSelected'
+    );
+    // set skipFailures to true to not fail the test when there are accessibility failures
+    checkA11y({ skipFailures: true });
+  });
+
   it('persists transaction type selected when navigating to Overview tab', () => {
-    cy.visit(serviceOverviewHref);
+    cy.visit(serviceTransactionsHref);
     cy.get('[data-test-subj="headerFilterTransactionType"]').should(
       'have.value',
       'request'

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -6,6 +6,11 @@
  */
 import 'cypress-real-events/support';
 import { Interception } from 'cypress/types/net-stubbing';
+import 'cypress-axe';
+import {
+  AXE_CONFIG,
+  AXE_OPTIONS,
+} from 'test/accessibility/services/a11y/constants';
 
 Cypress.Commands.add('loginAsReadOnlyUser', () => {
   cy.loginAs({ username: 'apm_read_user', password: 'changeme' });
@@ -78,3 +83,25 @@ Cypress.Commands.add(
     });
   }
 );
+
+// A11y configuration
+
+const axeConfig = {
+  ...AXE_CONFIG,
+};
+const axeOptions = {
+  ...AXE_OPTIONS,
+  runOnly: [...AXE_OPTIONS.runOnly, 'best-practice'],
+};
+
+export const checkA11y = ({ skipFailures }: { skipFailures: boolean }) => {
+  // https://github.com/component-driven/cypress-axe#cychecka11y
+  cy.injectAxe();
+  cy.configureAxe(axeConfig);
+  const context = '.kbnAppWrapper'; // Scopes a11y checks to only our app
+  /**
+   * We can get rid of the last two params when we don't need to add skipFailures
+   * params = (context, options, violationCallback, skipFailures)
+   */
+  cy.checkA11y(context, axeOptions, undefined, skipFailures);
+};