Uso di un Git Pre-Commit Hook con axe DevTools Linter
Un hook di pre-commit di Git consente di verificare i file per problemi di accessibilità con axe DevTools Linter prima che possano essere committati in Git.
Ogni volta che un utente esegue un commit su Git con git commit , il pre-commit hook verrà eseguito e invierà il codice a un'istanza configurata di axe DevTools Linter per verificare eventuali problemi di accessibilità.
Configurazione
Poiché il pre-commit hook richiede axe DevTools Linter, dovresti controllare le guide di installazione per il server, Configurazione del axe DevTools Linter e il connettore, Utilizzo del axe DevTools Linter Connector.
La directory degli hook
Quando crei un nuovo repository, Git creerà una directory .git/hooks che contiene hook di esempio. Assegnando a uno script il nome pre-commit in quella directory, si farà in modo che tale script venga eseguito ogni volta che qualcuno tenta di effettuare un commit.
Esempio di script Linter
Alla fine di questa sezione troverai uno script di esempio che puoi usare come script pre-commit con Git. Dopo averlo copiato nella directory hooks, assicurati che lo script sia eseguibile:
chmod +x pre-commitL'unica riga che dovresti modificare nello script è quella che contiene il nome host in cui è in esecuzione la tua istanza di axe DevTools Linter:
export AXE_LINTER_SERVER_URL=http://localhostMeno comunemente, potrebbe essere necessario modificare la porta utilizzata per comunicare con il server:
export AXE_LINTER_SERVER_PORT=3000Di seguito è riportato l'esempio di script pre-commit che puoi utilizzare con Git e il server SaaS condiviso axe DevTools Linter. Per utilizzarlo con il server locale, è necessario modificare AXE_LINTER_SERVER_URL il parametro e rimuovere --api-key il parametro:
#!/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