Skip to content

feat: support URL sources upload to portal #1235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hanna-skryl wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: support URL sources upload to portal #1235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0279e87
feat(core,ci): support URL sources upload to portal
hanna-skryl Feb 3, 2026
512c0fe
refactor(plugin-axe): use structured check messages
hanna-skryl Feb 3, 2026
6c3dff0
fix(plugin-axe): update e2e snapshot for new message format
hanna-skryl Feb 3, 2026
6fe2ae5
test(plugin-axe): add coverage for multi-check issues
hanna-skryl Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions e2e/plugin-axe-e2e/tests/__snapshots__/collect.e2e.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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\"]",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/ci/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
30 changes: 30 additions & 0 deletions packages/ci/src/lib/portal/__snapshots__/transform.unit.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}
Expand Down
11 changes: 11 additions & 0 deletions packages/ci/src/lib/portal/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
},
}),
};
}

Expand Down
36 changes: 36 additions & 0 deletions packages/ci/src/lib/portal/transform.unit.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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)',
},
},
},
],
},
};
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
8 changes: 7 additions & 1 deletion packages/core/src/lib/implementation/report-to-gql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
}),
};
}

Expand Down
23 changes: 22 additions & 1 deletion packages/core/src/lib/implementation/report-to-gql.unit.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand All @@ -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', () => {
Expand Down
32 changes: 20 additions & 12 deletions packages/plugin-axe/src/lib/runner/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type {
AuditOutputs,
Issue,
IssueSeverity,
SourceUrlLocation,
} from '@code-pushup/models';
import {
formatIssueSeverities,
Expand Down Expand Up @@ -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('. ');
Copy link
Collaborator

@matejchalk matejchalk Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The unit tests don't cover a case where there are multiple messages in all or none. If it's a realistic case, I would test that checks the messages are joined correctly.

Copy link
Collaborator Author

@hanna-skryl hanna-skryl Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a realistic case. Thanks for the pointer!

}
return node.any[0]?.message ?? fallback;
Copy link
Collaborator

@matejchalk matejchalk Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible that using only the first message in any omits useful information?

Copy link
Collaborator Author

@hanna-skryl hanna-skryl Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so. The any array contains alternative ways to fix the issue, and the first message is typically the most direct fix. The rest are just fallback options covered by the audit's docs link.

For example, an "Images must have alternative text" audit has only any failures:

  • 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""

The first message is a compact, actionable fix, and the other alternatives are already mentioned in the audit docs.

Alternatively, a "Links must have discernible text" audit has both none and any failures:

none:

  • Element is in tab order and does not have accessible text

any:

  • 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

The none message is the actual problem.

I also initially thought all the failure messages were useful, but they really aren't.

Copy link
Collaborator Author

@hanna-skryl hanna-skryl Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, the Axe audit title and the docs URL usually provide all the necessary context to describe the failure. The issue source seems much more useful than the message. So, there is no need to clutter issue messages with full failure summaries.

}

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 }),
},
};
}

Expand Down
Loading