@keboola/validate-ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -8,6 +8,7 @@ import { z } from 'zod';
 import Anthropic from '@anthropic-ai/sdk';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
+import { brands, checkInteractiveContrast } from '@keboola/brand-registry';
 
 // src/types.ts
 var SEVERITIES = ["critical", "serious", "moderate", "minor"];
@@ -179,10 +180,85 @@ var serveStatic = async (rootDir) => {
     })
   };
 };
+
+// src/axes/clipped-text.ts
+var CLIP_TOLERANCE_PX = 2;
+var MAX_REPORTED = 10;
+var findClippedElements = ({
+  tolerance,
+  max
+}) => {
+  const describe = (el) => {
+    const tag = el.tagName.toLowerCase();
+    const label = el.getAttribute("aria-label");
+    if (label) return `${tag}[aria-label="${label}"]`;
+    if (el.id) return `${tag}#${el.id}`;
+    const name = el.getAttribute("name");
+    if (name) return `${tag}[name="${name}"]`;
+    const cls = typeof el.className === "string" && el.className.trim() ? `.${el.className.trim().split(/\s+/).slice(0, 2).join(".")}` : "";
+    return `${tag}${cls}`;
+  };
+  const results = [];
+  const reported = /* @__PURE__ */ new Set();
+  const hasReportedAncestor = (el) => {
+    let parent = el.parentElement;
+    while (parent) {
+      if (reported.has(parent)) return true;
+      parent = parent.parentElement;
+    }
+    return false;
+  };
+  for (const el of document.querySelectorAll("*")) {
+    if (results.length >= max) break;
+    if (hasReportedAncestor(el)) continue;
+    const style = window.getComputedStyle(el);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
+      continue;
+    }
+    if (el.clientWidth <= 1 || el.clientHeight <= 1) continue;
+    const overflowX = style.overflowX;
+    const isFormValue = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement;
+    const isSingleLineInput = el instanceof HTMLInputElement;
+    if (!isSingleLineInput && overflowX !== "hidden" && overflowX !== "clip") continue;
+    if (!isSingleLineInput && style.textOverflow === "ellipsis") continue;
+    const overflowBy = el.scrollWidth - el.clientWidth;
+    if (overflowBy <= tolerance) continue;
+    const text = isFormValue ? el.value : (el.textContent ?? "").trim();
+    if (!text) continue;
+    reported.add(el);
+    results.push({
+      selector: describe(el),
+      text: text.length > 40 ? `${text.slice(0, 40)}\u2026` : text,
+      visibleWidth: Math.round(el.clientWidth),
+      contentWidth: Math.round(el.scrollWidth),
+      isInput: isFormValue
+    });
+  }
+  return results;
+};
+var toFinding = (clipped) => ({
+  message: `Content is cut off with no way to reveal it (${clipped.selector})`,
+  severity: "serious",
+  detail: `${clipped.isInput ? "Input value" : "Text"} "${clipped.text}" needs ${clipped.contentWidth}px but has ${clipped.visibleWidth}px. Widen the element, or make the truncation explicit with \`text-overflow: ellipsis\`.`
+});
+var clippedTextFindings = async (page) => {
+  try {
+    const clipped = await page.evaluate(findClippedElements, {
+      tolerance: CLIP_TOLERANCE_PX,
+      max: MAX_REPORTED
+    });
+    return clipped.map(toFinding);
+  } catch (error) {
+    console.error("clipped-text: could not inspect the page", error);
+    return [];
+  }
+};
+
+// src/axes/accessibility.ts
 var IMPACTS = ["critical", "serious", "moderate", "minor"];
 var toSeverity = (impact) => impact && IMPACTS.includes(impact) ? impact : "minor";
 var wcagTag = (tags) => tags.find((tag) => tag.startsWith("wcag")) ?? tags[0];
