Accessibility e2e

packages/cypress-internal/package.json

@@ -14,17 +14,21 @@
   },
   "type": "module",
   "dependencies": {
-    "eslint-plugin-cypress": "^3.4.0",
+    "@cypress/code-coverage": "^3.13.11",
     "@ui5/cypress-ct-ui5-webc": "0.0.4",
+    "axe-core": "^4.10.2",
     "cypress": "^13.11.0",
-    "typescript": "^5.6.2",
-    "rimraf": "^3.0.2",
+    "cypress-axe": "^1.6.0",
     "cypress-real-events": "^1.12.0",
-    "@cypress/code-coverage": "^3.13.11",
-    "axe-core": "^4.10.2",
-    "cypress-axe": "^1.6.0"
+    "eslint-plugin-cypress": "^3.4.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "@ui5/webcomponents-base": "2.13.0-rc.2"
+  },
+  "optionalDependencies": {
+    "@continuum/continuum-javascript-professional": "^7.3.0",
+    "selenium-webdriver": "4.7.1"
   }
 }

packages/cypress-internal/src/acc_report/support.ts

@@ -19,27 +19,6 @@ type TestReport = {
     errors: TestVialotation[]
 }
 
-function checkA11TerminalLog(violations: typeof AxeResults.violations) {
-    const violationData = violations.map<Vialotation>(
-        ({ id, impact, description, nodes }) => ({
-            id,
-            impact,
-            description,
-            nodes: nodes.length
-        })
-    )
-
-    const report: TestReport = {
-        testFile: Cypress.spec.relative,
-        errors: [{
-            testTitlePath: Cypress.currentTest.titlePath,
-            violations: violationData,
-        }]
-    }
-
-    cy.task('ui5ReportA11y', report)
-}
-
 declare global {
     namespace Cypress {
         interface Chainable {
@@ -49,15 +28,13 @@ declare global {
 }
 
 Cypress.Commands.add("ui5CheckA11y", (context?: string | Node | undefined, options?: Options | undefined) => {
-    return cy.checkA11y(context || "[data-cy-root]", options, checkA11TerminalLog, false)
+    if (Cypress.env('ui5AccTasksRegistered') === "axe") {
+        return cy.checkA11y(context, options)
+    } else if (Cypress.env('ui5AccTasksRegistered') === "continuum") {
+        return context ? cy.runAllTestsForAssertionsForNode(context) : cy.runAllTestsForAssertions()
+    }
 })
 
-if (Cypress.env('ui5AccTasksRegistered') === true) {
-    before(() => {
-        cy.task('ui5ReportA11yReset', Cypress.spec.relative);
-    })
-}
-
 export type {
     TestReport,
 }

packages/cypress-internal/src/acc_report/task.ts

@@ -102,7 +102,7 @@ function accTask(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions)
 			}
 		})
 
-		config.env.ui5AccTasksRegistered = true
+		config.env.ui5AccTasksRegistered = "axe"
 	}
 
 	return config

packages/cypress-internal/src/continuum/continuum.conf.js

@@ -0,0 +1,8 @@
+window.LevelAccess_AccessContinuumConfiguration = {
+    "accessEngineType": "professional",
+    "ampInstanceUrl": "https://sap.levelaccess.net",
+    "defaultStandardIds": [
+      1001235, /* SAP Standards */
+   ],
+   "includePotentialAccessibilityConcerns": false
+}

packages/cypress-internal/src/continuum/cypress.ts

@@ -0,0 +1,75 @@
+// @ts-ignore
+import {Continuum, ReportManagementStrategy, ModuleManagementStrategy} from '@continuum/continuum-javascript-professional';
+
+// const accessEngineFilePath = `${__dirname}/../node_modules/@continuum/continuum-javascript-professional/AccessEngine.professional.js`.replace(/^\//, '');  // versions of Cypress prior to 5 include a leading forward slash in __dirname
+const accessEngineFilePath = `../../node_modules/@continuum/continuum-javascript-professional/AccessEngine.professional.js`.replace(/^\//, '');  // versions of Cypress prior to 5 include a leading forward slash in __dirname
+
+const _checkConcerns = (accessibilityConcerns: any[]) => {
+    if (accessibilityConcerns?.length > 0) {
+        accessibilityConcerns.forEach((concern) => {
+            cy.log(`Accessibility Concern: **${concern._bestPracticeDescription}**. \n **${concern.attribute}**. \n ${concern.element}`);
+        });
+    } else {
+        cy.log("No accessibility concerns found");
+    }
+    cy.wrap(accessibilityConcerns)
+    .should((concerns) => expect(concerns).to.have.length(0));
+
+};
+
+const _prepareAccessEngine = () => {
+    return cy.window().then(windowUnderTest => {
+        // @ts-ignore
+        if (!windowUnderTest.LevelAccess_Continuum_AccessEngine) {
+            return cy.readFile(accessEngineFilePath)
+                .then(accessEngineFileContents => windowUnderTest.eval(Continuum.createInjectableAccessEngineCode(accessEngineFileContents)));
+        }
+    });
+}
+const setUpContinuum = (configFilePath: string) => (
+    // Using the Continuum JavaScript SDK requires to load the following files before invoking `Continuum.setUp`:
+    // * the Continuum configuration file (continuum.conf.js) specified by `configFilePath`
+    // * Access Engine (AccessEngine.professional.js), the underlying accessibility testing engine Continuum uses
+
+    cy.readFile(configFilePath)
+        .then(configFileContents => window.eval(configFileContents))
+        .window()
+        .then(windowUnderTest => (
+            cy.readFile(accessEngineFilePath)
+                .then(accessEngineFileContents => {
+                    Continuum.accessEngineCode = Continuum.createInjectableAccessEngineCode(accessEngineFileContents);
+                    windowUnderTest.eval(Continuum.accessEngineCode);
+                })
+                .then(() => Continuum.setUp(null, configFilePath, windowUnderTest))
+        ))
+);
+const runAllTestsForAssertions = (includeiframe = false) => (
+    _prepareAccessEngine()
+        .then(() => Continuum.runAllTests().then(function (accessibilityConcerns: any) {
+            _checkConcerns(accessibilityConcerns);
+        })
+    )
+);
+const runAllTestsForAssertionsForNode = (node: string | Node) => (
+    _prepareAccessEngine()
+        .then(() => Continuum.runAllTestsOnNode(node).then(function (accessibilityConcerns: any) {
+            _checkConcerns(accessibilityConcerns);
+        })
+    )
+);
+
+Cypress.Commands.add("setUpContinuum", setUpContinuum);
+// @ts-ignore
+Cypress.Commands.add('runAllTestsForAssertions', runAllTestsForAssertions);
+// @ts-ignore
+Cypress.Commands.add('runAllTestsForAssertionsForNode', runAllTestsForAssertionsForNode);
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            setUpContinuum(configFilePath: string): Chainable<void>;
+            runAllTestsForAssertions(includeiframe?: boolean): Chainable<void>;
+            runAllTestsForAssertionsForNode(node: string | Node): Chainable<void>;
+        }
+    }
+}

