Usando o 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 , então você pode começar a usar o serviço imediatamente. Por favor, veja a seção usando Axe DevTools Linter para instruções sobre as várias maneiras que o servidor pode verificar arquivos de código em busca de problemas de acessibilidade, incluindo via uma 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 de axe-linter.yml para configuração, como a Ação do GitHub e o Conector, adicione 'react-native' como uma biblioteca global para habilitar a lintagem 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 a lintagem de componentes personalizados que funcionam de forma semelhante a esse recurso para lintagem de HTML. No entanto, está atualmente disponível apenas para a image-has-accessibility-label regra. Por favor, veja 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 como usar a lintagem de componentes personalizados com a image-has-accessibility-label regra para React Native:

Digamos que construímos um componente personalizado Image chamado MyImage que aceita as propriedades isAccessible e accessibleLabel. Essas propriedades controlam as propriedades padrão de acessibilidade para Image, que são accessible e accessibilityLabel. Para fazer com 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 vir quaisquer instâncias de <MyImage/> que não incluam tanto o isAccessible quanto as propriedades accessibleLabel .