diff --git a/.github/workflows/test-accessibility.yml b/.github/workflows/test-accessibility.yml new file mode 100644 index 00000000000000..8470f4e1daeef4 --- /dev/null +++ b/.github/workflows/test-accessibility.yml @@ -0,0 +1,30 @@ +name: Accessibility + +# **What it does**: Regularly audits our live site for accessibility issues +# **Why we have it**: Because this is too time-consuming for a commit-level check, but absolutely something we should pay attention to. +# **Who does it impact**: PCX team / FE dev. + +on: + pull_request: + branches: + - production + schedule: + - cron: '0 0 1 * *' # This cron expression triggers the workflow at 00:00 on the 1st day of every month + workflow_dispatch: + +jobs: + test: + name: Test accessibility + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18.1 + + - name: Install dependencies + run: npm install @actions/core pa11y puppeteer + + - name: Run accessibility test + id: test-accessibility + run: npm run test-accessibility diff --git a/bin/accessibility-check.js b/bin/accessibility-check.js new file mode 100644 index 00000000000000..ff73ac0c9d898d --- /dev/null +++ b/bin/accessibility-check.js @@ -0,0 +1,44 @@ +import pa11y from "pa11y"; +import puppeteer from "puppeteer"; +import core from "@actions/core"; + +const navigationTimeout = 120000; // Set the navigation timeout to 120 seconds (120,000 milliseconds) +let resultsArray = []; +let printArray = []; + +async function checkLinks() { + const browser = await puppeteer.launch({ + headless: "new", + }); + const page = await browser.newPage(); + + const sitemapUrl = "https://developers.cloudflare.com/sitemap.xml"; + await page.goto(sitemapUrl, { timeout: navigationTimeout }); + + const sitemapLinks = await page.$$eval("url loc", (elements) => + elements.map((el) => el.textContent) + ); + + for (const link of sitemapLinks) { + if (!link) { + continue; // Skip if the link is empty + } else if (link.includes("/support/other-languages/")) { + continue; // Skip if the link is in a certain section + } + + const testPage = await browser.newPage(); + let result = await pa11y(link, { + browser, + page: testPage, + runners: ["axe", "htmlcs"], + }); + console.log(result) + + await testPage.close(); + } + await page.close(); + await browser.close(); + console.log(resultsArray) +} + +checkLinks(); diff --git a/package.json b/package.json index d538284a46679b..3a07275c1b60ce 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "scripts": { "algolia-crawl": "node bin/algolia-crawl.js", "crawl-api-links": "node bin/crawl-api-links.js", + "test-accessibility": "node bin/accessibility-check.js", "dev:hugo": "hugo --environment development -D -w", "dev:wrangler": "wrangler pages dev -- vite", "dev:vite": "vite",