Utiliser l'axe Developer Hub GitHub Action

Cet article explique comment configurer l'axe Developer Hub GitHub Action, qui permet aux workflows GitHub de bloquer les commits et les demandes d'extraction s'ils contiennent des erreurs d'accessibilité.

Aperçu

Lorsque votre suite de tests modifiée s'exécute, il associe les résultats d'accessibilité à un commit Git SHA et envoie ces informations aux serveurs de Deque. Plus tard, lorsque l’action GitHub s’exécute, elle interroge Deque pour obtenir ces résultats.

Prérequis

Il y a quelques prérequis à satisfaire avant de pouvoir utiliser l'action GitHub :

1. Un projet sur axe Developer Hub et sa clé API.
2. Une suite de tests que vous avez modifiée en suivant les instructions d'axe Developer Hub lorsque vous avez créé le projet.
3. Un workflow GitHub qui exécute votre suite de tests chaque fois que quelqu'un effectue un commit dans votre dépôt.

Les sections suivantes décrivent les étapes nécessaires pour modifier un workflow afin d'utiliser l'action axe Developer Hub GitHub.

Étape 1 : créez un secret pour votre clé API

Voir Secrets chiffrés dans un flux de travail pour plus d'informations sur la création d'un secret pour votre flux de travail.

Pour cet exemple, le secret créé s'appelle AXE_DEV_HUB_API_KEY, avec la clé API de votre projet comme valeur, mais vous pouvez nommer le secret comme vous le souhaitez. Il doit être référencé par le même nom dans la tâche de workflow.

Étape 2 : modifier votre flux de travail actuel

Vous devez modifier votre flux de travail d’exécution de tests actuel dans .github/workflows et ajouter l’action GitHub après le travail qui exécute votre suite de tests.

Le travail suivant votre action de suite de tests doit exécuter l’action axe Developer Hub GitHub. Voici un exemple de tâche qui exécute l'action axe Developer Hub GitHub (la ligne jobs: est incluse pour montrer où se trouve l'action dans le flux de travail) :

jobs:

# ...
# Job that runs your test suite (deleted for brevity)
# ...

# Add the following new job:

  axe-dev-hub:
    runs-on: ubuntu-latest
    needs: cypress
    steps:
      - uses: actions/checkout@v3
      - uses: dequelabs/axe-devhub-action@v1
        with:
          api_key: ${{ secrets.AXE_DEV_HUB_API_KEY }}

Consultez le tableau des paramètres d'entrée pour tous les paramètres d'entrée possibles pour l'action GitHub. Vous pouvez, par exemple, activer le seuil a11y en utilisant enable_a11y_threshold : true. (Vérifiez toujours l'exemple d'invocation dans le dépôt d'actions GitHub pour la dernière configuration du travail. Cependant, contrairement à l'exemple d'invocation, ne définissez pas le paramètre server_url à moins que vous n'utilisiez un serveur de test, ce qui est rare.)

Ce tâche dépend de la tâche qui exécute votre suite de tests, spécifié avec la ligne needs : cypress . Assurez-vous de mettre à jour cette ligne pour qu’elle corresponde au nom de la tâche qui exécute votre suite de tests.

Résultats

Si l'action GitHub échoue (plus de zéro erreur d'accessibilité), elle joint un commentaire similaire au suivant à votre pull request et bloque le merge :

Si vous cliquez sur le lien, vous serez redirigé vers la page Axe Developer Hub qui affiche les informations sur les défauts d'accessibilité pour ce commit.

L'action GitHub définit plusieurs paramètres de sortie. Consultez le tableau des paramètres de sortie pour plus d'informations.

Dépannage

Vous pourriez recevoir une erreur telle que la suivante :

Error: Resource not accessible by integration

Pour corriger cette erreur, vous devez disposer de autorisations de lecture et écriture pour les actions (pour permettre à l'action d'ajouter des commentaires aux pull requests), soit dans la page des paramètres des actions, soit, pour plus de granularité, via un autre GITHUB_TOKEN. Voir Modification des autorisations pour le GITHUB_TOKEN pour plus d'informations. Vous pouvez utiliser la valeur d'entrée github_token pour spécifier un jeton différent pour l'action GitHub.

Exemple de flux de travail

Le référentiel d'actions GitHub du Developer Hub d'axe contient un exemple de workflow que vous pouvez utiliser pour créer votre propre exécuteur de tests. L'exemple de workflow s'appelle Tests (tests.yml) et s'exécute sur n'importe quelle validation ou demande d'extraction.

La tâche qui exécute la suite de tests modifiée, cypress, montre comment exécuter une suite de tests Cypress. La tâche suivante, axe-dev-hub, est un exemple d'invocation de l'action GitHub axe Developer Hub. Votre job de suite de tests doit toujours s'exécuter avant l'action axe Developer Hub GitHub.

Référence

Consultez le axe Developer Hub README pour plus d'informations sur les paramètres d'entrée et de sortie de l'action GitHub.

Voir aussi

• dépôt d'actions GitHub axe Developer Hub
• action.yml
• Exemple de suite de tests