GitプリコミットフックとAxe DevTools Linterの使用
Gitのプリコミットフックを使用すると、ファイルがGitにコミットされる前にAxe DevTools Linterでアクセシビリティの問題をチェックすることができます。
ユーザーがGitにコミットするたびに、 **git commit** プリコミットフックが実行され、コードが設定された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 == *.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