feat: support URL sources upload to portal (#1235)

hanna-skryl · web-flow · commit d8efcb6c6375 · 2026-02-04T11:15:52.000-05:00
diff --git a/e2e/plugin-axe-e2e/tests/__snapshots__/collect.e2e.test.ts.snap b/e2e/plugin-axe-e2e/tests/__snapshots__/collect.e2e.test.ts.snap
@@ -497,7 +497,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
           "details": {
             "issues": [
               {
-                "message": "[\`body > button\`] Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> Element's default semantics were not overridden with role="none" or role="presentation"",
+                "message": "Element does not have inner text that is visible to screen readers",
                 "severity": "error",
                 "source": {
                   "selector": "body > button",
@@ -528,7 +528,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
           "details": {
             "issues": [
               {
-                "message": "[\`.low-contrast\`] Fix any of the following: Element has insufficient color contrast of 1.57 (foreground color: #777777, background color: #999999, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
+                "message": "Element has insufficient color contrast of 1.57 (foreground color: #777777, background color: #999999, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
                 "severity": "error",
                 "source": {
                   "selector": ".low-contrast",
@@ -624,7 +624,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
           "details": {
             "issues": [
               {
-                "message": "[\`div[role="button"]\`] Fix any of the following: Invalid ARIA attribute name: aria-invalid-attribute",
+                "message": "Invalid ARIA attribute name: aria-invalid-attribute",
                 "severity": "error",
                 "source": {
                   "selector": "div[role=\"button\"]",
@@ -648,7 +648,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
           "details": {
             "issues": [
               {
-                "message": "[\`img\`] Fix any of the following: Element does not have an alt attribute aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"",
+                "message": "Element does not have an alt attribute",
                 "severity": "error",
                 "source": {
                   "selector": "img",
@@ -670,7 +670,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
           "details": {
             "issues": [
               {
-                "message": "[\`a\`] Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute",
+                "message": "Element is in tab order and does not have accessible text",
                 "severity": "error",
                 "source": {
                   "selector": "a",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
   "private": true,
   "dependencies": {
     "@axe-core/playwright": "^4.11.0",
-    "@code-pushup/portal-client": "^0.16.0",
+    "@code-pushup/portal-client": "^0.17.0",
     "@nx/devkit": "22.3.3",
     "@swc/helpers": "0.5.18",
     "ansis": "^3.3.2",
diff --git a/packages/ci/package.json b/packages/ci/package.json
@@ -27,7 +27,7 @@
   "type": "module",
   "dependencies": {
     "@code-pushup/models": "0.112.0",
-    "@code-pushup/portal-client": "^0.16.0",
+    "@code-pushup/portal-client": "^0.17.0",
     "@code-pushup/utils": "0.112.0",
     "ansis": "^3.3.2",
     "glob": "^11.0.1",
diff --git a/packages/ci/src/lib/portal/__snapshots__/transform.unit.test.ts.snap b/packages/ci/src/lib/portal/__snapshots__/transform.unit.test.ts.snap
@@ -197,6 +197,36 @@ exports[`transformGQLReport > should convert full GraphQL report to valid report
       "slug": "bundle-stats",
       "title": "Bundle stats",
     },
+    {
+      "audits": [
+        {
+          "details": {
+            "issues": [
+              {
+                "message": "Element has insufficient color contrast of 4.33",
+                "severity": "error",
+                "source": {
+                  "selector": ".hero > span:nth-child(2)",
+                  "snippet": "<span style="color: #aaa">Low contrast</span>",
+                  "url": "https://example.com/",
+                },
+              },
+            ],
+          },
+          "displayValue": "1 error",
+          "score": 0,
+          "slug": "color-contrast",
+          "title": "Elements must meet minimum color contrast ratio thresholds",
+          "value": 1,
+        },
+      ],
+      "date": "2025-08-01T00:10:25.000Z",
+      "duration": 5000,
+      "groups": [],
+      "icon": "folder-syntax",
+      "slug": "axe",
+      "title": "Axe accessibility",
+    },
   ],
   "version": "0.42.0",
 }
diff --git a/packages/ci/src/lib/portal/transform.ts b/packages/ci/src/lib/portal/transform.ts
@@ -166,6 +166,17 @@ function transformGQLIssue(issue: IssueFragment): Issue {
         }),
       },
     }),
+    ...(issue.source?.__typename === 'SourceUrlLocation' && {
+      source: {
+        url: issue.source.url,
+        ...(issue.source.snippet != null && {
+          snippet: issue.source.snippet,
+        }),
+        ...(issue.source.selector != null && {
+          selector: issue.source.selector,
+        }),
+      },
+    }),
   };
 }
 
diff --git a/packages/ci/src/lib/portal/transform.unit.test.ts b/packages/ci/src/lib/portal/transform.unit.test.ts
@@ -207,6 +207,29 @@ describe('transformGQLReport', () => {
         },
         groups: [],
       },
+      {
+        slug: 'axe',
+        title: 'Axe accessibility',
+        icon: 'folder-syntax',
+        runnerStartDate: '2025-08-01T00:10:25.000Z',
+        runnerDuration: 5000,
+        audits: {
+          edges: [
+            {
+              node: {
+                slug: 'color-contrast',
+                title:
+                  'Elements must meet minimum color contrast ratio thresholds',
+                score: 0,
+                value: 1,
+                formattedValue: '1 error',
+                details: { enabled: true, trees: [], tables: [] },
+              },
+            },
+          ],
+        },
+        groups: [],
+      },
     ],
     issues: {
       edges: [
@@ -231,6 +254,19 @@ describe('transformGQLReport', () => {
             severity: IssueSeverity.Warning,
           },
         },
+        {
+          node: {
+            audit: { plugin: { slug: 'axe' }, slug: 'color-contrast' },
+            message: 'Element has insufficient color contrast of 4.33',
+            severity: IssueSeverity.Error,
+            source: {
+              __typename: 'SourceUrlLocation',
+              url: 'https://example.com/',
+              snippet: '<span style="color: #aaa">Low contrast</span>',
+              selector: '.hero > span:nth-child(2)',
+            },
+          },
+        },
       ],
     },
   };
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -44,7 +44,7 @@
     "ansis": "^3.3.0"
   },
   "peerDependencies": {
-    "@code-pushup/portal-client": "^0.16.0"
+    "@code-pushup/portal-client": "^0.17.0"
   },
   "peerDependenciesMeta": {
     "@code-pushup/portal-client": {
diff --git a/packages/core/src/lib/implementation/report-to-gql.ts b/packages/core/src/lib/implementation/report-to-gql.ts
@@ -33,7 +33,7 @@ import type {
   TableAlignment,
   Tree,
 } from '@code-pushup/models';
-import { isFileIssue } from '@code-pushup/utils';
+import { isFileIssue, isUrlIssue } from '@code-pushup/utils';
 
 export function reportToGQL(
   report: Report,
@@ -115,6 +115,12 @@ export function issueToGQL(issue: Issue): PortalIssue {
       sourceEndLine: issue.source.position?.endLine,
       sourceEndColumn: issue.source.position?.endColumn,
     }),
+    ...(isUrlIssue(issue) && {
+      sourceType: safeEnum<PortalIssueSourceType>('Url'),
+      sourceUrl: issue.source.url,
+      sourceSnippet: issue.source.snippet,
+      sourceSelector: issue.source.selector,
+    }),
   };
 }
 
diff --git a/packages/core/src/lib/implementation/report-to-gql.unit.test.ts b/packages/core/src/lib/implementation/report-to-gql.unit.test.ts
@@ -2,7 +2,7 @@ import { type AuditReportTree, TreeType } from '@code-pushup/portal-client';
 import { issueToGQL, tableToGQL, treeToGQL } from './report-to-gql.js';
 
 describe('issueToGQL', () => {
-  it('transforms issue to GraphQL input type', () => {
+  it('should transform issue with file source to GraphQL input type', () => {
     expect(
       issueToGQL({
         message: 'No let, use const instead.',
@@ -23,6 +23,27 @@ describe('issueToGQL', () => {
       sourceEndColumn: 25,
     });
   });
+
+  it('should transform issue with URL source to GraphQL input type', () => {
+    expect(
+      issueToGQL({
+        message: 'Fix any of the following: Unable to determine contrast ratio',
+        severity: 'error',
+        source: {
+          url: 'https://code-pushup.dev/',
+          snippet: '<span>measure development KPIs</span>',
+          selector: '.text-box > span:nth-child(3)',
+        },
+      }),
+    ).toStrictEqual({
+      message: 'Fix any of the following: Unable to determine contrast ratio',
+      severity: 'Error',
+      sourceSelector: '.text-box > span:nth-child(3)',
+      sourceSnippet: '<span>measure development KPIs</span>',
+      sourceType: 'Url',
+      sourceUrl: 'https://code-pushup.dev/',
+    });
+  });
 });
 
 describe('tableToGQL', () => {
diff --git a/packages/plugin-axe/src/lib/runner/transform.ts b/packages/plugin-axe/src/lib/runner/transform.ts
@@ -4,7 +4,6 @@ import type {
   AuditOutputs,
   Issue,
   IssueSeverity,
-  SourceUrlLocation,
 } from '@code-pushup/models';
 import {
   formatIssueSeverities,
@@ -71,26 +70,35 @@ function formatSelector(selector: axe.CrossTreeSelector): string {
   return selector.join(' >> ');
 }
 
+/**
+ * Joins `none`/`all` check messages (each must be fixed).
+ * Falls back to first `any` check (OR-ed, one represents the group).
+ */
+function formatNodeMessage(node: axe.NodeResult, fallback: string): string {
+  const requiredMessages = [...node.none, ...node.all].map(
+    check => check.message,
+  );
+  if (requiredMessages.length > 0) {
+    return requiredMessages.join('. ');
+  }
+  return node.any[0]?.message ?? fallback;
+}
+
 function toIssue(node: axe.NodeResult, result: axe.Result, url: string): Issue {
   const selector = node.target?.[0]
     ? formatSelector(node.target[0])
     : undefined;
-  const rawMessage = node.failureSummary || result.help;
-  const cleanMessage = rawMessage.replace(/\s+/g, ' ').trim();
-
-  // TODO: Remove selector prefix from message once Portal supports URL sources
-  const message = selector ? `[\`${selector}\`] ${cleanMessage}` : cleanMessage;
 
-  const source: SourceUrlLocation = {
-    url,
-    ...(node.html && { snippet: node.html }),
-    ...(selector && { selector }),
-  };
+  const message = formatNodeMessage(node, result.help);
 
   return {
     message: truncateIssueMessage(message),
     severity: impactToSeverity(node.impact),
-    source,
+    source: {
+      url,
+      ...(node.html && { snippet: node.html }),
+      ...(selector && { selector }),
+    },
   };
 }
 
diff --git a/packages/plugin-axe/src/lib/runner/transform.unit.test.ts b/packages/plugin-axe/src/lib/runner/transform.unit.test.ts
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
