Usando a Ação GitHub do Axe Developer Hub

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

Verifique automaticamente PRs e commits para defeitos de acessibilidade

Not for use with personal data

Requisitos:

note

Para outros pipelines CI/CD (como aqueles no GitLab, Bitbucket ou CircleCI) ou ao usar o Axe DevTools para APIs/CLI Web, você pode usar o serviço REST do Axe Developer Hub Axe Developer Hub como base para a sua própria integração.

Visão Geral

A Ação de GitHub do Axe Developer Hub permite configurar fluxos de trabalho no GitHub para projetos web que integrem o Axe Watcher, bloqueando commits e pull requests se contiverem erros de acessibilidade.

Quando o seu modificado é executado, ele associa resultados de acessibilidade a um SHA de commit do Git e envia essas informações para os servidores da Deque. A ação do GitHub é executada após seu conjunto de testes, e consulta os servidores da Deque para obter os resultados de acessibilidade associados ao SHA do último commit do branch atual.

Configuração

  1. Crie uma Variável de Ambiente para o ID do Seu Projeto - Recomendamos que você armazene seu ID de projeto em uma variável de ambiente ou outra variável do GitHub. Para este exemplo, vamos armazenar o ID do projeto como uma variável de ambiente chamada PROJECT_ID.

  2. Crie um Segredo para a Sua Chave API - Para este exemplo, o segredo criado é chamado AXE_DEV_HUB_API_KEY, com sua chave API pessoal como valor, mas você pode nomear o segredo como desejar. Ele deve ser referenciado pelo mesmo nome na tarefa do fluxo de trabalho.

  3. Adicione Verificações de Acessibilidade ao Seu Conjunto de Testes - Certifique-se de ter concluído as etapas em configuração do projeto para integrar verificações de acessibilidade no conjunto de testes usado em seu pipeline CI/CD (Axe Watcher).

  4. Modifique Seu Fluxo de Trabalho Atual - Você precisa modificar seu fluxo de trabalho atual do executor de testes em .github/workflows e adicionar a ação do GitHub após à tarefa que executa seu conjunto de testes.

Exemplo de Trabalho

O trabalho seguinte à ação do seu conjunto de testes deve executar a ação do Axe Developer Hub GitHub. Consulte o exemplo a seguir:

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

A tarefa axe-dev-hub no exemplo depende da tarefa que executa seu conjunto de testes, especificada com a linha needs: your-CI-test. Certifique-se de atualizar essa linha para corresponder ao nome da tarefa que executa seu conjunto de testes.

Você pode usar vários parâmetros de entrada para a Ação de GitHub. Por exemplo, você pode ativar o limite de acessibilidade usando enable_a11y_threshold: true. Uma lista completa de parâmetros de entrada pode ser encontrada no README da Ação de GitHub do Axe Developer Hub.

note

Você não precisa definir o parâmetro server_url se criou seu projeto em axe.deque.com. Se sua organização usa uma instância regional, nuvem privada ou instalação no local do Axe Developer Hub, você deve definir server_url com a URL base dessa instância (por exemplo, https://axe-eu.deque.com).

Resultados

A ação do GitHub define vários parâmetros de saída, incluindo uma contagem de problemas de acessibilidade que foram detectados, problemas que foram resolvidos e problemas que superam o limite de a11y.

Se você não habilitou o limite a11y, a Ação de GitHub falhará sempre que mais de zero erros de acessibilidade estiverem presentes. Se habilitado, apenas violações que ultrapassarem o limite a11y causarão falha na Ação de GitHub. Saiba mais sobre como usar o limite de a11y para personalizar o Axe Developer Hub de acordo com as prioridades de sua organização.

A falha da ação do GitHub anexará um comentário similar ao abaixo ao seu pull request e pode bloquear a mesclagem.

Uma mensagem de exemplo que a ação do GitHub anexa a um push request quando erros de acessibilidade foram encontrados.

Clique no link no comentário do pull request para revisar as informações dos defeitos de acessibilidade para esse commit no Axe Developer Hub.

Solucionando Problemas

Você pode receber um erro como o seguinte:

Error: Resource not accessible by integration

Verifique se você tem as permissões necessárias na página de configurações para ações. Você precisa de permissões de leitura e escrita para permitir que a ação adicione comentários aos pull requests. Para mais granularidade, você pode optar por usar um GITHUB_TOKEN diferente para a ação do GitHub. Adicione esse valor ao parâmetro de entrada github_token.

Exemplo de Workflow

Se você ainda não tem um fluxo de trabalho que executa seu conjunto de testes, pode usar o fluxo de trabalho de exemplo como ponto de partida para criar seu próprio executor de testes.

O fluxo de trabalho de exemplo é chamado Testes (tests.yml) e é executado em qualquer commit ou pull request. A tarefa que executa o conjunto de testes modificado, cypress, mostra como executar um conjunto de testes do Cypress. A seguinte tarefa no exemplo, axe-dev-hub, é uma invocação da ação do Axe Developer Hub GitHub.

A tarefa do seu conjunto de testes deve sempre ser executada antes a ação do Axe Developer Hub GitHub.

tip

O diretório de exemplo contém um projeto de teste completo com o qual você pode experimentar.

Referências

Is this page helpful?

Help us improve this page

Still need help?