Usando un gancho de preconfirmación de Git con axe DevTools Linter
Un gancho de preconfirmación de Git le permite verificar si hay problemas de accesibilidad en los archivos con axe DevTools Linter antes de que se puedan confirmar en Git.
Cada vez que un usuario hace un commit a Git con git commit , el gancho de preconfirmación se ejecutará y enviará el código a una instancia configurada de axe DevTools Linter para verificar si hay problemas de accesibilidad.
Configuración
Debido a que el gancho de pre-confirmación requiere axe DevTools Linter, debe consultar las guías de instalación del servidor, Configuración de axe DevTools Linter y el Connector, Uso del axe DevTools Linter Connector.
El directorio de Hooks
Cuando creas un nuevo repositorio, Git creará un directorio .git/hooks que contiene hooks de muestra. Al nombrar un script pre-commit en ese directorio, hará que ese script se ejecute cada vez que alguien intente hacer commit.
Ejemplo de secuencia de comandos de Linter
Al final de esta sección hay un script de ejemplo que puedes usar como script de pre-commit con Git. Después de haberlo copiado al directorio de ganchos, asegúrate de que el script sea ejecutable:
chmod +x pre-commitLa única línea que deberías cambiar en el script es la línea que contiene el nombre de host donde se ejecuta tu instancia de axe DevTools Linter:
export AXE_LINTER_SERVER_URL=http://localhostCon menor frecuencia, es posible que necesites cambiar el puerto utilizado para comunicarte con el servidor:
export AXE_LINTER_SERVER_PORT=3000El siguiente es el ejemplo de script de pre-commit que puedes usar con Git y el servidor SaaS DevTools Linter de axe compartido. Para usar esto con el servidor local, debe cambiar el parámetro 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 == *.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