Usando a Ação do 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

Requer:

note

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

Visão Geral

A Ação do GitHub do Axe Developer Hub permite que você configure fluxos de trabalho no GitHub para projetos web integrando o Axe Watcher, para bloquear commits e pull requests se contiverem quaisquer erros de acessibilidade.

Quando seu conjunto de testes modificado é executado, ele associa os resultados de acessibilidade a um SHA de commit do Git e envia essa informação para os servidores da Deque. A ação do GitHub é executada *depois* que seu conjunto de testes é executado e consulta os servidores da Deque para obter os resultados de acessibilidade associados ao SHA do commit mais recente do branch atual.

Configuração

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

  2. **Crie um Segredo para sua Chave de API** - Para este exemplo, o segredo criado é chamado AXE_DEV_HUB_API_KEY, com sua chave de API pessoal como valor, mas você pode nomear o segredo como quiser. Ele deve ser referido pelo mesmo nome no job do fluxo de trabalho.

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

  4. **Modifique Seu Fluxo de Trabalho Atual** - Você precisa modificar o fluxo de trabalho do seu executor de testes em .github/workflows e adicionar a ação do GitHub *depois* do job que executa seu conjunto de testes.

Exemplo de Job

O job que segue a ação do seu conjunto de testes deve executar a ação do GitHub do Axe Developer Hub. 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 }}

O axe-dev-hub job no exemplo depende do job que executa seu conjunto de testes, especificado com a linha **needs: your-CI-test** . Certifique-se de atualizar esta linha para corresponder ao nome do job que executa seu conjunto de testes.

Você pode usar múltiplos parâmetros de entrada para a Ação do GitHub. Por exemplo, você pode ativar o limite de a11y usando **enable_a11y_threshold: true**. Uma lista completa de parâmetros de entrada pode ser encontrada na Axe Developer Hub GitHub Action README.

Nota: Você não precisa definir o server_url parâmetro se você criou seu projeto em axe.deque.com. Se você estiver usando um ambiente diferente, deve definir isso para corresponder à URL onde seu projeto foi criado.

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 excedem o limite de a11y.

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

A falha da Ação do GitHub anexará um comentário semelhante 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 são encontrados.

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

Solução de 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 actions. Você precisa de permissões de leitura e permissões de escrita para permitir que a ação adicione comentários a pull requests. Para mais granularidade, você pode optar por usar um GITHUB_TOKEN diferente para a ação do GitHub. Adicione este valor ao github_token parâmetro de entrada.

Exemplo de Workflow

Se você ainda não tem um workflow que execute sua suíte de testes, você pode usar o workflow de exemplo como ponto de partida para criar seu próprio executor de testes.

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

Seu trabalho de suíte de testes deve sempre ser executado antes da ação do Axe Developer Hub no 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?