Einen Git Pre-Commit Hook mit Axe DevTools Linter verwenden
Wie Sie mit Axe DevTools Linter den Code auf Barrierefreiheitsprobleme überprüfen, bevor Commits von Git akzeptiert werden
Ein Git Pre-Commit Hook ermöglicht es Ihnen, Dateien auf Barrierefreiheitsprobleme mit Axe DevTools Linter zu prüfen, bevor sie in Git committet werden können.
Jedes Mal, wenn ein Benutzer mit git commit in Git committet, wird der Pre-Commit Hook ausgeführt und der Code an eine konfigurierte Instanz des Axe DevTools Linter gesendet, um auf Barrierefreiheitsprobleme überprüft zu werden.
Einrichtung
Da der Pre-Commit Hook Axe DevTools Linter benötigt, sollten Sie die Installationsanleitungen für den Server, Einrichtung des Axe DevTools Linter und den Connector, Verwendung des Axe DevTools Linter Connectors überprüfen.
Das Hooks-Verzeichnis
Wenn Sie ein neues Repository erstellen, wird Git ein .git/hooks Verzeichnis erstellen, das Beispiel-Hooks enthält. Indem Sie ein Skript in diesem Verzeichnis pre-commit benennen, wird dieses Skript ausgeführt, wann immer jemand versucht zu committen.
Beispiel Linter-Skript
Am Ende dieses Abschnitts befindet sich ein Beispielskript, das Sie als Pre-Commit Skript mit Git verwenden können. Nachdem Sie es in das Hooks-Verzeichnis kopiert haben, stellen Sie sicher, dass das Skript ausführbar ist:
chmod +x pre-commitDie einzige Zeile, die Sie im Skript ändern sollten, ist die Zeile, die den Hostnamen enthält, unter dem Ihre Instanz des Axe DevTools Linter läuft:
export AXE_LINTER_SERVER_URL=http://localhostSeltener benötigen Sie möglicherweise eine Änderung des Ports, der zur Kommunikation mit dem Server verwendet wird:
export AXE_LINTER_SERVER_PORT=3000Das Folgende ist das Beispiel pre-commit Skript, das Sie mit Git und dem gemeinsamen Axe DevTools Linter SaaS-Server verwenden können. Um dies mit dem On-Premises-Server zu verwenden, müssen Sie den AXE_LINTER_SERVER_URL ändern und den --api-key Parameter entfernen:
#!/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