1
1
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
css/script/axe-docs
Kate Higa 6d1cc359cf
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 fc332142a8.

* add back exit code

* fix variables

* Revert "fix variables"

This reverts commit 191b02d5ea.

* update message

* update message

* add back files removed for testing

Co-authored-by: Katie Langerman <langermank@github.com>
2022-04-12 14:19:47 -07:00

97 lines
2.9 KiB
Bash
Executable File

#!/bin/bash
# This workflow runs axe checks on modified doc/content/components/* or doc/content/components/* pages because those include code examples.
# Developers frequently copy and paste examples directly so it's important to ensure the examples are accessible.
# Learn about @axe-core/cli: https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli
if [ -z "$STRING_OF_PATHS_WE_CARE_ABOUT" ]; then
echo "The script cannot run because STRING_OF_PATHS_WE_CARE_ABOUT is not correctly set for some reason"
echo "Exiting..."
exit 1
else
array=($STRING_OF_PATHS_WE_CARE_ABOUT)
printf "%s\n" "${array[@]}" > temp.txt
fi
# Parsing paths from the filenames...
nav_paths=()
while IFS= read -r file
do
prefix="docs/content"
suffix=".md"
doc_path=${file#"$prefix"}
doc_path=${doc_path%"$suffix"}
nav_paths+=($doc_path)
done < temp.txt
rm temp.txt
# https://stackoverflow.com/a/8574392
containsElement () {
local e match="$1"
shift
for e; do [[ "$e" == "$match" ]] && return 0; done
return 1
}
# Starting point violations
# DO NOT ADD TO THIS LIST!
needs_to_be_fixed=(
/components/autocomplete
/components/avatars
/components/box
/components/buttons
/components/header
/components/markdown
/components/progress
/components/select-menu
/components/labels
/components/timeline
/components/toasts
/utilities/flexbox
/utilities/layout
)
echo "Pages that included in this starting point violations list are excluded from checks:"
printf '%s\n' "${needs_to_be_fixed[@]}"
doc_urls=()
skipped=()
for i in "${nav_paths[@]}";
do
if containsElement "${i//\"/}" "${needs_to_be_fixed[@]}"; then
skipped+=($i)
continue
else
doc_url="http://localhost:8000$i"
doc_url="${doc_url//\"/}"
doc_urls+=($doc_url)
fi
done
if (( ${#skipped[@]} )); then
echo "==========================================================================================="
echo "WARNING"
echo ""
echo "Oh no! We have to skip accessibility checks on these doc pages you updated:"
echo ""
printf '%s\n' "${skipped[@]}"
echo ""
echo "because they are part of the starting point violations list."
echo ""
echo "Help us get one closer to getting rid of this list!"
echo "Consider addressing the accessibility issues on the examples of these pages as part of your PR ❤️"
echo "==========================================================================================="
fi
# Run axe checks only if there are pages to run it on
if [ ${#doc_urls[@]} -eq 0 ]; then
exit
else
echo "Installing axe..."
npm install -g @axe-core/cli
# https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli
# We exclude rules that depend on full page context.
echo "Running axe..."
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
fi