Utilisation d'un hook de pré-commit Git avec Axe DevTools Linter
Comment vérifier le code pour des problèmes d'accessibilité avec Axe DevTools Linter avant que les commits soient acceptés par Git
Un hook de pré-commit Git vous permet de vérifier les fichiers pour les problèmes d'accessibilité avec Axe DevTools Linter avant qu'ils ne puissent être commités dans Git.
Chaque fois qu'un utilisateur commet dans Git avec git commit, le hook de pré-commit s'exécute et soumet le code à une instance configurée de Axe DevTools Linter pour vérification des problèmes d'accessibilité.
Configuration
Parce que le hook de pré-commit requiert Axe DevTools Linter, vous devriez consulter les guides d'installation pour le serveur, Configurer Axe DevTools Linter et le connecteur, Utilisation du connecteur Axe DevTools Linter.
Le répertoire des hooks
Lorsque vous créez un nouveau dépôt, Git créera un répertoire .git/hooks contenant des exemples de hooks. En nommant un script pre-commit dans ce répertoire, vous ferez en sorte que ce script s'exécute chaque fois que quelqu'un essaie de commit.
Script Linter Exemple
À la fin de cette section se trouve un script exemple que vous pouvez utiliser comme script de pré-commit avec Git. Après l'avoir copié dans le répertoire des hooks, assurez-vous que le script est exécutable :
chmod +x pre-commitLa seule ligne que vous devriez avoir besoin de modifier dans le script est celle contenant le nom d'hôte où votre instance de Axe DevTools Linter fonctionne :
export AXE_LINTER_SERVER_URL=http://localhostPlus rarement, vous pourriez avoir besoin de changer le port utilisé pour communiquer avec le serveur :
export AXE_LINTER_SERVER_PORT=3000Ce qui suit est l'exemple de script pre-commit que vous pouvez utiliser avec Git et le serveur SaaS partagé de Axe DevTools Linter. Pour l'utiliser avec le serveur sur site, vous devez changer le AXE_LINTER_SERVER_URL et supprimer le paramètre --api-key :
#!/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 == *.htl ]] || [[ $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