Using a Git Pre-Commit Hook with axe-linter
A Git pre-commit hook allows you to check files for accessibility concerns with the axe-linter Server 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 axe-linter Server to be checked for accessibility issues.
Setup
Because the pre-commit hook requires an axe-linter Server, you should check the installation guides for the server, Setting up the axe-linter Server and the Connector, Using the axe-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-commit
The only line you should need to change in the script in the line that contains the hostname where your axe-linter Server is running:
export AXE_LINTER_SERVER_URL=http://localhost
Less commonly, you might need to change the port used to communicate with the server:
export AXE_LINTER_SERVER_PORT=3000
The following is the example pre-commit script you can use with Git:
#!/bin/bash
# axe-linter pre-commit
# This script will setup the environment variables needed for the axe-linter-connector
# and execute the axe-linter-connector. The output file will be reviewed and call back with exit codes:
## 0 - No Accessibility Defects
## 1 - axe-linter Detected Accessibility Defects
## 2 - Execution problem, or Axe-Linter Server unavailable.
echo "axe-linter Starting $(date)"
# Setup variables for axe-linter Server
export AXE_LINTER_SERVER_URL=http://localhost
export AXE_LINTER_SERVER_PORT=3000
StatusCode=0
# 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
TempStatus=0
shopt -s nocasematch;
if [[ $i == *.html ]] || [[ $i == *.js ]] || [[ $i == *.jsx ]]|| [[ $i == *.ts ]]|| [[ $i == *.tsx ]]|| [[ $i == *.vue ]]|| [[ $i == *.htm ]]|| [[ $i == *.md ]]|| [[ $i == *.markdown ]];
#if [[ $i == *.html ]];
then
if $VerboseOutput; then
echo "Accessibility check: file: $i"
fi
# execute axe-linter connector
axe-linter-connector -s $i -d .
if [ ! -f "$OutFile" ];
then
echo "$OutFile Does Not Exit"
exit 2
elif cat "$OutFile" | grep -q "BUG"; then
if $VerboseOutput; then
cat $OutFile
fi
echo "**axe-linter Accessibility Issues Detected: $i"
TempCode=1
else
echo "No axe-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