From ad7f06de87c48387224fd95a4a6c9b87bf6ce2f1 Mon Sep 17 00:00:00 2001
From: Nikol Georgieva <nicole.georgieva18@abv.bg>
Date: Mon, 5 Oct 2026 14:10:27 +0300
Subject: [PATCH] harmonia template: axe-core checks the generated pages
 against WCAG 2.1 AA, red on serious/critical (#7645)

The Harmonia templates carry ARIA where the component library put it, but
nothing checked it: no axe-core, pa11y or Lighthouse anywhere, so every
generated page was one template edit away from a regression no one saw.

AccessibilityHarmoniaIT generates and publishes an intent application and
scans its manage list, manage form, document page, read-only preview and
Inbox with axe-core (Deque's Selenium binding, on the Chrome the Selenide
ITs already drive), WCAG 2.1 A/AA rules, in both colour schemes. Every
page's result and a count per impact go to target/failsafe-reports/axe/,
which the IT jobs upload; a serious or critical violation fails it. It
also asserts what axe cannot see: the status step indicator announces the
active step, and the line dialog returns focus to the button that opened
it. HarmoniaAccessibilityMarkupIT guards the rules on markup no intent
application renders: a sortable header sorts through a button, every step
trigger binds aria-current.

Template fixes the first report and the issue's list surfaced:
- the column-resize grip (a focusable role=separator) announced
  aria-valuenow only once focused - required from the start (critical);
- the document's "your step" strip put muted text on its primary tint
  (4.32:1) - now foreground;
- the perspective list sorted on a click on the <th> - a real button now,
  with aria-sort;
- both status step indicators (document page, BPM task form) bind
  aria-current="step"; Harmonia marks the active step visually only.
Reviewed, no change: inputs carry bound labels (the label rule finds
nothing), Harmonia's dialog traps and returns focus itself, and the 194
role="presentation" are all on decorative svg icons, none on table markup.

Not enforced: contrast against Harmonia 3.1.2's own --primary (white on
it 3.67:1 light / 4.43:1 dark, it as dark-mode link text 4.26:1 - one
token cannot pass both) - a node-level exemption, so every other contrast
failure still fails the test; it is fixed in codbex/harmonia.

The Playwright app-test runner (npm/test, published in @aerokit/sdk) gets
the same check as an a11y flow with @axe-core/playwright (optional peer):
report-only by default, APPTEST_A11Y=strict to fail.

Verified: AccessibilityHarmoniaIT and HarmoniaAccessibilityMarkupIT green,
red with the form labels' for= binding removed ([critical] label on
#f_Name, #f_Email, #f_Vip); HarmoniaContractIT, HarmoniaListColumnsIT,
HarmoniaHierarchyTreeTableIT, I18nKeyCoverageIT, HarmoniaTaskFormLayoutIT,
ShellRuntimeVintageIT, IntentEmissionCoverageIT green; formatter:validate
with the cache wiped. The npm a11y flow was syntax-checked, not run.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../META-INF/dirigible/modules/package.json   |   6 +-
 .../application-core/shell/js/app.js          |   3 +
 .../document/document-view.html.template      |   6 +-
 .../ui/perspective/list/page.js.template      |   5 +
 .../ui/perspective/list/view.html.template    |   7 +-
 .../ui/index.html.template                    |   3 +-
 npm/test/README.md                            |  11 +-
 npm/test/package.json                         |   8 +-
 npm/test/src/flows/a11y.js                    |  86 +++++
 npm/test/src/index.js                         |   2 +
 pom.xml                                       |  14 +
 tests/tests-integrations/pom.xml              |   5 +
 .../api/HarmoniaAccessibilityMarkupIT.java    |  75 ++++
 .../ui/tests/AccessibilityHarmoniaIT.java     | 338 ++++++++++++++++++
 .../AccessibilityHarmoniaIT/app.intent        |  50 +++
 15 files changed, 610 insertions(+), 9 deletions(-)
 create mode 100644 npm/test/src/flows/a11y.js
 create mode 100644 tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaAccessibilityMarkupIT.java
 create mode 100644 tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/AccessibilityHarmoniaIT.java
 create mode 100644 tests/tests-integrations/src/main/resources/AccessibilityHarmoniaIT/app.intent

diff --git a/components/api/api-modules-javascript/src/main/resources/META-INF/dirigible/modules/package.json b/components/api/api-modules-javascript/src/main/resources/META-INF/dirigible/modules/package.json
index f4cad7cfb13..2f89e8e6e97 100644
--- a/components/api/api-modules-javascript/src/main/resources/META-INF/dirigible/modules/package.json
+++ b/components/api/api-modules-javascript/src/main/resources/META-INF/dirigible/modules/package.json
@@ -59,11 +59,15 @@
     }
   },
   "peerDependencies": {
-    "@playwright/test": ">=1.45"
+    "@playwright/test": ">=1.45",
+    "@axe-core/playwright": ">=4.10"
   },
   "peerDependenciesMeta": {
     "@playwright/test": {
       "optional": true
+    },
+    "@axe-core/playwright": {
+      "optional": true
     }
   }
 }
diff --git a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/app.js b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/app.js
index 6fbc992c2d6..b283b997afb 100644
--- a/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/app.js
+++ b/components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/app.js
@@ -373,6 +373,9 @@ App.listColumns = {
       resize(width + (event.key === 'ArrowRight' ? step : -step));
     });
     th.appendChild(grip);
+    // aria-valuenow is required on a focusable separator from the start, not only once it has
+    // been focused (#7645); focus and every resize keep it current.
+    announce();
   },
 
   // Is the element's text wider than its content box? scrollWidth alone rounds a sub-pixel overflow
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
index 5cd031a11d7..4e91ccf81dd 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template
@@ -126,7 +126,8 @@
       <svg role="presentation" x-h-lucide data-lucide="flag" class="text-primary shrink-0"></svg>
       <div class="text-sm">
         <span class="font-semibold text-foreground" x-text="$store.processTasks.processName($store.processTasks.getTasks(form)[0])"></span>
-        <span class="text-muted-foreground" x-text="' — ' + T('$projectName:${tprefix}.messages.workflowStep', 'your step')"></span>
+        <!-- Foreground, not muted: on the primary-tinted strip muted text falls under 4.5:1 (#7645). -->
+        <span class="text-foreground" x-text="' — ' + T('$projectName:${tprefix}.messages.workflowStep', 'your step')"></span>
       </div>
       <div class="flex-1"></div>
       <template x-for="task in $store.processTasks.getTasks(form)" :key="task.id">
@@ -683,7 +684,8 @@
           <nav x-h-step-indicator="activeStep()" data-orientation="vertical">
             <template x-for="(step, i) in statusSteps()" :key="step.value">
               <div x-h-step-indicator-item="i + 1">
-                <button x-h-step-indicator-trigger data-non-interactive="true" type="button">
+                <!-- Harmonia marks the active step visually only; aria-current announces it (#7645). -->
+                <button x-h-step-indicator-trigger data-non-interactive="true" type="button" :aria-current="i + 1 === activeStep() ? 'step' : null">
                   <span x-h-step-indicator-marker x-text="i + 1"></span>
                   <span x-h-step-indicator-content>
                     <span x-h-step-indicator-title x-text="step.text"></span>
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
index b1d0ea2768a..fc8712a3ddc 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/page.js.template
@@ -184,6 +184,11 @@ document.addEventListener('alpine:init', () => {
       this.refreshIcons();
     },
 
+    // The header's aria-sort: the sort state a screen reader announces with the column (#7645).
+    ariaSort(col) {
+      if (this.sortColumn !== col) return 'none';
+      return this.sortDirection === 'asc' ? 'ascending' : 'descending';
+    },
     isSortedAsc(col)  { return this.sortColumn === col && this.sortDirection === 'asc'; },
     isSortedDesc(col) { return this.sortColumn === col && this.sortDirection === 'desc'; },
     isUnsorted(col)   { return this.sortColumn !== col; },
diff --git a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
index c2dbff56dfe..288a17272b2 100644
--- a/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
+++ b/components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/list/view.html.template
@@ -92,13 +92,14 @@
               <tr x-h-table-row>
 #foreach($property in $listProperties)
 #if(!$property.dataAutoIncrement && $property.widgetIsMajor)
-                <th x-h-table-head scope="col" data-hoverable="true" data-activable="true"#if($property.isFloatType) class="text-right"#end#visibleGate($property) @click="cycleSort('${property.name}')">
-                  <div class="hbox items-center justify-between">
+                <th x-h-table-head scope="col" data-hoverable="true" data-activable="true"#if($property.isFloatType) class="text-right"#end#visibleGate($property) :aria-sort="ariaSort('${property.name}')">
+                  <!-- A real button sorts, so the header is reachable and operable from the keyboard (#7645). -->
+                  <button type="button" class="hbox w-full cursor-pointer items-center justify-between" @click="cycleSort('${property.name}')">
                     <span x-text="T('$projectName:${tprefix}.t.${property.dataName}', '${property.name}')"></span>
                     <svg x-h-lucide role="presentation" data-lucide="arrow-up"      class="size-4" x-show="isSortedAsc('${property.name}')"></svg>
                     <svg x-h-lucide role="presentation" data-lucide="arrow-down"    class="size-4" x-show="isSortedDesc('${property.name}')"></svg>
                     <svg x-h-lucide role="presentation" data-lucide="arrow-up-down" class="size-4" x-show="isUnsorted('${property.name}')"></svg>
-                  </div>
+                  </button>
                 </th>
 #end
 #end
diff --git a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
index 60fe0c8b81f..94b7adb4992 100644
--- a/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
+++ b/components/template/template-form-builder-harmonia/src/main/resources/META-INF/dirigible/template-form-builder-harmonia/ui/index.html.template
@@ -217,7 +217,8 @@
         <nav x-h-step-indicator="([#foreach($s in $metadata.steps){ label: '$s.label.replace($SQ, $ESCSQ)' }#if($foreach.hasNext), #end#end]).findIndex(s => s.label === model.${metadata.statusVar}) + 1" data-orientation="horizontal" class="sm:col-span-2 mb-4">
           <template x-for="(step, i) in [#foreach($s in $metadata.steps){ label: '$s.label.replace($SQ, $ESCSQ)', title: #if($s.translation)T('${projectName}:${tprefix}.t.${s.translation.replace($SQ, $ESCSQ)}', '$s.label.replace($SQ, $ESCSQ)')#{else}'$s.label.replace($SQ, $ESCSQ)'#end, description: #if($s.description)'$s.description.replace($SQ, $ESCSQ)'#{else}''#end }#if($foreach.hasNext), #end#end]" :key="step.label">
             <div x-h-step-indicator-item="i + 1">
-              <button x-h-step-indicator-trigger data-non-interactive="true" type="button">
+              <!-- Harmonia marks the active step visually only; aria-current announces it (#7645). -->
+              <button x-h-step-indicator-trigger data-non-interactive="true" type="button" :aria-current="step.label === model.${metadata.statusVar} ? 'step' : null">
                 <span x-h-step-indicator-marker x-text="i + 1"></span>
                 <span x-h-step-indicator-content>
                   <span x-h-step-indicator-title x-text="step.title"></span>
diff --git a/npm/test/README.md b/npm/test/README.md
index 0d66553d413..a0330ea1c9c 100644
--- a/npm/test/README.md
+++ b/npm/test/README.md
@@ -41,10 +41,12 @@ runTest(fileURLToPath(new URL('../<project>/<name>.test', import.meta.url)));
 ```
 BASE_URL=http://localhost:8080 npm test        # defaults: admin/admin, installed Chrome
 APPTEST_SHELL=1 npm test                       # also assert the shared-shell menu item
+APPTEST_A11Y=strict npm test                   # fail on serious/critical accessibility violations
 ```
 
 Env: `BASE_URL` (default `http://localhost:8080`), `APPTEST_USERNAME`/`APPTEST_PASSWORD`
-(default `admin`/`admin`), `APPTEST_SHELL` (opt-in shared-shell flow).
+(default `admin`/`admin`), `APPTEST_SHELL` (opt-in shared-shell flow), `APPTEST_A11Y` (`report`
+default, `strict`, `off` - the accessibility flow).
 
 ## Flows per entity
 
@@ -69,6 +71,13 @@ Env: `BASE_URL` (default `http://localhost:8080`), `APPTEST_USERNAME`/`APPTEST_P
   calendar on the Personal shell) is deliberately not asserted yet — it tracks the personal-template
   parity fixes.
 - **shell** (opt-in) — the shared application shell's nav item opens the module SPA in its iframe.
+- **a11y** — axe-core scans the list page and the create form against WCAG 2.1 A/AA and attaches
+  each page's result (`axe-<Entity>-<page>.json`) to the test report. `APPTEST_A11Y=report`
+  (default) only reports - a module's first release; `strict` also fails on a `serious` or
+  `critical` violation; `off` skips it. Needs `@axe-core/playwright` in the harness
+  `devDependencies` (the flow skips itself without it). Contrast against Harmonia's own
+  `--primary` is not counted in strict mode: the default palette misses 4.5:1 there, which the
+  component library fixes; every other contrast failure is.
 
 Test records carry an `APPTEST-` prefix and are removed in teardown; seed data is never mutated.
 A field the app owns rather than the user — a `number:` series, a calculated or `readOnly:` value —
diff --git a/npm/test/package.json b/npm/test/package.json
index 149e2e96d70..80283dac16f 100644
--- a/npm/test/package.json
+++ b/npm/test/package.json
@@ -25,6 +25,12 @@
     "directory": "npm/test"
   },
   "peerDependencies": {
-    "@playwright/test": ">=1.45"
+    "@playwright/test": ">=1.45",
+    "@axe-core/playwright": ">=4.10"
+  },
+  "peerDependenciesMeta": {
+    "@axe-core/playwright": {
+      "optional": true
+    }
   }
 }
diff --git a/npm/test/src/flows/a11y.js b/npm/test/src/flows/a11y.js
new file mode 100644
index 00000000000..ccd5c634347
--- /dev/null
+++ b/npm/test/src/flows/a11y.js
@@ -0,0 +1,86 @@
+import { expect, test } from '../fixtures.js';
+import { CALENDAR_OR_SLOTS, listCrumb } from './list.js';
+
+// The WCAG 2.1 level AA conformance rules, and the level A ones it includes (dirigible #7645).
+const WCAG_21_AA = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
+const ENFORCED_IMPACTS = new Set(['serious', 'critical']);
+
+// report (default): attach every page's axe result to the test report and pass - the first
+// release of a module. strict: also fail on a serious or critical violation. off: no scan.
+const MODE = process.env.APPTEST_A11Y ?? 'report';
+
+// Harmonia's default palette fails contrast against its own --primary (white on it, and it as link
+// text in dark mode); that is fixed in the component library, so strict mode does not fail an app
+// for it. Any other contrast failure still counts.
+const PRIMARY_COLOR = () => {
+  const probe = document.createElement('div');
+  probe.style.color = 'var(--primary)';
+  document.body.appendChild(probe);
+  const color = getComputedStyle(probe).color;
+  probe.remove();
+  const context = document.createElement('canvas').getContext('2d');
+  context.fillStyle = color;
+  context.fillRect(0, 0, 1, 1);
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+  return '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
+};
+
+function sameColor(measured, expected) {
+  if (typeof measured !== 'string' || measured.length !== 7 || !expected) return false;
+  for (let channel = 1; channel < 7; channel += 2) {
+    const a = parseInt(measured.slice(channel, channel + 2), 16);
+    const b = parseInt(expected.slice(channel, channel + 2), 16);
+    if (Math.abs(a - b) > 2) return false;
+  }
+  return true;
+}
+
+function onPrimary(node, primary) {
+  return (node.any ?? []).some((check) => sameColor(check.data?.fgColor, primary) || sameColor(check.data?.bgColor, primary));
+}
+
+async function axeBuilder() {
+  try {
+    return (await import('@axe-core/playwright')).default;
+  } catch {
+    return null;
+  }
+}
+
+// The list page and the create form of every entity with a page of its own, scanned by axe-core.
+export function a11yFlow(manifest, entity) {
+  if (MODE === 'off' || !entity.route) return;
+  test(`${entity.name}: list and form pages pass axe-core (WCAG 2.1 AA)`, async ({ page }, testInfo) => {
+    const AxeBuilder = await axeBuilder();
+    test.skip(!AxeBuilder, 'add @axe-core/playwright to the harness devDependencies to run the accessibility flow');
+
+    const calendar = entity.layout === 'calendar' || entity.layout === 'slots';
+    const pages = [['list', entity.route, () => (calendar ? page.locator(CALENDAR_OR_SLOTS).first() : listCrumb(page, entity))]];
+    if (!calendar && !entity.hierarchy) {
+      pages.push(['form', entity.route + '/create', () => page.locator('input, select, textarea').filter({ visible: true }).first()]);
+    }
+
+    const findings = [];
+    for (const [name, route, ready] of pages) {
+      await page.goto(manifest.standaloneShell + route);
+      await expect(ready()).toBeVisible();
+      const results = await new AxeBuilder({ page }).withTags(WCAG_21_AA).analyze();
+      await testInfo.attach(`axe-${entity.name}-${name}.json`, {
+        body: JSON.stringify(results, null, 2),
+        contentType: 'application/json',
+      });
+      const primary = await page.evaluate(PRIMARY_COLOR);
+      for (const violation of results.violations) {
+        if (!ENFORCED_IMPACTS.has(violation.impact)) continue;
+        const nodes = violation.nodes.filter((node) => !(violation.id === 'color-contrast' && onPrimary(node, primary)));
+        if (nodes.length) {
+          const targets = nodes.slice(0, 5).map((node) => node.target.join(' ')).join(', ');
+          findings.push(`${name}: [${violation.impact}] ${violation.id} - ${violation.help} (${nodes.length} elements: ${targets})`);
+        }
+      }
+    }
+    if (MODE === 'strict') {
+      expect(findings, 'serious or critical WCAG 2.1 AA violations:\n' + findings.join('\n')).toEqual([]);
+    }
+  });
+}
diff --git a/npm/test/src/index.js b/npm/test/src/index.js
index 00afd7fb6ee..2f6c18e3a05 100644
--- a/npm/test/src/index.js
+++ b/npm/test/src/index.js
@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import { test } from './fixtures.js';
+import { a11yFlow } from './flows/a11y.js';
 import { crudFlow } from './flows/crud.js';
 import { listFlow } from './flows/list.js';
 import { multilingualFlow } from './flows/multilingual.js';
@@ -20,6 +21,7 @@ export function runTest(manifestRef, opts = {}) {
       myFlow(manifest, entity, opts);
       multilingualFlow(manifest, entity, opts);
       shellFlow(manifest, entity, opts);
+      a11yFlow(manifest, entity, opts);
     });
   }
 }
diff --git a/pom.xml b/pom.xml
index 22f74e090a4..798cb735fef 100644
--- a/pom.xml
+++ b/pom.xml
@@ -260,6 +260,7 @@
         <!-- Tests -->
         <testcontainers.version>2.0.5</testcontainers.version>
         <selenide.version>7.18.2</selenide.version>
+        <axe-core-selenium.version>4.13.0</axe-core-selenium.version>
         <rest-assured.version>6.0.1</rest-assured.version>
 
         <antlr4-maven-plugin.version>4.13.2</antlr4-maven-plugin.version>
@@ -1023,6 +1024,19 @@
                 <version>4.46.0</version>
                 <scope>test</scope>
             </dependency>
+            <!-- axe-core accessibility scans on the browser the Selenide ITs drive (#7645); Selenide brings
+                 the Selenium it runs on, so the binding's own (older) selenium-java stays out -->
+            <dependency>
+                <groupId>com.deque.html.axe-core</groupId>
+                <artifactId>selenium</artifactId>
+                <version>${axe-core-selenium.version}</version>
+                <exclusions>
+                    <exclusion>
+                        <groupId>org.seleniumhq.selenium</groupId>
+                        <artifactId>selenium-java</artifactId>
+                    </exclusion>
+                </exclusions>
+            </dependency>
             <dependency>
                 <groupId>commons-collections</groupId>
                 <artifactId>commons-collections</artifactId>
diff --git a/tests/tests-integrations/pom.xml b/tests/tests-integrations/pom.xml
index e4191b60af9..6168de9a102 100644
--- a/tests/tests-integrations/pom.xml
+++ b/tests/tests-integrations/pom.xml
@@ -58,6 +58,11 @@
             <artifactId>selenide</artifactId>
             <scope>compile</scope>
         </dependency>
+        <dependency>
+            <groupId>com.deque.html.axe-core</groupId>
+            <artifactId>selenium</artifactId>
+            <scope>compile</scope>
+        </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-test</artifactId>
diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaAccessibilityMarkupIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaAccessibilityMarkupIT.java
new file mode 100644
index 00000000000..dec4edcc2d8
--- /dev/null
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/HarmoniaAccessibilityMarkupIT.java
@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2010-2026 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors SPDX-License-Identifier: EPL-2.0
+ */
+package org.eclipse.dirigible.integration.tests.api;
+
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.function.Predicate;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
+
+/**
+ * Accessibility rules of the Harmonia templates that the axe-core scan of a generated application
+ * ({@code AccessibilityHarmoniaIT}) cannot reach, because no intent application renders the markup
+ * - the perspective list view exists only for hand-authored models (#7645).
+ */
+class HarmoniaAccessibilityMarkupIT {
+
+    private static final List<String> TEMPLATE_PATTERNS =
+            List.of("classpath*:META-INF/dirigible/template-application-ui-harmonia-java/**/*.template",
+                    "classpath*:META-INF/dirigible/template-form-builder-harmonia/**/*.template");
+
+    /** The opening tag of a table header cell. */
+    private static final Pattern TABLE_HEAD = Pattern.compile("<th\\b[^>]*>");
+
+    /** The opening tag of a step indicator trigger. */
+    private static final Pattern STEP_TRIGGER = Pattern.compile("<[a-z]+\\b[^>]*\\bx-h-step-indicator-trigger\\b[^>]*>");
+
+    @Test
+    void aSortableHeaderSortsThroughAButton() throws IOException {
+        List<String> problems = scan(TABLE_HEAD, tag -> tag.contains("@click"));
+        assertTrue(problems.isEmpty(), "a header cell that sorts on click is neither focusable nor operable from the keyboard - "
+                + "put a <button type=\"button\"> inside it and bind :aria-sort on the cell:\n" + String.join("\n", problems));
+    }
+
+    @Test
+    void theActiveStepIsAnnounced() throws IOException {
+        List<String> problems = scan(STEP_TRIGGER, tag -> !tag.contains(":aria-current"));
+        assertTrue(problems.isEmpty(), "Harmonia's step indicator marks the active step visually only - "
+                + "bind :aria-current=\"... ? 'step' : null\" on each trigger:\n" + String.join("\n", problems));
+    }
+
+    private static List<String> scan(Pattern tags, Predicate<String> isProblem) throws IOException {
+        List<String> problems = new ArrayList<>();
+        int templates = 0;
+        PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
+        for (String pattern : TEMPLATE_PATTERNS) {
+            for (Resource template : resolver.getResources(pattern)) {
+                templates++;
+                Matcher tag = tags.matcher(template.getContentAsString(StandardCharsets.UTF_8));
+                while (tag.find()) {
+                    if (isProblem.test(tag.group())) {
+                        problems.add(template.getFilename() + ": " + tag.group());
+                    }
+                }
+            }
+        }
+        assertTrue(templates > 20, "only " + templates + " Harmonia templates found on the classpath");
+        return problems;
+    }
+}
diff --git a/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/AccessibilityHarmoniaIT.java b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/AccessibilityHarmoniaIT.java
new file mode 100644
index 00000000000..6e652e307ca
--- /dev/null
+++ b/tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/ui/tests/AccessibilityHarmoniaIT.java
@@ -0,0 +1,338 @@
+/*
+ * Copyright (c) 2010-2026 Eclipse Dirigible contributors
+ *
+ * All rights reserved. This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-FileCopyrightText: Eclipse Dirigible contributors SPDX-License-Identifier: EPL-2.0
+ */
+package org.eclipse.dirigible.integration.tests.ui.tests;
+
+import static io.restassured.RestAssured.given;
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.UncheckedIOException;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.time.Duration;
+import java.util.ArrayList;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+import java.util.TreeMap;
+import java.util.concurrent.atomic.AtomicReference;
+import java.util.stream.Collectors;
+
+import org.eclipse.dirigible.components.initializers.synchronizer.SynchronizationProcessor;
+import org.eclipse.dirigible.repository.api.IRepository;
+import org.eclipse.dirigible.repository.api.IRepositoryStructure;
+import org.eclipse.dirigible.tests.base.UserInterfaceIntegrationTest;
+import org.eclipse.dirigible.tests.framework.restassured.RestAssuredExecutor;
+import org.junit.jupiter.api.Test;
+import org.openqa.selenium.By;
+import org.springframework.beans.factory.annotation.Autowired;
+
+import com.codeborne.selenide.CollectionCondition;
+import com.codeborne.selenide.Condition;
+import com.codeborne.selenide.Selenide;
+import com.codeborne.selenide.SelenideElement;
+import com.codeborne.selenide.WebDriverRunner;
+import com.deque.html.axecore.results.Check;
+import com.deque.html.axecore.results.CheckedNode;
+import com.deque.html.axecore.results.Results;
+import com.deque.html.axecore.results.Rule;
+import com.deque.html.axecore.selenium.AxeBuilder;
+import com.deque.html.axecore.selenium.AxeReporter;
+
+/**
+ * The pages the Harmonia template generates pass an axe-core scan against WCAG 2.1 A/AA (#7645).
+ * The generated markup carries ARIA where the component library put it, but nothing checked it, so
+ * any page was one template edit away from a regression no one sees.
+ *
+ * <p>
+ * An intent application is generated and published with a record in every page kind; axe-core then
+ * scans the manage list, the manage form, the document page, its read-only preview and the Inbox.
+ * Every page's full result is written under {@code target/failsafe-reports/axe/} - the folder the
+ * IT jobs upload whatever the outcome - with a summary of the counts per impact, and a
+ * {@code serious} or {@code critical} violation fails the test naming the page, the rule and the
+ * elements. {@code minor} and {@code moderate} findings are reported, not enforced.
+ */
+class AccessibilityHarmoniaIT extends UserInterfaceIntegrationTest {
+
+    private static final String PROJECT = "accessibility-it";
+    private static final String WORKSPACE = "workspace";
+    private static final String PROJECT_PATH = IRepositoryStructure.PATH_USERS + "/admin/" + WORKSPACE + "/" + PROJECT;
+    private static final String GENERATE_URL =
+            "/services/ide/intent/generate?workspace=" + WORKSPACE + "&project=" + PROJECT + "&path=app.intent";
+    private static final String API = "/services/java/" + PROJECT + "/gen/accessibility/api";
+    private static final String APP = "/services/web/" + PROJECT + "/gen/accessibility/index.html#";
+
+    /** The WCAG 2.1 level AA conformance rules, and the level A ones it includes. */
+    private static final List<String> WCAG_21_AA = List.of("wcag2a", "wcag2aa", "wcag21a", "wcag21aa");
+
+    /** The impacts that fail the test; the others are reported only. */
+    private static final Set<String> ENFORCED_IMPACTS = Set.of("serious", "critical");
+
+    /**
+     * The one finding not enforced: contrast against Harmonia's own primary colour. In Harmonia 3.1.2's
+     * default palette white on {@code --primary} is 3.67:1 in light mode and 4.43:1 in dark mode, and
+     * {@code --primary} as link text is 3.67:1 on the light and 4.26:1 on the dark background - and in
+     * dark mode no single token can meet 4.5:1 for both uses. It is fixed in codbex/harmonia, not per
+     * template. Only a node whose foreground or background IS that colour is exempt; every other
+     * contrast failure - a muted text the templates put on a tinted surface - is enforced.
+     */
+    private static final String CONTRAST_RULE = "color-contrast";
+
+    /** Resolves {@code var(--primary)} to the {@code #rrggbb} axe reports colours in. */
+    private static final String PRIMARY_COLOR = """
+            const probe = document.createElement('div');
+            probe.style.color = 'var(--primary)';
+            document.body.appendChild(probe);
+            const color = getComputedStyle(probe).color;
+            probe.remove();
+            const context = document.createElement('canvas').getContext('2d');
+            context.fillStyle = color;
+            context.fillRect(0, 0, 1, 1);
+            const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+            return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
+            """;
+
+    /** Every page is scanned in both colour schemes the theme menu offers. */
+    private static final List<String> COLOR_SCHEMES = List.of("light", "dark");
+
+    private static final Path REPORTS = Path.of("target", "failsafe-reports", "axe");
+
+    private static final Duration RENDER_TIMEOUT = Duration.ofSeconds(60);
+
+    private static final long POLL_INTERVAL_MILLIS = 250;
+
+    @Autowired
+    private IRepository repository;
+
+    @Autowired
+    private SynchronizationProcessor synchronizationProcessor;
+
+    @Autowired
+    private RestAssuredExecutor restAssuredExecutor;
+
+    @Test
+    void theGeneratedPagesHaveNoSeriousOrCriticalViolations() throws IOException {
+        generateAndPublish();
+        int customer = create("/customer/CustomerController", "{\"Name\":\"Acme\",\"Email\":\"office@acme.example\"}");
+        int invoice = create("/invoice/InvoiceController", "{\"Number\":\"INV-1\",\"Note\":\"First\",\"Customer\":" + customer + "}");
+        create("/invoice/InvoiceItemController", "{\"Product\":\"Widget\",\"Quantity\":2,\"Invoice\":" + invoice + "}");
+
+        // Authenticate the browser session first - a bare openPath lands on the sign-in form.
+        ide.openHomePage();
+
+        Map<String, String> pages = new LinkedHashMap<>();
+        pages.put("list", "/Customer");
+        pages.put("form", "/Customer/create");
+        pages.put("document", "/Invoice/" + invoice + "/edit");
+        pages.put("preview", "/Invoice/" + invoice + "/preview");
+        pages.put("inbox", "/inbox");
+        Map<String, String> readyWhen = Map.of( //
+                "list", "table tbody tr", //
+                "form", "#f_Name", //
+                "document", "#f_Note", //
+                "preview", "#f_Note", //
+                "inbox", "[x-h-split-panel]");
+
+        Files.createDirectories(REPORTS);
+        List<String> enforced = new ArrayList<>();
+        Map<String, Map<String, Integer>> countsByPage = new LinkedHashMap<>();
+        for (String scheme : COLOR_SCHEMES) {
+            for (Map.Entry<String, String> page : pages.entrySet()) {
+                String name = page.getKey() + "-" + scheme;
+                browser.openPath(APP + page.getValue());
+                Selenide.$(By.cssSelector(readyWhen.get(page.getKey())))
+                        .shouldBe(Condition.visible, RENDER_TIMEOUT);
+                // Pinned: the default follows the OS, which differs between a developer's machine and CI.
+                Selenide.executeJavaScript("Harmonia.setColorScheme(arguments[0])", scheme);
+                awaitTrue("return document.documentElement.classList.contains('dark') === (arguments[0] === 'dark')", scheme);
+                // The switch animates the colours; a scan mid-transition measures a colour neither scheme has.
+                awaitTrue("return document.getAnimations().every(animation => animation.playState !== 'running');");
+                Results results = new AxeBuilder().withTags(WCAG_21_AA)
+                                                  .analyze(WebDriverRunner.getWebDriver());
+                AxeReporter.writeResultsToJsonFile(REPORTS.resolve(name)
+                                                          .toString(),
+                        results);
+                countsByPage.put(name, countByImpact(results.getViolations()));
+                String primary = Selenide.executeJavaScript(PRIMARY_COLOR);
+                for (Rule violation : results.getViolations()) {
+                    if (!ENFORCED_IMPACTS.contains(violation.getImpact())) {
+                        continue;
+                    }
+                    List<CheckedNode> nodes = violation.getNodes()
+                                                       .stream()
+                                                       .filter(node -> !(CONTRAST_RULE.equals(violation.getId())
+                                                               && involvesColor(node, primary)))
+                                                       .toList();
+                    if (!nodes.isEmpty()) {
+                        enforced.add(name + ": " + describe(violation, nodes));
+                    }
+                }
+            }
+        }
+        Files.writeString(REPORTS.resolve("summary.txt"), summary(countsByPage), StandardCharsets.UTF_8);
+
+        assertTrue(enforced.isEmpty(), "serious or critical WCAG 2.1 AA violations on the generated pages (full report in " + REPORTS
+                + "):\n" + String.join("\n", enforced));
+
+        assertStatusStepIsAnnounced(invoice);
+        assertTheLineDialogReturnsFocus(invoice);
+    }
+
+    /** The status step indicator announces the active step, not only colours it. */
+    private void assertStatusStepIsAnnounced(int invoice) {
+        browser.openPath(APP + "/Invoice/" + invoice + "/edit");
+        Selenide.$$("[x-h-step-indicator-trigger][aria-current='step']")
+                .shouldHave(CollectionCondition.size(1), RENDER_TIMEOUT);
+    }
+
+    /**
+     * A dialog takes the focus when it opens and gives it back to what opened it when it closes -
+     * Harmonia's own contract, guarded here because a page that re-renders its opener breaks it. Closed
+     * with its Close button: the page wires no Esc dismissal for this dialog.
+     */
+    private void assertTheLineDialogReturnsFocus(int invoice) {
+        browser.openPath(APP + "/Invoice/" + invoice + "/edit");
+        SelenideElement add = Selenide.$("button[\\@click=\"openRowDialog(null)\"]")
+                                      .shouldBe(Condition.visible, RENDER_TIMEOUT);
+        add.click();
+        awaitTrue("const d = document.activeElement; return !!(d && d.closest('[x-h-dialog]'));");
+        Selenide.$("[x-h-dialog-overlay][data-open] [x-h-dialog-close]")
+                .shouldBe(Condition.visible, RENDER_TIMEOUT)
+                .click();
+        awaitTrue("return document.activeElement === document.querySelector('button[\\\\@click=\"openRowDialog(null)\"]');");
+    }
+
+    /** Polls a script until it answers true; fails naming the script when the render timeout passes. */
+    private static void awaitTrue(String script, Object... arguments) {
+        long deadline = System.currentTimeMillis() + RENDER_TIMEOUT.toMillis();
+        while (!Boolean.TRUE.equals(Selenide.executeJavaScript(script, arguments))) {
+            if (System.currentTimeMillis() > deadline) {
+                throw new AssertionError("Still false after " + RENDER_TIMEOUT.toSeconds() + " s: " + script);
+            }
+            Selenide.sleep(POLL_INTERVAL_MILLIS);
+        }
+    }
+
+    private static Map<String, Integer> countByImpact(List<Rule> violations) {
+        Map<String, Integer> counts = new TreeMap<>();
+        for (Rule violation : violations) {
+            counts.merge(String.valueOf(violation.getImpact()), violation.getNodes()
+                                                                         .size(),
+                    Integer::sum);
+        }
+        return counts;
+    }
+
+    private static String describe(Rule violation, List<CheckedNode> nodes) {
+        String targets = nodes.stream()
+                              .limit(5)
+                              .map(node -> String.valueOf(node.getTarget()))
+                              .collect(Collectors.joining(", "));
+        return "[" + violation.getImpact() + "] " + violation.getId() + " - " + violation.getHelp() + " (" + nodes.size() + " elements: "
+                + targets + ")";
+    }
+
+    /** Whether the contrast axe measured for the node has the given colour on either side. */
+    private static boolean involvesColor(CheckedNode node, String color) {
+        for (Check check : node.getAny()) {
+            if (check.getData() instanceof Map<?, ?> data
+                    && (sameColor(data.get("fgColor"), color) || sameColor(data.get("bgColor"), color))) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /** Two {@code #rrggbb} colours within the rounding of the colour-space conversions apart. */
+    private static boolean sameColor(Object measured, String expected) {
+        if (!(measured instanceof String hex) || hex.length() != 7 || expected == null || expected.length() != 7) {
+            return false;
+        }
+        for (int channel = 1; channel < 7; channel += 2) {
+            int a = Integer.parseInt(hex.substring(channel, channel + 2), 16);
+            int b = Integer.parseInt(expected.substring(channel, channel + 2), 16);
+            if (Math.abs(a - b) > 2) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private static String summary(Map<String, Map<String, Integer>> countsByPage) {
+        StringBuilder summary = new StringBuilder("axe-core WCAG 2.1 AA violations per page, by impact (elements)\n");
+        countsByPage.forEach((page, counts) -> summary.append(page)
+                                                      .append(": ")
+                                                      .append(counts.isEmpty() ? "none" : counts.toString())
+                                                      .append('\n'));
+        return summary.toString();
+    }
+
+    private int create(String controller, String body) {
+        AtomicReference<Integer> id = new AtomicReference<>();
+        restAssuredExecutor.execute(() -> id.set(given().contentType("application/json")
+                                                        .body(body)
+                                                        .when()
+                                                        .post(API + controller)
+                                                        .then()
+                                                        .statusCode(200)
+                                                        .extract()
+                                                        .path("Id")));
+        return id.get();
+    }
+
+    private void generateAndPublish() {
+        byte[] intent = resource(getClass().getSimpleName() + "/app.intent");
+        String path = PROJECT_PATH + "/app.intent";
+        if (repository.hasResource(path)) {
+            repository.getResource(path)
+                      .setContent(intent);
+        } else {
+            repository.createResource(path, intent);
+        }
+        AtomicReference<List<Map<String, Object>>> plan = new AtomicReference<>();
+        restAssuredExecutor.execute(() -> plan.set(given().when()
+                                                          .post(GENERATE_URL)
+                                                          .then()
+                                                          .statusCode(200)
+                                                          .extract()
+                                                          .jsonPath()
+                                                          .getList("codeGenerations")));
+        for (Map<String, Object> codeGeneration : plan.get()) {
+            assertEquals(Boolean.TRUE, codeGeneration.get("generated"),
+                    "generating code from " + codeGeneration.get("path") + " failed: " + codeGeneration.get("error"));
+        }
+        restAssuredExecutor.execute(() -> given().when()
+                                                 .post("/services/ide/publisher/" + WORKSPACE + "/" + PROJECT + "/")
+                                                 .then()
+                                                 .statusCode(200));
+        synchronizationProcessor.forceProcessSynchronizers();
+        restAssuredExecutor.execute(() -> given().when()
+                                                 .get(API + "/customer/CustomerController")
+                                                 .then()
+                                                 .statusCode(200),
+                RENDER_TIMEOUT.toSeconds());
+    }
+
+    private static byte[] resource(String name) {
+        try (InputStream in = AccessibilityHarmoniaIT.class.getClassLoader()
+                                                           .getResourceAsStream(name)) {
+            if (in == null) {
+                throw new IllegalStateException("No resource [" + name + "] on the classpath");
+            }
+            return in.readAllBytes();
+        } catch (IOException ex) {
+            throw new UncheckedIOException("Cannot read [" + name + "]", ex);
+        }
+    }
+}
diff --git a/tests/tests-integrations/src/main/resources/AccessibilityHarmoniaIT/app.intent b/tests/tests-integrations/src/main/resources/AccessibilityHarmoniaIT/app.intent
new file mode 100644
index 00000000000..6e566c00d27
--- /dev/null
+++ b/tests/tests-integrations/src/main/resources/AccessibilityHarmoniaIT/app.intent
@@ -0,0 +1,50 @@
+# The application AccessibilityHarmoniaIT generates and scans with axe-core. Each part is there for
+# one of the page kinds a generated application consists of: Customer renders the manage list and
+# form, Invoice the document page and its read-only preview (with the status step indicator and the
+# line items), the review process puts a task into the Inbox.
+name: accessibility
+entities:
+  - name: Customer
+    fields:
+      - { name: id,    type: integer, primaryKey: true, generated: true }
+      - { name: name,  type: string, length: 100, required: true }
+      - { name: email, type: string, length: 100 }
+      - { name: since, type: date }
+      - { name: vip,   type: boolean }
+  - name: Invoice
+    function: Document
+    fields:
+      - { name: id,     type: integer, primaryKey: true, generated: true }
+      - { name: number, type: string, length: 20, function: DocumentTitle }
+      - { name: date,   type: date }
+      - { name: note,   type: string, length: 200 }
+    relations:
+      - { name: Customer, kind: manyToOne, to: Customer, required: true }
+      - { name: Status,   kind: manyToOne, to: InvoiceStatus, function: EntityStatus, init: 1 }
+  - name: InvoiceItem
+    function: DocumentItem
+    fields:
+      - { name: id,       type: integer, primaryKey: true, generated: true }
+      - { name: product,  type: string, length: 100 }
+      - { name: quantity, type: decimal }
+    relations:
+      - { name: Invoice, kind: manyToOne, to: Invoice, composition: true, required: true }
+  - name: InvoiceStatus
+    kind: setting
+    fields:
+      - { name: id,   type: integer, primaryKey: true, generated: true }
+      - { name: name, type: string, length: 40 }
+processes:
+  # Left waiting on its review, so the Inbox has a task to show.
+  - name: InvoiceReview
+    trigger: { onCreate: Invoice }
+    steps:
+      - { name: review, kind: userTask, args: { assignee: reviewer, next: done } }
+      - { name: done,   kind: end }
+seeds:
+  - name: invoice-statuses
+    entity: InvoiceStatus
+    rows:
+      - { id: 1, name: Draft }
+      - { id: 2, name: Issued }
+      - { id: 3, name: Paid }