Utilizzare un Hook Git Pre-Commit con Axe DevTools Linter
Come verificare il codice per problemi di accessibilità con Axe DevTools Linter prima che i commit siano accettati da Git
Un hook pre-commit di Git consente di controllare i file per problematiche di accessibilità utilizzando Axe DevTools Linter prima che possano essere impegnati in Git.
Ogni volta che un utente effettua un commit in Git con git commit, l'hook pre-commit verrà eseguito e invierà il codice a un'istanza configurata di Axe DevTools Linter per essere controllato per problemi di accessibilità.
Configurazione
Poiché l'hook pre-commit richiede Axe DevTools Linter, dovresti controllare le guide all'installazione per il server, Impostazione di Axe DevTools Linter e il Connettore, Utilizzo del Connettore Axe DevTools Linter.
La Directory degli Hook
Quando crei un nuovo repository, Git creerà una directory .git/hooks che contiene hook di esempio. Nominando uno script pre-commit in quella directory, farai sì che tale script venga eseguito ogni volta che qualcuno tenta di effettuare un commit.
Script Esempio per il Linter
Alla fine di questa sezione c'è un esempio di script che puoi usare come script pre-commit con Git. Dopo averlo copiato nella directory degli hook, assicurati che lo script sia eseguibile:
chmod +x pre-commitL'unica riga che dovresti dover cambiare nello script è quella che contiene il nome host dove è in esecuzione la tua istanza di Axe DevTools Linter:
export AXE_LINTER_SERVER_URL=http://localhostMeno comunemente, potrebbe essere necessario cambiare la porta usata per comunicare con il server:
export AXE_LINTER_SERVER_PORT=3000Di seguito è riportato lo script pre-commit di esempio che puoi usare con Git e il server SaaS condiviso di Axe DevTools Linter. Per usarlo con il server on-premises, devi cambiare il AXE_LINTER_SERVER_URL e rimuovere il parametro --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