Utilisation d'un hook de pré-commit Git avec axe DevTools Linter
Un hook de pré-commit Git vous permet de vérifier les problèmes d'accessibilité des fichiers avec axe DevTools Linter avant qu'ils ne puissent être validés dans Git.
Chaque fois qu'un utilisateur effectue un commit sur Git avec git commit , le hook de pré-commit s'exécutera et soumettra le code à une instance configurée d'axe DevTools Linter pour vérifier les problèmes d'accessibilité.
Configuration
Étant donné que le hook de pré-commit nécessite axe DevTools Linter, vous devez consulter les guides d'installation du serveur, Configuration d'axe DevTools Linter et du connecteur, Utilisation du connecteur axe DevTools Linter.
Le répertoire des Hooks
Lorsque vous créez un nouveau référentiel, Git crée un répertoire .git/hooks contenant des exemples de hooks. En nommant un script pre-commit dans ce répertoire, vous provoquerez l'exécution de ce script chaque fois que quelqu'un essaiera de valider.
Exemple de script Linter
À la fin de cette section se trouve un exemple de script que vous pouvez utiliser comme script de pré-validation avec Git. Après l'avoir copié dans le répertoire hooks, assurez-vous que le script est exécutable :
chmod +x pre-commitLa seule ligne que vous devriez avoir besoin de modifier est dans le script la ligne qui contient le nom d'hôte sur lequel votre instance d'axe DevTools Linter s'exécute :
export AXE_LINTER_SERVER_URL=http://localhostMoins fréquemment, vous devrez peut-être modifier le port utilisé pour communiquer avec le serveur :
export AXE_LINTER_SERVER_PORT=3000Voici l'exemple de script de pré-validation que vous pouvez utiliser avec Git et le serveur SaaS axe DevTools Linter partagé. Pour l'utiliser avec le serveur sur site, vous devez modifier le [a16] et supprimer le [a17] paramètre : AXE_LINTER_SERVER_URL --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 == *.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