packages/cypress-internal/src/cypress.config.ts

@@ -2,15 +2,14 @@ import { defineConfig } from "cypress";
 // @ts-ignore
 import viteConfig from "../../../vite.config.js";
 import coverageTask from "@cypress/code-coverage/task.js";
-import accTask from "./acc_report/task.js";
 import svgTask from "./svg_validation/task.js";
 
 
 export default defineConfig({
+	e2e: {},
 	component: {
 		setupNodeEvents(on, config) {
 			coverageTask(on, config);
-			accTask(on, config);
 			svgTask(on, config);
 
 			return config

packages/cypress-internal/src/helpers.ts

@@ -1,16 +1,26 @@
 declare global {
-    function ui5AccDescribe(title: string, fn: (this: Mocha.Suite) => void): Mocha.Suite | void;
+    function ui5AccDescribe(title: string, fn: (this: Mocha.Suite) => void, page: string): Mocha.Suite | void;
 }
 
-globalThis.ui5AccDescribe = (title: string, fn: (this: Mocha.Suite) => void): Mocha.Suite | void => {
-    if (Cypress.env('ui5AccTasksRegistered') === true) {
-        return describe.only(`${title}`, function (this: Mocha.Suite) {
-            before(() => {
+globalThis.ui5AccDescribe = (title: string, fn: (this: Mocha.Suite) => void, page: string): Mocha.Suite | void => {
+    if (Cypress.env('UI5_ACC') === "axe") {
+         return describe.only(`${title}`, function (this: Mocha.Suite) {
+             before(() => {
+                cy.visit(page);
                 cy.injectAxe({ axeCorePath: "../../node_modules/axe-core/axe.min.js" });
-            });
-            fn.call(this);
-        });
-    }
+             });
+             fn.call(this);
+         });
+     } else if (Cypress.env('UI5_ACC') === "continuum") {
+         return describe.only(`${title}`, function (this: Mocha.Suite) {
+             before(() => {
+                 cy.setUpContinuum("../../packages/cypress-internal/src/continuum/continuum.conf.js");
+                cy.visit(page);
+
+             });
+             fn.call(this);
+         });
+     };
 };
 
 export { }

packages/main/cypress/e2e/a11y.cy.ts

@@ -0,0 +1,5 @@
+ui5AccDescribe("Automated accessibility tests", () => {
+	it("Icon only", () => {
+		cy.ui5CheckA11y()
+	})
+}, "http://localhost:8080/packages/main/test/pages/Button.html");

packages/main/cypress/support/e2e.ts

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import '../../../cypress-internal/src/continuum/cypress';
+import "@ui5/cypress-internal/commands.js";
+
+
+// Example use:
+// cy.mount(MyComponent)

packages/main/package-scripts.cjs

@@ -7,7 +7,7 @@ const options = {
 	dev: true,
 	internal: {
 		cypress_code_coverage: false,
-		cypress_acc_tests: false,
+		cypress_acc_tests: "axe",
 	},
 };
 

packages/tools/components-package/nps.js

@@ -22,7 +22,7 @@ const cypressEnvVariables = (options, predefinedVars) => {
 	variables.push(`CYPRESS_COVERAGE=${!!cypress_code_coverage}`);
 
 	if (cypress_acc_tests) {
-		variables.push("CYPRESS_UI5_ACC=true");
+		variables.push(`CYPRESS_UI5_ACC=${cypress_acc_tests}`);
 	}
 
 	return variables.length ? `cross-env ${variables.join(" ")}` : "";