[9.2] [Cypress] Stop using checkA11y({ skipFailures: true }) and enforce strict accessibility validation (#237627)

src/platform/packages/shared/kbn-apm-ui-shared/src/components/span_icon/index.tsx

@@ -20,5 +20,16 @@ interface Props extends Omit<EuiIconProps, 'type'> {
 
 export function SpanIcon({ type, subtype, size = 'l', ...props }: Props) {
   const icon = getSpanIcon(type, subtype);
-  return <EuiIcon type={icon} size={size} title={type || subtype} {...props} />;
+  const isPresentationRole =
+    ['none', 'presentation'].includes(props.role ?? '') ||
+    ['true', true].includes(props['aria-hidden'] ?? '');
+
+  return (
+    <EuiIcon
+      type={icon}
+      size={size}
+      title={!isPresentationRole ? type || subtype : undefined}
+      {...props}
+    />
+  );
 }

x-pack/platform/plugins/shared/fleet/cypress/README.md

@@ -153,7 +153,7 @@ Remember that minimizing the number of times the web page is loaded, we minimize
 
 ### Accessibility
 
-The `checkA11y({ skipFailures: false });` call uses [axe-core](https://github.com/dequelabs/axe-core) to perform a full page check for accessibility violations.
+The `checkA11y();` call uses [axe-core](https://github.com/dequelabs/axe-core) to perform a full page check for accessibility violations.
 
 See [axe-core](https://github.com/dequelabs/axe-core)'s documentation for details on what is checked for.
 

x-pack/platform/plugins/shared/fleet/cypress/e2e/a11y/home_page.cy.ts

@@ -57,8 +57,9 @@ describe('Home page', () => {
 
     describe('Quick Start', () => {
       it('Get started with fleet', () => {
-        checkA11y({ skipFailures: false });
+        checkA11y();
       });
+
       it('Install Fleet Server', () => {
         cy.getBySel(FLEET_SERVER_SETUP.SELECT_HOSTS).click();
         cy.getBySel(FLEET_SERVER_SETUP.ADD_HOST_BTN).click();
@@ -69,7 +70,8 @@ describe('Home page', () => {
         cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 })
           .scrollIntoView()
           .should('be.visible');
-        checkA11y({ skipFailures: false });
+
+        checkA11y();
       });
     });
 
@@ -81,22 +83,22 @@ describe('Home page', () => {
         cy.getBySel(AGENT_FLYOUT.ADVANCED_TAB_BUTTON).click();
       });
       it('Select policy for fleet', () => {
-        checkA11y({ skipFailures: false });
+        checkA11y();
       });
       it('Add your fleet sever host', () => {
         cy.getBySel(FLEET_SERVER_SETUP.SELECT_HOSTS).click();
         cy.getBySel(FLEET_SERVER_SETUP.ADD_HOST_BTN).click();
         cy.getBySel(FLEET_SERVER_SETUP.NAME_INPUT).type('New host');
         cy.get('[placeholder="Specify host URL"').type('https://localhost:8220');
         cy.getBySel(ADVANCED_FLEET_SERVER_ADD_HOST_BUTTON).click();
-        checkA11y({ skipFailures: false });
+        checkA11y();
       });
       it('Generate service token', () => {
         cy.getBySel(ADVANCED_FLEET_SERVER_GENERATE_SERVICE_TOKEN_BUTTON).click();
         cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 })
           .scrollIntoView()
           .should('be.visible');
-        checkA11y({ skipFailures: false });
+        checkA11y();
       });
     });
   });
@@ -110,7 +112,7 @@ describe('Home page', () => {
       }).should('be.visible');
     });
     it('Agent Table', () => {
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
     it('Create Policy Flyout', () => {
       cy.getBySel(AGENT_POLICIES_CREATE_AGENT_POLICY_FLYOUT.CREATE_BUTTON).click();
@@ -122,7 +124,8 @@ describe('Home page', () => {
       cy.getBySel(AGENT_POLICIES_FLYOUT_ADVANCED_DEFAULT_NAMESPACE_HEADER, {
         timeout: 15000,
       }).should('be.visible');
-      checkA11y({ skipFailures: false });
+
+      checkA11y();
     });
     it('Agent Table After Adding Another Agent', () => {
       cy.getBySel(AGENT_POLICIES_CREATE_AGENT_POLICY_FLYOUT.CREATE_BUTTON).click();
@@ -132,7 +135,8 @@ describe('Home page', () => {
       cy.getBySel(AGENT_POLICY_CREATE_AGENT_POLICY_NAME_FIELD).type('testName');
       cy.getBySel(AGENT_POLICY_FLYOUT_CREATE_BUTTON).click();
       cy.getBySel(AGENT_POLICY_NAME_LINK, { timeout: 15000 }).should('be.visible');
-      checkA11y({ skipFailures: true });
+
+      checkA11y();
     });
   });
 
@@ -143,14 +147,14 @@ describe('Home page', () => {
     });
     it('Enrollment Tokens Table', () => {
       cy.getBySel('tableHeaderCell_name_0', { timeout: 15000 }).should('be.visible');
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
     it('Create Enrollment Token Modal', () => {
       cy.getBySel(ENROLLMENT_TOKENS.CREATE_TOKEN_BUTTON).click();
       cy.getBySel(ENROLLMENT_TOKENS.CREATE_TOKEN_MODAL_NAME_FIELD, { timeout: 15000 }).should(
         'be.visible'
       );
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
   });
 
@@ -177,12 +181,12 @@ describe('Home page', () => {
     });
     it('Uninstall Tokens Table', () => {
       cy.getBySel(UNINSTALL_TOKENS.POLICY_ID_TABLE_FIELD).first().should('be.visible');
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
     it('Uninstall Command Flyout', () => {
       cy.getBySel(UNINSTALL_TOKENS.VIEW_UNINSTALL_COMMAND_BUTTON).first().click();
       cy.getBySel(UNINSTALL_TOKENS.UNINSTALL_COMMAND_FLYOUT).should('be.visible');
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
   });
 
@@ -195,7 +199,7 @@ describe('Home page', () => {
     });
     it('Datastreams Empty Table', () => {
       cy.getBySel('tableHeaderSortButton', { timeout: 15000 }).should('be.visible');
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
   });
   describe.skip('Settings', () => {
@@ -205,7 +209,7 @@ describe('Home page', () => {
     });
     it('Settings Form', () => {
       cy.getBySel(SETTINGS_FLEET_SERVER_HOST_HEADING, { timeout: 15000 }).should('be.visible');
-      checkA11y({ skipFailures: false });
+      checkA11y();
     });
   });
   after(() => {

x-pack/platform/plugins/shared/fleet/cypress/support/commands.ts

@@ -26,7 +26,13 @@ const axeOptions = {
   runOnly: [...AXE_OPTIONS.runOnly, 'best-practice'],
 };
 
-export const checkA11y = ({ skipFailures }: { skipFailures: boolean }) => {
+/**
+ * Runs accessibility checks using Axe.
+ *
+ * @param options - Configuration options for the accessibility check.
+ * @param options.skipFailures - **@deprecated** Use of this option is discouraged. It may be used temporarily, but please ensure that all identified issues are addressed promptly.
+ */
+export const checkA11y = ({ skipFailures }: { skipFailures?: true } = {}) => {
   // https://github.com/component-driven/cypress-axe#cychecka11y
   cy.injectAxe();
   cy.configureAxe(axeConfig);
@@ -35,5 +41,5 @@ export const checkA11y = ({ skipFailures }: { skipFailures: boolean }) => {
    * 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);
+  cy.checkA11y(context, axeOptions, undefined, skipFailures ?? false);
 };

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependencies/dependencies.cy.ts

@@ -52,8 +52,8 @@ describe('Dependencies', () => {
         `/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 });
+
+      checkA11y();
     });
   });
 
@@ -83,8 +83,8 @@ describe('Dependencies', () => {
         })}`
       );
       cy.contains('h1', 'postgresql');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
+      checkA11y();
     });
   });
 

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/errors/error_details.cy.ts

@@ -47,8 +47,8 @@ describe('Error details', () => {
 
       cy.visitKibana(errorDetailsPageHref);
       cy.contains(`Error group ${errorGroupingKeyShort}`);
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
+      checkA11y();
     });
 
     describe('when error has no occurrences', () => {

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/errors/errors_page.cy.ts

@@ -47,8 +47,8 @@ describe('Errors page', () => {
     it('has no detectable a11y violations on load', () => {
       cy.visitKibana(javaServiceErrorsPageHref);
       cy.contains('Error occurrences');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
+      checkA11y();
     });
 
     describe('when service has no errors', () => {

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/infrastructure/infrastructure_page.cy.ts

@@ -49,8 +49,8 @@ describe('Infrastructure page', () => {
     it('has no detectable a11y violations on load', () => {
       cy.visitKibana(goServiceInfraPageHref);
       cy.contains('Infrastructure');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
+      checkA11y();
     });
 
     describe('when container ids, pod names and host names are returned by the api call', () => {

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts

@@ -61,8 +61,8 @@ describe('Service inventory', () => {
 
     it('has no detectable a11y violations on load', () => {
       cy.contains('h1', 'Service inventory');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
+      checkA11y();
     });
 
     it('has a list of services', () => {

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_overview/otel_edot_service_overview_and_transactions.cy.ts

@@ -50,15 +50,16 @@ describe('Service Overview', () => {
 
     it('renders all components on the page', () => {
       cy.contains('adservice-edot-synth');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
       cy.getByTestSubj('latencyChart');
       cy.getByTestSubj('throughput');
       cy.getByTestSubj('transactionsGroupTable');
       cy.getByTestSubj('serviceOverviewErrorsTable');
       cy.getByTestSubj('dependenciesTable');
       cy.getByTestSubj('instancesLatencyDistribution');
       cy.getByTestSubj('serviceOverviewInstancesTable');
+
+      checkA11y();
     });
   });
 

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_overview/otel_service_overview_and_transactions.cy.ts

@@ -50,15 +50,16 @@ describe('Service Overview', () => {
 
     it('renders all components on the page', () => {
       cy.contains('sendotlp-otel-native-synth');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
       cy.getByTestSubj('latencyChart');
       cy.getByTestSubj('throughput');
       cy.getByTestSubj('transactionsGroupTable');
       cy.getByTestSubj('serviceOverviewErrorsTable');
       cy.getByTestSubj('dependenciesTable');
       cy.getByTestSubj('instancesLatencyDistribution');
       cy.getByTestSubj('serviceOverviewInstancesTable');
+
+      checkA11y();
     });
   });
 

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_overview/service_overview.cy.ts

@@ -98,15 +98,16 @@ describe('Service Overview', () => {
 
     it('renders all components on the page', () => {
       cy.contains('opbeans-node');
-      // set skipFailures to true to not fail the test when there are accessibility failures
-      checkA11y({ skipFailures: true });
+
       cy.getByTestSubj('latencyChart');
       cy.getByTestSubj('throughput');
       cy.getByTestSubj('transactionsGroupTable');
       cy.getByTestSubj('serviceOverviewErrorsTable');
       cy.getByTestSubj('dependenciesTable');
       cy.getByTestSubj('instancesLatencyDistribution');
       cy.getByTestSubj('serviceOverviewInstancesTable');
+
+      checkA11y();
     });
   });
 

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/transactions_overview/transactions_overview.cy.ts

@@ -96,8 +96,8 @@ describe('Transactions Overview', () => {
   it('has no detectable a11y violations on load', () => {
     cy.visitKibana(goServiceTransactionsHref);
     cy.get('a:contains(Transactions)').should('have.attr', 'aria-selected', 'true');
-    // set skipFailures to true to not fail the test when there are accessibility failures
-    checkA11y({ skipFailures: true });
+
+    checkA11y();
   });
 
   it('persists transaction type selected when navigating to Overview tab', () => {

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

@@ -175,7 +175,13 @@ const axeOptions = {
   runOnly: [...AXE_OPTIONS.runOnly, 'best-practice'],
 };
 
-export const checkA11y = ({ skipFailures }: { skipFailures: boolean }) => {
+/**
+ * Runs accessibility checks using Axe.
+ *
+ * @param options - Configuration options for the accessibility check.
+ * @param options.skipFailures - **@deprecated** Use of this option is discouraged. It may be used temporarily, but please ensure that all identified issues are addressed promptly.
+ */
+export const checkA11y = ({ skipFailures }: { skipFailures?: true } = {}) => {
   // https://github.com/component-driven/cypress-axe#cychecka11y
   cy.injectAxe();
   cy.configureAxe(axeConfig);
@@ -184,5 +190,5 @@ export const checkA11y = ({ skipFailures }: { skipFailures: boolean }) => {
    * 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);
+  cy.checkA11y(context, axeOptions, undefined, skipFailures ?? false);
 };

x-pack/solutions/observability/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx

@@ -5,7 +5,13 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiIconTip, EuiToolTip, RIGHT_ALIGNMENT } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiIconTip,
+  EuiToolTip,
+  RIGHT_ALIGNMENT,
+  EuiScreenReaderOnly,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from '@emotion/styled';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -62,6 +68,7 @@ interface Props {
   saveTableOptionsToUrl?: boolean;
   showPerPageOptions?: boolean;
   onLoadTable?: () => void;
+  tableCaption?: string;
 }
 
 const defaultSorting = {
@@ -77,6 +84,7 @@ export function ErrorGroupList({
   saveTableOptionsToUrl,
   showPerPageOptions = true,
   onLoadTable,
+  tableCaption,
 }: Props) {
   const { query } = useAnyOfApmParams(
     '/services/{serviceName}/overview',
@@ -139,9 +147,6 @@ export function ErrorGroupList({
             size="s"
             type="question"
             color="subdued"
-            iconProps={{
-              className: 'eui-alignTop',
-            }}
             content={i18n.translate('xpack.apm.errorsTable.groupIdColumnDescription', {
               defaultMessage:
                 'Hash of the stack trace. Groups similar errors together, even when the error message is different due to dynamic parameters.',
@@ -224,7 +229,15 @@ export function ErrorGroupList({
         ? []
         : [
             {
-              name: '',
+              name: (
+                <EuiScreenReaderOnly>
+                  <span>
+                    {i18n.translate('xpack.apm.errorsTable.unhandledLabel', {
+                      defaultMessage: 'Unhandled',
+                    })}
+                  </span>
+                </EuiScreenReaderOnly>
+              ),
               field: 'handled',
               sortable: false,
               align: RIGHT_ALIGNMENT,
@@ -316,6 +329,8 @@ export function ErrorGroupList({
 
   return (
     <ManagedTable
+      rowHeader="groupId"
+      tableCaption={tableCaption}
       noItemsMessage={
         isMainStatsLoading
           ? i18n.translate('xpack.apm.errorsTable.loading', {