Commit 9a102f49 authored by drew's avatar drew Committed by Mayra Cabrera

Use packaged script from GitLab accessibility image

parent 6f976b81
---
title: Generate JSON-formatted a11y CI artifacts
merge_request: 26687
author:
type: added
......@@ -21,32 +21,34 @@ analyzed to a file called `accessibility`.
## Configure Accessibility Testing
This example shows how to run [pa11y](https://pa11y.org/)
on your code with GitLab CI/CD using a node Docker image.
on your code with GitLab CI/CD using the [GitLab Accessibility Docker image](https://gitlab.com/gitlab-org/ci-cd/accessibility).
For GitLab 12.8 and later, to define the `a11y` job, you must
For GitLab 12.9 and later, to define the `a11y` job, you must
[include](../../../ci/yaml/README.md#includetemplate) the
[`Accessibility.gitlab-ci.yml` template](https://gitlab.com/gitlab-org/gitlab/blob/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml)
included with your GitLab installation, as shown below.
For GitLab versions earlier than 12.8, you can copy and use the job as
defined in that template.
Add the following to your `.gitlab-ci.yml` file:
```yaml
variables:
a11y_urls: "https://about.gitlab.com"
a11y_urls: "https://about.gitlab.com https://gitlab.com/users/sign_in"
include:
- remote: "https://gitlab.com/gitlab-org/gitlab/-/raw/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml"
- template: "Verify/Accessibility.gitlab-ci.yml"
```
The example above will create an `a11y` job in your CI/CD pipeline and will run
Pa11y against the webpage you defined in `a11y_urls` to build a report.
creates an `a11y` job in your CI/CD pipeline, runs
Pa11y against the webpages defined in `a11y_urls`, and builds an HTML report for each.
NOTE: **Note:**
Only one URL may be currently passed into `a11y_urls`.
The report for each URL is saved as an artifact that can be [viewed directly in your browser](../../../ci/pipelines/job_artifacts.md#browsing-artifacts).
A single `accessibility.json` artifact is created and saved along with the individual HTML reports.
It includes report data for all URLs scanned.
The full HTML Pa11y report will be saved as an artifact that can be [viewed directly in your browser](../../../ci/pipelines/job_artifacts.md#browsing-artifacts).
NOTE: **Note:**
For GitLab versions earlier than 12.9, you can use `include:remote` and use a
link to the [current template in `master`](https://gitlab.com/gitlab-org/gitlab/-/raw/master/lib/gitlab/ci/templates/Verify/Accessibility.gitlab-ci.yml)
NOTE: **Note:**
The job definition provided by the template does not support Kubernetes yet.
......
......@@ -8,20 +8,12 @@ stages:
a11y:
stage: accessibility
image: node
script:
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
- echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list && \
- apt-get update && \
- apt-get install -y google-chrome-stable && \
- rm -rf /var/lib/apt/lists/*
- npm install pa11y@5.3.0 pa11y-reporter-html@1.0.0
- 'echo { \"chromeLaunchConfig\": { \"args\": [\"--no-sandbox\"] }, \"includeWarnings\": true, \"reporter\": \"html\" } > pa11y.json'
- './node_modules/.bin/pa11y $a11y_urls > accessibility.html'
image: registry.gitlab.com/gitlab-org/ci-cd/accessibility:5.3.0-gitlab.2
script: /gitlab-accessibility.sh $a11y_urls
allow_failure: true
artifacts:
when: always
expose_as: 'accessibility'
paths: ['accessibility.html']
expose_as: 'Accessibility Reports'
paths: ['reports/']
rules:
- if: $a11y_urls
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment