Skip to content

Commit 6d1cc35

Browse files
khiga8langermank
andauthored
Add accessibility checks for component documentation examples (#2017)
* * run axe on doc examples * * update script * * update axe.yml * * update script to zsh * * update axe.yml * * fix indentation * * fix script * * can't use zsh script * * fix syntax of calling array in bash * * ensure that we don't run axe on pages we want to exclude * * add to list * * include utilities * * add documentation to script * * add back localhost * * fix weird formatting * bad * bad * bad * bad * * update script to only run on updated paths we care about * * update comments on script* * * move modified files check to action * add fetch-depth * add quotes * * introduce GitHub Action workflow * * refactor * pass env variable to bash script * update script and fix id * * ensure array is used * remove temporary testing changes * * update message slightly * Revert "remove temporary testing changes" This reverts commit fc33214. * add back exit code * fix variables * Revert "fix variables" This reverts commit 191b02d. * update message * update message * add back files removed for testing Co-authored-by: Katie Langerman <langermank@github.com>
1 parent 4d2efad commit 6d1cc35

File tree

2 files changed

+141
-0
lines changed

2 files changed

+141
-0
lines changed

.github/workflows/axe.yml

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
name: axe
2+
on:
3+
push:
4+
branches:
5+
- main
6+
pull_request:
7+
branches:
8+
- main
9+
jobs:
10+
axe:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v2
14+
with:
15+
fetch-depth: 0
16+
- name: Get changed files
17+
id: changed-files
18+
uses: tj-actions/changed-files@v18.6
19+
with:
20+
files: |
21+
docs/content/components/**/*.md
22+
docs/content/utilities/**/*.md
23+
files_ignore: |
24+
docs/content/components/index.md
25+
docs/content/utilities/index.md
26+
- name: Save changed files
27+
run: |
28+
echo "STRING_OF_PATHS_WE_CARE_ABOUT=${{ steps.changed-files.outputs.all_changed_files }}" >> $GITHUB_ENV
29+
- name: Use Node.js
30+
if: steps.changed-files.outputs.any_changed == 'true'
31+
uses: actions/setup-node@v3
32+
with:
33+
node-version: 14
34+
- run: yarn
35+
if: steps.changed-files.outputs.any_changed == 'true'
36+
- run: yarn dist
37+
if: steps.changed-files.outputs.any_changed == 'true'
38+
- name: Run docs site
39+
if: steps.changed-files.outputs.any_changed == 'true'
40+
run: |
41+
npm run dev & npx wait-on http://localhost:8000
42+
- name: Run axe script
43+
if: steps.changed-files.outputs.any_changed == 'true'
44+
run: |
45+
script/axe-docs $STRING_OF_PATHS_WE_CARE_ABOUT

script/axe-docs

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
#!/bin/bash
2+
3+
# This workflow runs axe checks on modified doc/content/components/* or doc/content/components/* pages because those include code examples.
4+
# Developers frequently copy and paste examples directly so it's important to ensure the examples are accessible.
5+
# Learn about @axe-core/cli: https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli
6+
7+
if [ -z "$STRING_OF_PATHS_WE_CARE_ABOUT" ]; then
8+
echo "The script cannot run because STRING_OF_PATHS_WE_CARE_ABOUT is not correctly set for some reason"
9+
echo "Exiting..."
10+
exit 1
11+
else
12+
array=($STRING_OF_PATHS_WE_CARE_ABOUT)
13+
printf "%s\n" "${array[@]}" > temp.txt
14+
fi
15+
16+
# Parsing paths from the filenames...
17+
nav_paths=()
18+
while IFS= read -r file
19+
do
20+
prefix="docs/content"
21+
suffix=".md"
22+
doc_path=${file#"$prefix"}
23+
doc_path=${doc_path%"$suffix"}
24+
nav_paths+=($doc_path)
25+
done < temp.txt
26+
rm temp.txt
27+
28+
# https://stackoverflow.com/a/8574392
29+
containsElement () {
30+
local e match="$1"
31+
shift
32+
for e; do [[ "$e" == "$match" ]] && return 0; done
33+
return 1
34+
}
35+
36+
# Starting point violations
37+
# DO NOT ADD TO THIS LIST!
38+
needs_to_be_fixed=(
39+
/components/autocomplete
40+
/components/avatars
41+
/components/box
42+
/components/buttons
43+
/components/header
44+
/components/markdown
45+
/components/progress
46+
/components/select-menu
47+
/components/labels
48+
/components/timeline
49+
/components/toasts
50+
/utilities/flexbox
51+
/utilities/layout
52+
)
53+
54+
echo "Pages that included in this starting point violations list are excluded from checks:"
55+
printf '%s\n' "${needs_to_be_fixed[@]}"
56+
57+
doc_urls=()
58+
skipped=()
59+
for i in "${nav_paths[@]}";
60+
do
61+
if containsElement "${i//\"/}" "${needs_to_be_fixed[@]}"; then
62+
skipped+=($i)
63+
continue
64+
else
65+
doc_url="http://localhost:8000$i"
66+
doc_url="${doc_url//\"/}"
67+
doc_urls+=($doc_url)
68+
fi
69+
done
70+
71+
if (( ${#skipped[@]} )); then
72+
echo "==========================================================================================="
73+
echo "WARNING"
74+
echo ""
75+
echo "Oh no! We have to skip accessibility checks on these doc pages you updated:"
76+
echo ""
77+
printf '%s\n' "${skipped[@]}"
78+
echo ""
79+
echo "because they are part of the starting point violations list."
80+
echo ""
81+
echo "Help us get one closer to getting rid of this list!"
82+
echo "Consider addressing the accessibility issues on the examples of these pages as part of your PR ❤️"
83+
echo "==========================================================================================="
84+
fi
85+
86+
# Run axe checks only if there are pages to run it on
87+
if [ ${#doc_urls[@]} -eq 0 ]; then
88+
exit
89+
else
90+
echo "Installing axe..."
91+
npm install -g @axe-core/cli
92+
# https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli
93+
# We exclude rules that depend on full page context.
94+
echo "Running axe..."
95+
axe ${doc_urls[@]} --include "iframe" --disable html-has-lang,frame-title,page-has-heading-one,region,color-contrast,landmark-unique,landmark-one-main --exit --show-errors
96+
fi

0 commit comments

Comments
 (0)