@hmcts/media-viewer 4.2.37 → 4.2.38-innerhtml-security-update

package/README.md

@@ -245,18 +245,18 @@ Stop the local processes with `Ctrl+C`, then clean up Redis from the ICP worktre
 `docker compose -f docker-compose.yml down`.
 
 ### 5. Run Playwright tests
-Media Viewer is starting its Playwright migration with the same runner and
-reporting shape used in MC and MO, scaled to the current smoke coverage. The
-legacy Protractor and CodeceptJS functional packs still exist; new browser
-coverage should be added under `playwright_tests/`.
+Media Viewer uses the Playwright runner and reporting shape used in MC and MO.
+The CodeceptJS and Protractor/Cucumber runners are retired. New browser coverage
+belongs under `playwright_tests/`.
 
 Current Playwright lanes:
 
 | Lane | Config/project | Command | Scope |
 | --- | --- | --- | --- |
 | Standalone smoke | `playwright.config.ts`, project `smoke` | `yarn test:playwright:smoke` or `yarn test:smoke` | One readiness contract: loads a standalone PDF and proves the rendered viewer, first page and canvas are usable. |
-| Migrated functional | `playwright.config.ts`, project `functional` | `yarn test:playwright:functional` | 74 fixture-backed browser contracts across 13 feature files, including separate failed PDF/image rendered-state diagnostics. Two additional image-annotation create contracts are discoverable, ticketed against [EXUI-5124](https://tools.hmcts.net/jira/browse/EXUI-5124), and excluded from the default selection because the current product does not persist an image draw-box annotation. See [`playwright_tests/functional/README.md`](playwright_tests/functional/README.md). |
+| Migrated functional | `playwright.config.ts`, project `functional` | `yarn test:playwright:functional` | 84 default fixture-backed browser contracts across 13 feature files, with 86 discoverable when the two EXUI-5124 image-annotation contracts are explicitly included. Multimedia coverage is Chromium-only; external AAT/CCD contracts are separate diagnostics and are not migration assurance. See [`playwright_tests/functional/README.md`](playwright_tests/functional/README.md). |
 | External service diagnostics | `playwright.config.ts`, opt-in project `external-service-contracts` | `yarn test:playwright:external-service-contracts` | Optional live AAT CCD/DM Store/annotation probes for a deliberate environment investigation. The default command executes 6 non-defect service contracts; four CCD browser-route contracts tagged against [EXUI-5122](https://tools.hmcts.net/jira/browse/EXUI-5122) and [EXUI-5123](https://tools.hmcts.net/jira/browse/EXUI-5123) remain discoverable but are excluded by default. Use `PLAYWRIGHT_INCLUDE_KNOWN_DEFECTS=true` to discover and execute all 10. They are never part of normal PR assurance. |
+| Cross-browser smoke | `playwright.config.ts`, projects `smoke-firefox` and `smoke-webkit` | `yarn test:crossbrowser` | Runs the same readiness contract in Firefox and WebKit and publishes separate JUnit/Odhín output under `functional-output/tests/playwright-crossbrowser`. |
 | Viewer support | `playwright.config.ts`, project `support` | `yarn test:playwright:support` | Proves the reusable PDF, image and unsupported-media fixtures, component objects and response diagnostics. |
 
 The current migration slice is deliberately separated from smoke: smoke proves
@@ -274,10 +274,10 @@ route mocks. Tests must not depend on execution order or share mutable
 documents; mutation-heavy AAT journeys must provision a document per test or
 reset it before reuse.
 
-Install Chromium once before local runs when the browser cache is empty:
+Install the Playwright browsers once before local runs when the browser cache is empty:
 
 ```
-yarn test:setup:playwright-install-chromium
+yarn test:setup:playwright-install-browsers
 ```
 
 Run the smoke project against a running standalone demo app. Start the app in
@@ -291,12 +291,16 @@ Then run the smoke in another terminal:
 
 ```
 yarn test:playwright:smoke
+# unified Playwright accessibility pack (Axe, WAVE-like, screen-reader-like)
+yarn test:a11y
+# Firefox and WebKit smoke gate
+yarn test:crossbrowser
 ```
 
 Override the smoke document and case id with `MV_SMOKE_PDF_DOCUMENT_URL` and
 `MV_SMOKE_CASE_ID`. `yarn test:smoke` and `yarn test:local:aat` run the
 Playwright smoke, so the standalone and local-AAT PDF loading journeys no longer
-fall back to CodeceptJS.
+use only the Playwright projects.
 
 The lane wrapper commands write Playwright evidence under `functional-output/tests`:
 
@@ -305,6 +309,8 @@ The lane wrapper commands write Playwright evidence under `functional-output/tes
 | Viewer support | `functional-output/tests/playwright-support/odhin-report/xui-playwright-support.html` | `functional-output/tests/playwright-support/playwright-support-junit.xml` | `functional-output/tests/playwright-support/test-results` |
 | Smoke | `functional-output/tests/playwright-smoke/odhin-report/xui-playwright-smoke.html` | `functional-output/tests/playwright-smoke/playwright-smoke-junit.xml` | `functional-output/tests/playwright-smoke/test-results` |
 | Migrated functional | `functional-output/tests/playwright-functional/odhin-report/xui-playwright-functional.html` | `functional-output/tests/playwright-functional/playwright-functional-junit.xml` | `functional-output/tests/playwright-functional/test-results` |
+| Accessibility | `functional-output/tests/playwright-accessibility/odhin-report/xui-playwright-accessibility.html` | `functional-output/tests/playwright-accessibility/playwright-accessibility-junit.xml` | `functional-output/tests/playwright-accessibility/test-results` |
+| Cross-browser smoke | `functional-output/tests/playwright-crossbrowser/odhin-report/xui-playwright-crossbrowser.html` | `functional-output/tests/playwright-crossbrowser/playwright-crossbrowser-junit.xml` | `functional-output/tests/playwright-crossbrowser/test-results` |
 
 Those are the default lane-specific paths. CNP keeps preview and AAT viewer
 support evidence separate under `functional-output/tests/playwright-support/preview`
@@ -336,9 +342,10 @@ Reporting behavior follows the MC/MO pattern:
   HTML Publisher links.
 
 The Jenkins `YarnBuilder` performs its immutable dependency install before the
-first setup task. The pipeline then installs Puppeteer Chrome once for legacy
-tests and Chromium into the workspace-local `PLAYWRIGHT_BROWSERS_PATH`, and sets
-`PLAYWRIGHT_SKIP_INSTALL=true` so Playwright lanes do not reinstall it.
+first setup task. The pipeline installs Puppeteer Chrome for Karma and the
+functional preflight, then installs Chromium into the workspace-local
+`PLAYWRIGHT_BROWSERS_PATH` and sets `PLAYWRIGHT_SKIP_INSTALL=true` so Playwright
+lanes do not reinstall it.
 
 Useful overrides:
 - `PLAYWRIGHT_BASE_URL` or `TEST_URL`: target application URL, default `http://localhost:3000/`
@@ -384,10 +391,6 @@ Migration boundaries:
 - Put new native Playwright specs under `playwright_tests/`.
 - Keep screen interactions and reusable locators in page objects under
   `playwright_tests/pages/`; keep assertions visible in specs.
-- Historical CodeceptJS scenarios are retained as source traceability only;
-  their executable pipeline routing is retired once the mapped Playwright
-  contract is selected by default or is represented by a discoverable,
-  ticketed product-defect contract.
 - Add stable report output paths for every new Playwright lane so Jenkins can
   publish Odhín and JUnit and archive failure diagnostics without bespoke stage
   logic.
@@ -607,7 +610,9 @@ The list of exceptions thrown by the Media Viewer are as follows:
 - HttpErrorResponse
 - PasswordException
 
-## Cucumber Tests
- ```
-  npm run package, npm run e2e:cucumber
-  ```
+## Legacy browser tests
+
+The CodeceptJS and Protractor/Cucumber runners were retired as part of the
+Playwright migration. Migration closure was recorded in PR #82; the active
+browser test source is now Playwright. Use the Playwright commands above for
+supported browser tests. No recurring legacy-parity test is retained.

package/fesm2022/hmcts-media-viewer.mjs

@@ -3353,26 +3353,55 @@ class TextHighlightDirective {
     highlightInputText(textToHighlight) {
         this.resetHighlight();
         this.textToHighlight = textToHighlight;
-        const searchPattern = new RegExp(textToHighlight, 'gi');
+        const searchPattern = new RegExp(this.escapeRegExp(textToHighlight), 'gi');
         const hostElement = this.element.nativeElement;
-        if (hostElement.innerHTML.match(searchPattern)) {
-            hostElement.innerHTML = hostElement.innerHTML
-                .replace(searchPattern, this.highlightPattern('$&'));
-        }
+        this.highlightTextNodes(hostElement, searchPattern);
         this.textToHighlight = undefined;
     }
     resetHighlight() {
         const hostElement = this.element.nativeElement;
-        const searchPattern = new RegExp(this.highlightPattern('(.*?)'), 'gi');
-        while (hostElement.innerHTML.match(searchPattern)) {
-            const matchGroups = searchPattern.exec(hostElement.innerHTML);
-            if (matchGroups) {
-                hostElement.innerHTML = hostElement.innerHTML.replace(matchGroups[0], matchGroups[1]);
+        Array.from(hostElement.querySelectorAll('span.mvTextHighlight')).forEach((highlightElement) => {
+            highlightElement.replaceWith(document.createTextNode(highlightElement.textContent || ''));
+        });
+        hostElement.normalize();
+    }
+    highlightTextNodes(hostElement, searchPattern) {
+        const walker = document.createTreeWalker(hostElement, NodeFilter.SHOW_TEXT);
+        const textNodes = [];
+        let currentNode = walker.nextNode();
+        while (currentNode) {
+            textNodes.push(currentNode);
+            currentNode = walker.nextNode();
+        }
+        textNodes.forEach((textNode) => this.highlightTextNode(textNode, searchPattern));
+    }
+    highlightTextNode(textNode, searchPattern) {
+        const text = textNode.textContent || '';
+        const matches = Array.from(text.matchAll(searchPattern));
+        if (matches.length === 0) {
+            return;
+        }
+        const fragment = document.createDocumentFragment();
+        let currentIndex = 0;
+        matches.forEach((match) => {
+            const matchIndex = match.index || 0;
+            const matchText = match[0];
+            if (matchIndex > currentIndex) {
+                fragment.appendChild(document.createTextNode(text.slice(currentIndex, matchIndex)));
             }
+            const highlightElement = document.createElement('span');
+            highlightElement.className = 'mvTextHighlight';
+            highlightElement.textContent = matchText;
+            fragment.appendChild(highlightElement);
+            currentIndex = matchIndex + matchText.length;
+        });
+        if (currentIndex < text.length) {
+            fragment.appendChild(document.createTextNode(text.slice(currentIndex)));
         }
+        textNode.replaceWith(fragment);
     }
-    highlightPattern(dynamicText) {
-        return '<span class="mvTextHighlight">' + dynamicText + '</span>';
+    escapeRegExp(value) {
+        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: TextHighlightDirective, isStandalone: false, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 }); }
@@ -7943,12 +7972,14 @@ class GovUkLabelComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GovUkLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: GovUkLabelComponent, isStandalone: false, selector: "mv-gov-label", inputs: { config: "config" }, ngImport: i0, template: `<h1 *ngIf="config.isPageHeading else noHeading">
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id" [innerHTML]="config.label">
+                 [for]="config.id">
+            {{ config.label }}
           </label>
         </h1>
         <ng-template #noHeading>
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id" [innerHTML]="config.label">
+                 [for]="config.id">
+            {{ config.label }}
           </label>
         </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -7959,12 +7990,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     selector: 'mv-gov-label',
                     template: `<h1 *ngIf="config.isPageHeading else noHeading">
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id" [innerHTML]="config.label">
+                 [for]="config.id">
+            {{ config.label }}
           </label>
         </h1>
         <ng-template #noHeading>
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
-                 [for]="config.id" [innerHTML]="config.label">
+                 [for]="config.id">
+            {{ config.label }}
           </label>
         </ng-template>
   `,