Utilizzo dell'azione GitHub del Developer Hub di axe
Controlla automaticamente PR e commit per difetti di accessibilità con l'azione GitHub del Developer Hub di axe
Questo articolo spiega come impostare l'azione GitHub del Developer Hub di axe, che consente ai flussi di lavoro GitHub di bloccare commit e richieste pull se contengono errori di accessibilità.
Per altre pipeline CI/CD (come quelle su GitLab, Bitbucket o CircleCI), puoi utilizzare il servizio REST fornito da axe Developer Hub come base per la tua integrazione.
Panoramica
Quando la tua suite di test modificata viene eseguita, associa i risultati di accessibilità a un commit Git SHA e invia tali informazioni ai server di Deque. Successivamente, quando viene eseguita l'azione GitHub, questa interroga Deque per ottenere questi risultati.
L'azione GitHub deve essere eseguita dopo l'esecuzione della suite di test perché interroga i server di Deque per i risultati di accessibilità associati all'ultimo commit SHA del ramo corrente.
Requisiti
Ci sono alcuni requisiti da soddisfare prima di poter utilizzare l'azione GitHub:
- Un progetto su axe Developer Hub e la sua chiave API.
- Una suite di test che hai modificato seguendo le istruzioni in axe Developer Hub quando hai creato il progetto.
- Un flusso di lavoro GitHub che esegue la tua suite di test ogni volta che qualcuno effettua un commit nel tuo repository.
Le sezioni seguenti descrivono i passaggi necessari per modificare un flusso di lavoro per utilizzare l'azione GitHub di axe Developer Hub.
Passaggio 1: crea un Secret per la tua chiave API
Vedere Segreti crittografati in un flusso di lavoro per informazioni su come creare un segreto per il tuo flusso di lavoro.
In questo esempio, il segreto creato si chiama AXE_DEV_HUB_API_KEY e ha come valore la chiave API del tuo progetto, ma puoi dare al segreto il nome che preferisci. Deve essere referenziato con lo stesso nome nel processo del flusso di lavoro.
Passaggio 2: modifica il flusso di lavoro corrente
Devi modificare il flusso di lavoro del test runner corrente in .github/workflows e aggiungere l'azione GitHub dopo il processo che esegue la tua suite di test.
Se non disponi già di un flusso di lavoro che esegue la tua suite di test, puoi utilizzare flusso di lavoro di esempio come punto di partenza. (La directory esempio contiene un progetto di prova completo con cui puoi sperimentare.) Per ulteriori informazioni, vedere Flusso di lavoro di esempio di seguito.
Il job che segue l'azione della tua suite di test dovrebbe eseguire l'azione GitHub di axe Developer Hub. Ecco un esempio di un lavoro che esegue l'azione GitHub di axe Developer Hub (la riga jobs: è inclusa per mostrare dove si trova l'azione nel flusso di lavoro):
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 }}Consultare la tabella dei parametri di input per tutti i possibili parametri di input per l'azione GitHub. Ad esempio, puoi abilitare la soglia a11y utilizzando enable_a11y_threshold: true. (Controllare sempre esempio di invocazione nel repository delle azioni GitHub per la configurazione del job più recente. Tuttavia, a differenza dell'esempio di invocazione, non impostare il parametro server_url a meno che non si utilizzi un server di prova, il che è raro.)
Questo job dipende dal job che esegue la suite di test, specificato con la riga needs: cypress . Assicurati di aggiornare questa riga in modo che corrisponda al nome del job che esegue la tua suite di test.
Risultati
Se l'azione di GitHub fallisce (più di zero errori di accessibilità), allega un commento simile al seguente alla tua pull request e blocca il merge:
Facendo clic sul collegamento, verrai indirizzato alla pagina di axe Developer Hub, che mostra informazioni sui difetti di accessibilità per quel commit.
L'azione GitHub imposta diversi parametri di output. Per ulteriori informazioni, consultare la tabella dei parametri di output .
Risoluzione dei problemi
Potresti ricevere un errore come il seguente:
Error: Resource not accessible by integrationPer correggere questo errore, avete bisogno delle autorizzazioni di lettura e scrittura per le azioni (per consentire all'azione di aggiungere commenti alle richieste di pull), nella pagina delle impostazioni delle azioni o, per più granularità, tramite un diverso TOKEN_GITHUB. Per ulteriori informazioni, vedere Modifica delle autorizzazioni per GITHUB_TOKEN . Puoi usare il valore di input github_token per specificare un token diverso per l'azione GitHub.
Esempio di flusso di lavoro
Il repository dell'azione GitHub di axe Developer Hub contiene un flusso di lavoro di esempio che puoi utilizzare per creare il tuo test runner.(https://github.com/dequelabs/axe-devhub-action) Il flusso di lavoro di esempio si chiama Tests (tests.yml) e viene eseguito su qualsiasi commit o richiesta pull.
Il lavoro che esegue la suite di test modificata, cypress, mostra come eseguire una suite di test Cypress. Il seguente lavoro, axe-dev-hub, è un esempio di invocazione dell'azione GitHub axe Developer Hub. Il lavoro della suite di test dovrebbe sempre essere eseguito prima dell'azione axe Developer Hub GitHub.
Riferimento
Per informazioni sui parametri di input e output per l'azione GitHub, consultare il file [axe Developer Hub README].(https://github.com/dequelabs/axe-devhub-action/blob/main/README.md)