Usando Axe DevTools Linter para React Native

Estamos animados em trazer suporte para React Native ao Axe DevTools Linter!

O recurso atualmente inclui 6 regras que são executadas em arquivos React Native (.js, .jsx, .ts e .tsx). Por favor, veja os links a seguir para saber mais sobre o que cada regra testa e como corrigir os problemas detectados por elas:

• has-valid-accessibility-actions
• has-valid-accessibility-role
• has-valid-accessibility-state
• has-valid-accessibility-value
• image-has-accessibility-label
• has-accessibility-role

Configuração

A versão software como serviço do Axe DevTools Linter não requer nenhuma instalação para uso. Você só precisará seguir o guia para obter uma chave da API e poderá começar a usar o serviço imediatamente. Consulte a seção usando Axe DevTools Linter para instruções sobre as várias maneiras de o servidor checar arquivos de código em busca de problemas de acessibilidade, incluindo via um Ação do GitHub e uma ferramenta de linha de comando chamada Conector Axe DevTools Linter. Você também pode interagir diretamente com o servidor usando sua API REST.

Para métodos que dependem de um arquivo axe-linter.yml para configuração, como a GitHub Action e o Connector, adicione 'react-native' como uma biblioteca global para habilitar o linting para React Native:

global-libraries:
  - react-native

Para métodos que aceitam a configuração em formato JSON, como chamar a API REST diretamente, inclua o seguinte para habilitar a lintagem para React Native:

{
  "config": {
    "global-libraries": ["react-native"]
  }
}

Lintagem de Componentes Personalizados

O recurso React Native também suporta linting de componentes personalizados que funcionam de maneira semelhante a este recurso de linting para HTML. No entanto, atualmente está disponível apenas para a regra image-has-accessibility-label. Consulte o guia para lintagem de componentes personalizados, que é específico para HTML, mas o conceito de alto nível se aplica ao React Native. Aqui está um exemplo de uso de linting de componentes personalizados com a regra image-has-accessibility-label para React Native:

Digamos que criamos um componente personalizado Image chamado MyImage que aceita as propriedades isAccessible e accessibleLabel. Essas propriedades controlam as propriedades de acessibilidade padrão para Image, que são accessible e accessibilityLabel. Para que o Axe DevTools Linter esteja ciente desse mapeamento personalizado, o seguinte deve ser incluído na configuração:

global-components:
  MyImage:
    element: Image
    attributes:
      - isAccessible: accessible
      - accessibleLabel: accessibilityLabel

Com essa configuração em vigor, o Axe DevTools Linter relatará problemas se encontrar quaisquer instâncias de <MyImage/> que não incluam as propriedades isAccessible e accessibleLabel.