Usando um Gancho de Pré-commit do Git com Axe DevTools Linter
Um gancho de pré-commit do Git permite verificar arquivos quanto a problemas de acessibilidade com o Axe DevTools Linter antes que possam ser enviados no Git.
Sempre que um usuário faz commit no Git com **git commit** o gancho de pré-commit será executado e enviará o código para uma instância configurada do Axe DevTools Linter para verificação de problemas de acessibilidade.
Configuração
Como o gancho de pré-commit requer o Axe DevTools Linter, você deve verificar os guias de instalação para o servidor, Configurando o Axe DevTools Linter e o Conector, Usando o Conector Axe DevTools Linter.
O Diretório de Ganchos
Quando você cria um novo repositório, o Git criará um diretório .git/hooks que contém ganchos de exemplo. Ao nomear um script **pre-commit** nesse diretório, você fará com que esse script seja executado sempre que alguém tentar fazer commit.
Exemplo de Script do Linter
No final desta seção há um script de exemplo que você pode usar como script de pré-commit com o Git. Depois de copiá-lo para o diretório de ganchos, certifique-se de que o script seja executável:
chmod +x pre-commitA única linha que você deve precisar alterar no script é a linha que contém o nome do host onde sua instância do Axe DevTools Linter está executando:
export AXE_LINTER_SERVER_URL=http://localhostMenos comumente, você pode precisar alterar a porta usada para comunicação com o servidor:
export AXE_LINTER_SERVER_PORT=3000O seguinte é o exemplo de script **pre-commit** que você pode usar com o Git e o servidor SaaS compartilhado do Axe DevTools Linter. Para usá-lo com o servidor local, você precisa alterar o AXE_LINTER_SERVER_URL e remover o --api-key parâmetro:
#!/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 == *.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