GitプリコミットフックとAxe DevTools Linterの使用
Gitでコミットが受け入れられる前に、Axe DevTools Linterを使ってコードのアクセシビリティ問題を確認する方法
Gitのプリコミットフックを使用すると、ファイルがGitにコミットされる前にAxe DevTools Linterでアクセシビリティの問題をチェックすることができます。
ユーザーが**git commit**と一緒にGitにコミットするたびに、プレコミットフックが実行され、コードはAxe DevTools Linterの設定されたインスタンスに送られ、アクセシビリティ問題のチェックが行われます。
セットアップ
プレコミットフックにAxe DevTools Linterが必要なため、サーバーAxe DevTools LinterのセットアップとコネクタAxe DevTools Linterコネクタの使用のインストールガイドを確認する必要があります。
フックディレクトリ
新しいリポジトリを作成すると、Gitはサンプルフックを含む.git/hooksディレクトリを作成します。そのディレクトリにスクリプト**pre-commit**を名前を付けて入れると、誰かがコミットを試みるたびにそのスクリプトが実行されます。
リントスクリプトの例
このセクションの最後に、Gitのプリコミットスクリプトとして使用できるスクリプトの例があります。フックディレクトリにコピーした後、スクリプトが実行可能であることを確認してください。
chmod +x pre-commitスクリプト内で変更が必要なのは、Axe DevTools Linterが実行されているホスト名を含む行だけです。
export AXE_LINTER_SERVER_URL=http://localhostあまり一般的ではありませんが、サーバーとの通信に使用するポートを変更する必要があるかもしれません。
export AXE_LINTER_SERVER_PORT=3000以下は、Gitと共有されているAxe DevTools Linter SaaSサーバーで使用できる例の**pre-commit**スクリプトです。オンプレミスサーバーで使用するには、AXE_LINTER_SERVER_URLを変更し、--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