pa11y-ci PR Comment Workflow

pa11y-ci.yaml

name: 'pa11y-ci'
on: [deployment_status]

jobs:
  pa11y:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm ci

      - name: Run pa11y-ci against sitemap generated by next-sitemap
        run: npm run pa11y-ci -- --json --sitemap ${{ github.event.deployment_status.target_url }}/sitemap.xml |& tee pa11y-output.txt

      - name: Comment on PR
        uses: actions/github-script@v5
        env:
          BODY_PREFIX: '<!-- pa11y-ci results -->'
        with:
          script: |
            const { promises: fs } = require('fs')

            // Find this PR & do nothing if this isn't a PR
            const { data } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
              owner: context.repo.owner,
              repo: context.repo.repo,
              commit_sha: context.sha
            })
            const prNumber = data[0] && data[0].number
            if (!prNumber) {
              return
            }

            // Read the pa11y output and build the comment body
            const pa11yOutput = await fs.readFile('./pa11y-output.txt', 'utf8')
            const lines = pa11yOutput.split('\n')
            const asJSON = JSON.parse(lines.find((line) => line.startsWith('{')))
            const { total, passes, errors, results } = asJSON

            let commentBody = `${process.env.BODY_PREFIX}\n<h2>:microscope: pa11y-ci results</h2>\n\n`
            commentBody += `- Number of URLs tested: ${total}\n`

            if (!errors) {
              commentBody += `- No errors were found! :tada:\n`
            } else {
              commentBody += `- Number of errors found: ${errors}. :sob:\n`

              let formattedOutput = ''
              Object.keys(results).forEach(urlKey => {
                const errors = results[urlKey]
                if (errors.length < 1) {
                  return
                }

                formattedOutput += `- [${urlKey}](${urlKey}):\n\n`
                errors.forEach(error => {
                  formattedOutput += '  ```\n'
                  formattedOutput += `  ${error.message}\n\n`;
                  formattedOutput += `  ${error.selector}\n\n`;
                  formattedOutput += `  ${error.context}\n\n`;
                  formattedOutput += `  ${error.code}\n`;
                  formattedOutput += '  ```\n\n'
                })
              })

              commentBody += `<details><summary>See results :eyes:</summary>\n\n${formattedOutput}</details>`
            }

            // Get the comments on this PR
            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: prNumber
            })

            // Try to find an existing pa11y results comment
            const previousComment = comments.find((comment) => comment.body.startsWith(process.env.BODY_PREFIX))
            if (previousComment) {
              // Update the previous comment
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: previousComment.id,
                body: commentBody
              })
            } else {
              // Create a new comment
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: prNumber,
                body: commentBody
              })
            }

            if (errors) {
              core.setFailed('Errors were found by pa11y-ci')
            }