Een Git Pre-Commit Hook gebruiken met Axe DevTools Linter
Een Git pre-commit hook stelt je in staat om bestanden te controleren op toegankelijkheidsproblemen met Axe DevTools Linter voordat ze in Git kunnen worden vastgelegd.
Telkens wanneer een gebruiker een commit uitvoert in Git met git commit zal de pre-commit hook draaien en de code indienen bij een geconfigureerde instantie van Axe DevTools Linter om te worden gecontroleerd op toegankelijkheidsproblemen.
Installatie
Omdat de pre-commit hook Axe DevTools Linter vereist, moet je de installatiehandleidingen voor de server controleren, De Axe DevTools Linter instellen en de Connector, Axe DevTools Linter Connector gebruiken.
De Hooks Directory
Wanneer je een nieuwe repository aanmaakt, zal Git een .git/hooks directory aanmaken die voorbeeld-hooks bevat. Door een script een naam te geven pre-commit in die directory, zal je ervoor zorgen dat dat script wordt uitgevoerd telkens wanneer iemand probeert te committen.
Voorbeeld Linter Script
Aan het einde van deze sectie staat een voorbeeldscript dat je kunt gebruiken als pre-commit script met Git. Nadat je het naar de hooks directory hebt gekopieerd, zorg ervoor dat het script uitvoerbaar is:
chmod +x pre-commitDe enige regel die je in het script zou moeten wijzigen is de regel die de hostnaam bevat waar je Axe DevTools Linter-instantie draait:
export AXE_LINTER_SERVER_URL=http://localhostMinder vaak moet je de poort wijzigen die wordt gebruikt om met de server te communiceren:
export AXE_LINTER_SERVER_PORT=3000Het volgende is het voorbeeld pre-commit script dat je kunt gebruiken met Git en de gedeelde Axe DevTools Linter SaaS-server. Om dit te gebruiken met de on-premises server, moet je de AXE_LINTER_SERVER_URL en de --api-key parameter verwijderen:
#!/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 == *.tsx ]] || [[ $i == *.vue ]] || [[ $i == *.htm ]] || [[$i == *.liquid]] || [[ $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