De Axe Developer Hub GitHub Actie gebruiken

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Automatisch PR's en commits controleren op toegankelijkheidsfouten

Not for use with personal data

Vereist:

note

Voor andere CI/CD-pijplijnen (zoals die op GitLab, Bitbucket, of CircleCI) of wanneer je Axe DevTools voor Web API's/CLI gebruikt, kun je de Axe Developer Hub REST-service gebruiken als basis voor je eigen integratie.

Overzicht

De Axe Developer Hub GitHub Actie stelt je in staat om GitHub-workflows op te zetten voor webprojecten die Axe Watcher integreren, om commits en pull requests te blokkeren als ze toegankelijkheidsfouten bevatten.

Wanneer je aangepaste testsuite draait, associeert het toegankelijkheidsresultaten met een Git-commit SHA en stuurt die informatie naar de servers van Deque. De GitHub-actie draait *nadat* je testsuite draait, en het vraagt de servers van Deque om de toegankelijkheidsresultaten op die geassocieerd zijn met de nieuwste commit-SHA van de huidige tak.

Installatie

  1. Maak een Omgevingsvariabele voor je Project-ID - We raden aan je project-ID op te slaan in een omgevingsvariabele of andere GitHub-variabele. Voor dit voorbeeld slaan we de project-ID op als een omgevingsvariabele genaamd PROJECT_ID.

  2. Maak een Geheim voor je API-sleutel - Voor dit voorbeeld heet het aangemaakte geheim AXE_DEV_HUB_API_KEY, met je persoonlijke API-sleutel als waarde, maar je kunt het geheim elke gewenste naam geven. Het moet met dezelfde naam worden verwezen in de workflowtaak.

  3. Voeg Toegankelijkheidscontroles toe aan je Testsuite - Zorg ervoor dat je de stappen in projectinstallatie hebt voltooid om toegankelijkheidscontroles te integreren in de testsuite die wordt gebruikt in je (Axe Watcher) CI/CD-pijplijn.

  4. Pas je Huidige Workflow aan - Je moet je huidige testrunworkflow aanpassen in .github/workflows en de GitHub-actie toevoegen *nadat* de taak die je testsuite draait.

Voorbeeldtaak

De taak die volgt op je testsuite-actie zou de Axe Developer Hub GitHub-actie moeten draaien. Raadpleeg het volgende voorbeeld:

jobs:

# ...
# your-CI-test
# ...

# Add the following new job:
# Be sure to replace <choose_latest_tag> with the appropriate version tag
  axe-dev-hub:
    runs-on: ubuntu-latest
    needs: your-CI-test
    steps:
      - uses: actions/checkout@v5
      - uses: dequelabs/axe-devhub-action@<choose_latest_tag>
        with:
          api_key: ${{ secrets.axe_DEV_HUB_API_KEY }}
          project_id: ${{ env.PROJECT_ID }}

De axe-dev-hub taak in het voorbeeld is afhankelijk van de taak die je testsuite draait, gespecificeerd met de **needs: your-CI-test** regel. Zorg ervoor dat je deze regel bijwerkt zodat deze overeenkomt met de naam van de taak die je testsuite draait.

Je kunt meerdere invoerparameters gebruiken voor de GitHub-actie. Bijvoorbeeld, je kunt de a11y drempel inschakelen door **enable_a11y_threshold: true**te gebruiken. Een volledige lijst van invoerparameters is te vinden in de Axe Developer Hub GitHub Actie README.

Opmerking: U hoeft de server_url parameter niet in te stellen als uw project is aangemaakt op axe.deque.com. Als u een andere omgeving gebruikt, moet u dit instellen zodat het overeenkomt met de URL waarop uw project is aangemaakt.

Resultaten

De GitHub-actieset stelt verschillende uitvoerparameters in, waaronder een telling van gedetecteerde toegankelijkheidsproblemen, opgeloste problemen en problemen die de a11y-drempel overschrijden.

Als u de a11y-drempel niet hebt ingeschakeld, zal de GitHub Actie falen wanneer er meer dan nul toegankelijkheidsfouten aanwezig zijn. Indien ingeschakeld, zullen alleen overtredingen die de a11y-drempel overschrijden ervoor zorgen dat de GitHub Actie faalt. Lees meer over het gebruik van de a11y-drempel om de Axe Developer Hub aan te passen aan de prioriteiten van uw organisatie.

Het falen van de GitHub Actie zal een opmerking zoals de onderstaande aan uw pullverzoek toevoegen en kan het samenvoegen blokkeren.

Een voorbeeldbericht dat de GitHub-actie toevoegt aan een pushverzoek wanneer er toegankelijkheidsfouten zijn gevonden.

Klik op de link in de pullverzoekopmerking om informatie over toegankelijkheidsdefecten voor die commit in Axe Developer Hub te bekijken.

Probleemoplossing

U kunt een foutmelding ontvangen zoals de volgende:

Error: Resource not accessible by integration

Controleer of u de benodigde machtigingen hebt op de instellingenpagina voor acties. U hebt lees- en schrijfrechten nodig om de actie toe te staan opmerkingen toe te voegen aan pullverzoeken. Voor meer granulariteit kunt u ervoor kiezen om een andere GITHUB_TOKEN te gebruiken voor de GitHub-actie. Voeg deze waarde toe aan de github_token invoerparameter.

Voorbeeld Workflow

Als u nog geen workflow hebt die uw test suite uitvoert, kunt u de voorbeeldworkflow gebruiken als uitgangspunt om uw eigen test runner te maken.

De voorbeeldworkflow heet Tests (tests.yml) en loopt op elke commit of pullverzoek. De taak die de gemodificeerde test suite uitvoert, cypress, laat zien hoe u een Cypress-test suite kunt uitvoeren. De volgende taak in het voorbeeld, axe-dev-hub, is een aanroep van de Axe Developer Hub GitHub-actie.

Uw test suite-taak moet altijd worden uitgevoerd voordat de Axe Developer Hub GitHub-actie.

tip

De voorbeeldmap bevat een compleet testproject waarmee u kunt experimenteren.

Referenties

Is this page helpful?

Help us improve this page

Still need help?