Verwenden der axe Developer Hub GitHub Action

In diesem Artikel erfahren Sie, wie Sie die GitHub-Aktion „axe Developer Hub“ einrichten, mit der GitHub-Workflows Commits und Pull Requests blockieren können, wenn diese Zugänglichkeitsfehler enthalten.

Überblick

Wenn Ihre modifizierte Testsuite läuft, verknüpft sie die Barrierefreiheitsergebnisse mit einem Git-Commit SHA und sendet diese Informationen an die Server von Deque. Wenn die GitHub-Aktion später ausgeführt wird, fragt sie Deque nach diesen Ergebnissen ab.

Anforderungen

Bevor Sie die GitHub-Aktion verwenden können, müssen einige Voraussetzungen erfüllt sein:

1. Ein Projekt auf axe Developer Hub und sein API-Schlüssel.
2. Eine Testsuite, die Sie geändert haben, indem Sie beim Erstellen des Projekts den Anweisungen im Axe Developer Hub gefolgt sind.
3. Ein GitHub-Workflow, der Ihre Testsuite ausführt, wenn jemand einen Commit zu Ihrem Repo durchführt.

In den folgenden Abschnitten werden die erforderlichen Schritte zum Ändern eines Workflows zur Verwendung der GitHub-Aktion „axe Developer Hub“ beschrieben.

Schritt 1: Erstellen Sie ein Secret für Ihren API-Schlüssel

Siehe Verschlüsselte Geheimnisse in einem Workflow für Informationen zum Erstellen eines Geheimnisses für Ihren Workflow.

In diesem Beispiel heißt das erstellte Geheimnis AXE_DEV_HUB_API_KEY und hat den API-Schlüssel Ihres Projekts als Wert. Sie können dem Geheimnis jedoch einen beliebigen Namen geben. Es muss im Workflow-Job mit demselben Namen referenziert werden.

Schritt 2: Ändern Sie Ihren aktuellen Workflow

Sie müssen Ihren aktuellen Test-Runner-Workflow in .github/workflows ändern und die GitHub-Aktion nach dem Job hinzufügen, der Ihre Testsuite ausführt.

Der Job, der auf die Aktion Ihrer Testsuite folgt, sollte die GitHub-Aktion „axe Developer Hub“ ausführen. Dies ist ein Beispiel für einen Job, der die GitHub-Aktion „axe Developer Hub“ ausführt (die Zeile jobs: zeigt an, wo sich die Aktion im Workflow befindet):

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 }}

Alle möglichen Eingabeparameter für die GitHub-Aktion finden Sie in der Tabelle der Eingabeparameter . Sie können beispielsweise den a11y-Schwellenwert mit enable_a11y_threshold: true aktivieren. (Überprüfen Sie immer den Beispielaufruf im GitHub-Repository auf die neueste Jobkonfiguration. Legen Sie den Parameter server_url jedoch anders als im Beispielaufruf nicht fest, es sei denn, Sie verwenden einen Testserver, was ungewöhnlich ist.)

Dieser Job hängt von dem Job ab, der Ihre Testsuite ausführt, spezifiziert mit der Zeile needs: cypress . Aktualisieren Sie diese Zeile unbedingt, damit sie mit dem Namen des Jobs übereinstimmt, der Ihre Testsuite ausführt.

Ergebnisse

Wenn die GitHub-Aktion fehlschlägt (mehr als null Zugänglichkeitsfehler), wird Ihrer Pull-Anforderung ein Kommentar ähnlich dem folgenden angehängt und das Zusammenführen blockiert:

Wenn Sie auf den Link klicken, werden Sie zur Axe Developer Hub-Seite weitergeleitet, auf der Informationen zu Barrierefreiheitsfehlern für diesen Commit angezeigt werden.

Die GitHub-Aktion legt mehrere Ausgabeparameter fest. Weitere Informationen finden Sie in der Tabelle der Ausgabeparameter .

Fehlerbehebung

Möglicherweise erhalten Sie eine Fehlermeldung wie die folgende:

Error: Resource not accessible by integration

Um diesen Fehler zu beheben, benötigen Sie zu lesen und Schreibberechtigungen für Aktionen (damit die Aktion Kommentare zu Pull Requests hinzufügen kann), entweder auf der Einstellungsseite für Aktionen oder, für mehr Granularität, über einen anderen GITHUB_TOKEN. Weitere Informationen finden Sie unter Ändern der Berechtigungen für das GITHUB_TOKEN . Sie können den Eingabewert github_token verwenden, um der GitHub-Aktion ein anderes Token anzugeben.

Beispiel-Workflow

Das Repository der GitHub-Aktion „axe Developer Hub“ enthält einen Beispiel-Workflow, den Sie zum Erstellen Ihres eigenen Test-Runners verwenden können. Der Beispiel-Workflow heißt Tests (tests.yml) und wird bei jedem Commit oder Pull Request ausgeführt.

Der Job, der die geänderte Testsuite ausführt, cypress, zeigt, wie eine Cypress-Testsuite ausgeführt wird. Der folgende Job, axe-dev-hub, ist ein Beispielaufruf der GitHub-Aktion „axe Developer Hub“. Ihr Test-Suite-Job sollte immer vor der GitHub-Aktion „Axe Developer Hub“ ausgeführt werden.

Referenz

Informationen zu den Eingabe- und Ausgabeparametern für die GitHub-Aktion finden Sie in der axe Developer Hub README .

Siehe auch

• axe Developer Hub GitHub Action Repo
• action.yml
• Beispiel-Testsuite