Skip to content

Commit

Permalink
Merge pull request #657 from w3bdesign/dev
Browse files Browse the repository at this point in the history
♿️ access: add pa11y automated accessibility testing workflow
  • Loading branch information
w3bdesign authored Jan 27, 2025
2 parents 1934d7d + c11022d commit 85f1205
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 1 deletion.
81 changes: 81 additions & 0 deletions .github/workflows/pa11y.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
name: Accessibility Tests

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

jobs:
pa11y:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'

- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
run_install: false

- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- name: Setup pnpm cache
uses: actions/cache@v3
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install

- name: Install dependencies and pa11y
run: |
pnpm add -D pa11y wait-on
# Create pa11y config file
echo '{"chromeLaunchConfig":{"args":["--no-sandbox"]}}' > .pa11y.json
- name: Build Next.js app
run: pnpm build

- name: Start Next.js app
run: pnpm start &

- name: Wait for the application to be ready
run: pnpm exec wait-on http://localhost:3000

- name: Run pa11y
run: |
# Create a directory for the reports
mkdir -p pa11y-reports
# Run pa11y on main pages with config
pnpm exec pa11y --config .pa11y.json http://localhost:3000 > pa11y-reports/home.txt || true
pnpm exec pa11y --config .pa11y.json http://localhost:3000/cv > pa11y-reports/cv.txt || true
pnpm exec pa11y --config .pa11y.json http://localhost:3000/prosjekter > pa11y-reports/prosjekter.txt || true
pnpm exec pa11y --config .pa11y.json http://localhost:3000/kontakt > pa11y-reports/kontakt.txt || true
- name: Upload pa11y results
if: always()
uses: actions/upload-artifact@v3
with:
name: pa11y-reports
path: pa11y-reports/

- name: Check for accessibility issues
run: |
if grep -q "Error:" pa11y-reports/*.txt; then
echo "Accessibility issues found. Check the uploaded artifacts for details."
exit 1
fi
35 changes: 35 additions & 0 deletions .pa11yci.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{
"defaults": {
"standard": "WCAG2AA",
"timeout": 30000,
"wait": 1000,
"viewport": {
"width": 1280,
"height": 800
},
"ignore": [
"WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail"
],
"chromeLaunchConfig": {
"args": ["--no-sandbox"]
}
},
"urls": [
{
"url": "http://localhost:3000",
"screenCapture": "pa11y-reports/home.png"
},
{
"url": "http://localhost:3000/cv",
"screenCapture": "pa11y-reports/cv.png"
},
{
"url": "http://localhost:3000/prosjekter",
"screenCapture": "pa11y-reports/prosjekter.png"
},
{
"url": "http://localhost:3000/kontakt",
"screenCapture": "pa11y-reports/kontakt.png"
}
]
}
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
[![Lighthouse CI](https://github.com/w3bdesign/dfweb-v4/actions/workflows/lighthouse.yml/badge.svg)](https://github.com/w3bdesign/dfweb-v4/actions/workflows/lighthouse.yml)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/3e803ad0f17146b78bbed9850eb1461f)](https://app.codacy.com/gh/w3bdesign/dfweb-v4/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
[![codecov](https://codecov.io/gh/w3bdesign/dfweb-v4/graph/badge.svg?token=AHQW8WQ6U8)](https://codecov.io/gh/w3bdesign/dfweb-v4)
[![Pa11y](https://github.com/w3bdesign/dfweb-v4/actions/workflows/pa11y.yml/badge.svg)](https://github.com/w3bdesign/dfweb-v4/actions/workflows/pa11y.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/8d5cae5017b1a9698843/maintainability)](https://codeclimate.com/github/w3bdesign/dfweb-v4/maintainability)

# Dfweb.no Portfolio Version 4
Expand Down Expand Up @@ -83,7 +84,11 @@ Fourth version of my personal portfolio website with Next.js, Motion, Sanity.io
### Accessibility

- WCAG accessibility tested
- Accessibility testing with Cypress Axe
- Accessibility testing with Cypress Axe and Pa11y
- Automated Pa11y accessibility testing on every PR and push to main
- Tests all main pages against WCAG2AA standards
- Captures screenshots for visual reference
- Detailed reports available as GitHub Actions artifacts
- Builds will fail if any a11y errors are found

### Devops and Code quality
Expand Down

0 comments on commit 85f1205

Please sign in to comment.