-var toFinding = (violation) => {
+var toFinding2 = (violation) => {
   const targets = violation.nodes.map((node) => node.target.join(" ")).filter((target) => target.length > 0).join(", ");
   const wcag = wcagTag(violation.tags);
   return {
@@ -209,7 +285,7 @@ var accessibilityAxis = {
     if (results === null) {
       return notAssessed("a11y not assessed: axe-core failed to inject (page CSP?)");
     }
-    const findings = results.violations.map(toFinding);
+    const findings = [...results.violations.map(toFinding2), ...await clippedTextFindings(page)];
     const pass = !findings.some(
       (finding) => finding.severity === "critical" || finding.severity === "serious"
     );
@@ -725,8 +801,10 @@ var runtimeHealthAxis = {
 };
 var DRIFT_THRESHOLD = 0.01;
 var RESKIN_THRESHOLD = 5e-3;
+var DRIFT_PIXEL_THRESHOLD = 0.1;
+var RESKIN_PIXEL_THRESHOLD = 0.02;
 var DEFAULT_ALT_BRAND = "example-customer";
-var pngMismatchRatio = (a, b) => {
+var pngMismatchRatio = (a, b, pixelThreshold = DRIFT_PIXEL_THRESHOLD) => {
   const imgA = PNG.sync.read(Buffer.from(a));
   const imgB = PNG.sync.read(Buffer.from(b));
   if (imgA.width !== imgB.width || imgA.height !== imgB.height) {
@@ -735,7 +813,7 @@ var pngMismatchRatio = (a, b) => {
   const total = imgA.width * imgA.height;
   if (total === 0) return { ratio: 0, sizeMismatch: false };
   const mismatched = pixelmatch(imgA.data, imgB.data, void 0, imgA.width, imgA.height, {
-    threshold: 0.1
+    threshold: pixelThreshold
   });
   return { ratio: mismatched / total, sizeMismatch: false };
 };
@@ -756,8 +834,16 @@ var baselineFinding = (screenshot, baseline) => {
   }
   return null;
 };
-var altBrandFinding = (screenshot, altScreenshot, brand) => {
-  const { ratio } = pngMismatchRatio(screenshot, altScreenshot);
+var altBrandWasApplied = (altDom, brand) => altDom.includes(`data-brand="${brand}"`);
+var altBrandFinding = (screenshot, altScreenshot, brand, altDom) => {
+  if (!altBrandWasApplied(altDom, brand)) {
+    return {
+      message: `alt-brand re-skin not assessed: the app did not apply '${brand}' from ?brand=`,
+      severity: "minor",
+      detail: "Brand is usually build configuration rather than a runtime switch. To have this axis assess re-skinning, register the alternate brand and resolve the active id from the `brand` query parameter."
+    };
+  }
+  const { ratio } = pngMismatchRatio(screenshot, altScreenshot, RESKIN_PIXEL_THRESHOLD);
   if (ratio < RESKIN_THRESHOLD) {
     return {
       message: `chrome did not re-skin under alternate brand '${brand}'`,
@@ -767,6 +853,11 @@ var altBrandFinding = (screenshot, altScreenshot, brand) => {
   }
   return null;
 };
+var interactiveContrastFindings = (brand) => checkInteractiveContrast(brand).map((warning) => ({
+  message: `brand '${brand.id}' ${warning.message}`,
+  severity: "moderate",
+  detail: `${warning.foreground} on ${warning.background} (${warning.palette})`
+}));
 var overflowFinding = async (page) => {
   const overflows = await page.evaluate(
     () => document.documentElement.scrollWidth > document.documentElement.clientWidth
@@ -790,9 +881,12 @@ var visualBrandAxis = {
       const finding = altBrandFinding(
         artifact.screenshot,
         altArtifact.screenshot,
-        DEFAULT_ALT_BRAND
+        DEFAULT_ALT_BRAND,
+        altArtifact.dom
       );
       if (finding !== null) findings.push(finding);
+      const altBrand = brands.find((brand) => brand.id === DEFAULT_ALT_BRAND);
+      if (altBrand !== void 0) findings.push(...interactiveContrastFindings(altBrand));
     }
     if (page !== void 0) {
       const finding = await overflowFinding(page);