Uso de un Hook de Pre-Commit de Git con Axe DevTools Linter
Cómo verificar el código en busca de problemas de accesibilidad con Axe DevTools Linter antes de que los commits sean aceptados por Git
Un hook de pre-commit de Git te permite verificar archivos en busca de problemas de accesibilidad con Axe DevTools Linter antes de que puedan ser comprometidos en Git.
Cada vez que un usuario realiza un commit en Git con git commit, el hook de pre-commit se ejecutará y enviará el código a una instancia configurada de Axe DevTools Linter para ser verificado en busca de problemas de accesibilidad.
Configuración
Dado que el hook de pre-commit requiere Axe DevTools Linter, debes revisar las guías de instalación para el servidor, Configuración de Axe DevTools Linter y el Conector, Uso del Conector de Axe DevTools Linter.
El Directorio de Hooks
Cuando creas un nuevo repositorio, Git creará un directorio .git/hooks que contiene ejemplos de hooks. Al nombrar un script pre-commit en ese directorio, harás que ese script se ejecute cada vez que alguien intente hacer un commit.
Script de Linter de Ejemplo
Al final de esta sección hay un script de ejemplo que puedes usar como script de pre-commit con Git. Después de copiarlo en el directorio de hooks, asegúrate de que el script sea ejecutable:
chmod +x pre-commitLa única línea que deberías necesitar cambiar en el script es la línea que contiene el nombre del host donde se está ejecutando tu instancia de Axe DevTools Linter:
export AXE_LINTER_SERVER_URL=http://localhostMenos comúnmente, es posible que necesites cambiar el puerto utilizado para comunicarte con el servidor:
export AXE_LINTER_SERVER_PORT=3000A continuación se muestra el script de ejemplo pre-commit que puedes usar con Git y el servidor SaaS compartido de Axe DevTools Linter. Para usar esto con el servidor local, necesitas cambiar el AXE_LINTER_SERVER_URL y eliminar el parámetro --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