Using a Git Pre-Commit Hook with axe DevTools Linter
A Git pre-commit hook allows you to check files for accessibility concerns with axe DevTools Linter before they can be committed in Git.
Any time a user commits to Git with git commit the pre-commit hook will run and submit the code to a configured instance of axe DevTools Linter to be checked for accessibility issues.
Setup
Because the pre-commit hook requires axe DevTools Linter, you should check the installation guides for the server, Setting up the axe DevTools Linter and the Connector, Using axe DevTools Linter Connector.
The Hooks Directory
When you create a new repository, Git will create a .git/hooks directory that contains sample hooks. By naming a script pre-commit in that directory, you will cause that script to execute whenever someone tries to commit.
Example Linter Script
At the end of this section is an example script that you can use as a pre-commit script with Git. After you've copied it to the hooks directory, make sure the script is executable:
chmod +x pre-commitThe only line you should need to change in the script in the line that contains the hostname where your instance of axe DevTools Linter is running:
export AXE_LINTER_SERVER_URL=http://localhostLess commonly, you might need to change the port used to communicate with the server:
export AXE_LINTER_SERVER_PORT=3000The following is the example pre-commit script you can use with Git and the shared axe DevTools Linter SaaS server. To use this with the on-premises server, you need to change the AXE_LINTER_SERVER_URL and remove the --api-key parameter:
#!/bin/bash
# axe DevTools Linter pre-commit
# This script will setup the environment variables needed for axe-linter-connector
# and execute axe-linter-connector. The output file will be reviewed and call back with exit codes:
## 0 - No Accessibility Defects
## 1 - axe DevTools Linter Detected Accessibility Defects
## 2 - Execution problem, or axe DevTools Linter unavailable.
echo "axe DevTools Linter Starting $(date)"
# Setup variables for axe DevTools Linter
export AXE_LINTER_SERVER_URL=https://axe-linter.deque.com/
StatusCode=0
if [[ -z "${AXE_LINTER_API_KEY}" ]]; then
echo "AXE_LINTER_API_KEY must be set"
exit 2
fi
# Configure verbose output.
VerboseOutput="false"
# Configure outfile: output in Generic Issue Import Format for in execution directory.
OutFile="axe-linter-report.json"
for i in $(git status --porcelain | sed s/^...//); do
rm -f $OutFile
TempCode=0
shopt -s nocasematch;
if [[ $i == *.html ]] || [[ $i == *.js ]] || [[ $i == *.jsx ]]|| [[ $i == *.ts ]]|| [[ $i == *.tsx ]]|| [[ $i == *.vue ]]|| [[ $i == *.htm ]]|| [[ $i == *.md ]]|| [[ $i == *.markdown ]];
then
if $VerboseOutput; then
echo "Accessibility check: file: $i"
fi
# execute axe DevTools Linter Connector
axe-linter-connector -s $i -d . --api-key $AXE_LINTER_API_KEY --config ./axe-linter.yml --url $AXE_LINTER_SERVER_URL
if [ ! -f "$OutFile" ];then
echo "$OutFile Does Not Exist"
exit 2
elif cat "$OutFile" | grep -q "BUG"; then
if $VerboseOutput; then
cat $OutFile
fi
echo "**axe DevTools Linter Accessibility Issues Detected: $i"
TempCode=1
else
echo "No axe DevTools Linter Connector Issues Detected in: $i"
fi
if [ "$TempCode" != "0" ]; then
StatusCode=1
fi
rm $OutFile
fi
done
if [ "$StatusCode" != "0" ]; then
echo "Commit Failed due to Accessibility Issues"
fi
exit $StatusCode