Using a Git Pre-Commit Hook with axe-linter

Link to Using a Git Pre-Commit Hook with axe-linter copied to clipboard

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

Is this page helpful?