A11y: Melhorando a acessibilidade de aplicativos com ESLint

Download do ESLint React Native A11y

Quando se trata de desenvolver aplicativos em React Native, garantir a acessibilidade é um aspecto essencial para criar experiências inclusivas e amigáveis ​​ao usuário.

É aí que o ESLint Plugin React Native A11y entra em cena, é um plugin projetado para melhorar a acessibilidade em aplicativos React Native e React, através do uso do ESLint, uma ferramenta de limpeza de código JavaScript.

Vamos quebrar isso em partes: embora muitos de nós estejamos familiarizados com o poder de um verificador de código, há muito mais a descobrir com esse plugin.

O ESLint Plugin React Native A11y é uma ferramenta que vai além das simples verificações de sintaxe. Foi projetado para ajudar a tornar seus aplicativos React Native mais acessíveis durante a escrita do código e até mesmo ao criar ações que rodam na pipeline do repositório de código.

Esta ferramenta pode fornecer ideias de como corrigir o código, como também, lembrá-lo de que as propriedades devem estar com os tipos corretos.

Como funciona?

1. Instalação: Primeiro, você precisa instalar o pacote do plugin, que é o eslint-plugin-react-native-a11y. Isso pode ser feito usando o gerenciador de pacotes npm.

2. Configuração: Depois de instalado, você deve configurar o plugin no arquivo .eslintrc do seu projeto. Isso envolve a inclusão do plugin na seção de plugins e a definição das regras que você deseja habilitar.

3. Análise de Código: Com o plugin configurado, o ESLint começará a analisar seu código durante o processo de desenvolvimento. Ele aplicará as regras específicas do plugin para verificar a acessibilidade do seu código.

4. Feedback e Correções: Quando o ESLint encontra problemas de acessibilidade no seu código, ele gera mensagens de erro ou aviso, dependendo da gravidade do problema. Essas mensagens geralmente incluem detalhes sobre o problema específico e, em alguns casos, sugestões sobre como corrigi-lo.

5. Integração no Fluxo de Desenvolvimento: Você pode configurar o ESLint para ser executado automaticamente sempre que você salvar um arquivo ou antes de confirmar suas alterações no sistema de controle de versão. Isso ajuda a identificar e corrigir problemas de acessibilidade desde o início do desenvolvimento.

Para implementar em seu repositório siga os passos, a seguir.

Dentro do arquivo .eslintrc.js adicione o trecho abaixo:

module.exports = {
  root: true,
  extends: [
    '@react-native-community',
    'plugin:react-native-a11y/ios'
  ]
};

No mesmo arquivo .eslintrc.js adicione as regras dentro do objeto rules:

rules: {
  'react-native-a11y/has-accessibility-hint': 2,
  'react-native-a11y/has-valid-accessibility-role': 2,
  'react-native-a11y/has-valid-accessibility-state': 2,
  'react-native-a11y/has-valid-accessibility-states': 2,
  'react-native-a11y/has-valid-accessibility-component-type': 2,
  'react-native-a11y/has-valid-accessibility-traits': 2,
  'react-native-a11y/has-valid-accessibility-value': 2,
  'react-native-a11y/no-nested-touchables': 2,
  'react-native-a11y/has-valid-accessibility-descriptors': 2,
  'react-native-a11y/has-valid-accessibility-ignores-invert-colors': 2,
  'react-native-a11y/exhaustive-deps': 2,
  'react-native-a11y/has-valid-accessibility-actions': 2,
  'react-native-a11y/has-accessibility-props': [
    'error',
    {
      touchables: [
        'TouchableOpacity',
        'TouchableHighlight',
        'TouchableWithoutFeedback',
        'TouchableNativeFeedback',
        'TouchableBounce',
        'Pressable',
        'Button',
      ],
    },
  ],
}

Ao finalizar rode o linter conforme o instalado no projeto e você irá descobrir todos os erros que pode corrigir relacionados à acessibilidade.

Em resumo, o ESLint React Native A11y é uma ferramenta poderosa que ajuda a garantir que seus aplicativos React Native sejam acessíveis a um público mais amplo, promovendo práticas inclusivas e melhores experiências para todos os usuários.

Caso encontre problemas ou inconsistências no artigo fique à vontade para sinalizar.