From 0f3ee8b4185b0aa1c26a45a8af140a90a96bb289 Mon Sep 17 00:00:00 2001 From: Leslie Lawendel Date: Thu, 23 Oct 2025 12:48:43 +0200 Subject: [PATCH 1/3] chore(workflows): update github action token input from GITHUB_TOKEN to github-token --- .github/workflows/axe.yaml | 2 +- .github/workflows/lighthouse.yaml | 2 +- .github/workflows/pa11y.yaml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/axe.yaml b/.github/workflows/axe.yaml index 0c4601c..55e6434 100644 --- a/.github/workflows/axe.yaml +++ b/.github/workflows/axe.yaml @@ -78,4 +78,4 @@ jobs: uses: thollander/actions-comment-pull-request@v3 with: message: "♿ Axe detected ${{ needs.axe.outputs.issue_count }} accessibility issue(s) – please review [here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})." - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + github-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/lighthouse.yaml b/.github/workflows/lighthouse.yaml index 13ccd81..253f01d 100644 --- a/.github/workflows/lighthouse.yaml +++ b/.github/workflows/lighthouse.yaml @@ -86,4 +86,4 @@ jobs: uses: thollander/actions-comment-pull-request@v3 with: message: "♿ Lighthouse detected ${{ needs.lighthouse.outputs.issue_count }} accessibility issue(s) – please review [here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})." - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + github-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/pa11y.yaml b/.github/workflows/pa11y.yaml index 04e2fa9..73e082a 100644 --- a/.github/workflows/pa11y.yaml +++ b/.github/workflows/pa11y.yaml @@ -72,4 +72,4 @@ jobs: uses: thollander/actions-comment-pull-request@v3 with: message: "♿ Pa11y detected ${{ needs.pa11y.outputs.issue_count }} accessibility issue(s) – please review [here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})." - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + github-token: ${{ secrets.GITHUB_TOKEN }} From 18f49dcd0e6b9a5469d823b97ee5f3c7cb66a2b6 Mon Sep 17 00:00:00 2001 From: Leslie Lawendel Date: Thu, 23 Oct 2025 12:50:23 +0200 Subject: [PATCH 2/3] chore(workflows): silently run playwright axe tests --- .github/workflows/playwright.yml | 76 +++++++++++++++++++++++--------- .gitignore | 1 + e2e/basic.spec.ts | 23 ++++++++-- 3 files changed, 75 insertions(+), 25 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index aa16a39..bfebc52 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -1,27 +1,61 @@ -name: Playwright Tests +name: Playwright Accessibility Tests + on: - push: - branches: [ main ] pull_request: - branches: [ main ] + types: [opened, synchronize, reopened] + jobs: - test: + playwright: + name: Playwright + runs-on: ubuntu-latest timeout-minutes: 60 + outputs: + issue_count: ${{ steps.playwright.outputs.issue_count }} + steps: + - name: Checkout repository from GitHub + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Install dependencies + run: npm ci + + - name: Install Playwright Browsers + run: npx playwright install --with-deps + + - name: Build app + run: npm run build + + - name: Serve preview + run: npm run preview & npx wait-on http://localhost:4173 + + - name: Run Playwright tests + run: npx playwright test || true + + - name: Count Playwright accessibility issues + id: playwright + run: | + issue_count=$(jq '. | length' playwright-a11y-violations.json) + echo "issue_count=$issue_count" >> $GITHUB_OUTPUT + + - name: Upload report artifact + uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 + + comment-on-pr: + needs: playwright + if: needs.playwright.outputs.issue_count != '0' runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: lts/* - - name: Install dependencies - run: npm ci - - name: Install Playwright Browsers - run: npx playwright install --with-deps - - name: Run Playwright tests - run: npx playwright test - - uses: actions/upload-artifact@v4 - if: ${{ !cancelled() }} - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 + - name: Comment on PR + uses: thollander/actions-comment-pull-request@v3 + with: + message: "♿ Playwright detected ${{ needs.playwright.outputs.issue_count }} accessibility issue(s) – please review [here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})." + github-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index 2e5968d..0be6e74 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,4 @@ dist-ssr /blob-report/ /playwright/.cache/ /playwright/.auth/ +playwright-a11y-violations.json \ No newline at end of file diff --git a/e2e/basic.spec.ts b/e2e/basic.spec.ts index e08c94f..90117b8 100644 --- a/e2e/basic.spec.ts +++ b/e2e/basic.spec.ts @@ -1,13 +1,28 @@ +import fs from 'fs'; import AxeBuilder from '@axe-core/playwright'; -import {test, expect} from '@playwright/test'; +import {test} from '@playwright/test'; -test.only('BASIC', async ({page}) => { - await page.goto('localhost:5173'); +test('BASIC', async ({page}, testInfo) => { + await page.goto('http://localhost:4173'); await page.locator('#root').waitFor(); // Check the whole page const axeBuilder = await new AxeBuilder({page}) .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) .analyze(); - expect(axeBuilder.violations).toEqual([]); + const violations = axeBuilder.violations; + + // Write violations to json file + fs.writeFileSync( + 'playwright-a11y-violations.json', + JSON.stringify(violations, null, 2) + ); + + // Add an info annotation if there are violations + if (violations.length > 0) { + testInfo.annotations.push({ + type: 'info', + description: `Accessibility violations found: ${violations.length}` + }); + } }); From 55521e4c945b1255c27967a4493d94a8da52adcd Mon Sep 17 00:00:00 2001 From: Leslie Lawendel Date: Thu, 23 Oct 2025 12:51:23 +0200 Subject: [PATCH 3/3] chore: add 'wcag22aa' tag to playwright accessibility test for WCAG 2.2 coverage --- e2e/basic.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/basic.spec.ts b/e2e/basic.spec.ts index 90117b8..ac28d27 100644 --- a/e2e/basic.spec.ts +++ b/e2e/basic.spec.ts @@ -8,7 +8,7 @@ test('BASIC', async ({page}, testInfo) => { // Check the whole page const axeBuilder = await new AxeBuilder({page}) - .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) + .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa']) .analyze(); const violations = axeBuilder.violations;