DEV Community: Ana Arezo

A11y: Mejora de la accesibilidad de las aplicaciones con ESLint

Ana Arezo — Thu, 10 Aug 2023 20:41:31 +0000

Cuando se trata de desarrollar aplicaciones en React Native, garantizar la accesibilidad es un aspecto esencial para crear experiencias inclusivas y fáciles de usar.

Aquí es donde entra en juego el plugin ESLint React Native A11y. Es un plugin diseñado para mejorar la accesibilidad en aplicaciones React Native y React mediante el uso de ESLint, una herramienta de análisis de código JavaScript.

Vamos a desglosar esto: mientras que muchos de nosotros estamos familiarizados con el poder de un verificador de código, hay mucho más por descubrir con este plugin.

El plugin ESLint React Native A11y es una herramienta que va más allá de la simple comprobación de sintaxis. Está diseñada para ayudar a que tus aplicaciones React Native sean más accesibles durante la escritura de código e incluso cuando se crean acciones que se ejecutan en el pipeline del repositorio.

Esta herramienta puede ofrecerte ideas sobre cómo corregir tu código y también recordarte que las propiedades deben tener los tipos correctos.

¿Cómo funciona?

Instalación: Primero, necesitas instalar el paquete del plugin, que es eslint-plugin-react-native-a11y. Esto se puede hacer usando el gestor de paquetes node.
Configuración: Una vez instalado, debes configurar el plugin en el archivo .eslintrc de tu proyecto. Esto implica incluir el plugin en la sección de plugins y definir las reglas que quieres habilitar.
Con el plugin configurado, ESLint empezará a analizar tu código durante el proceso de desarrollo. Aplicará las reglas específicas del plugin para comprobar la accesibilidad de tu código.
Cuando ESLint identifica problemas de accesibilidad en su código, genera mensajes de error o advertencia, dependiendo de la gravedad del problema. Estos mensajes suelen incluir detalles sobre el problema específico y, en algunos casos, sugerencias sobre cómo solucionarlo.
Puede configurar ESLint para que se ejecute automáticamente cada vez que guarde un archivo o antes de confirmar los cambios en el sistema de control de versiones. Esto ayuda a identificar y rectificar los problemas de accesibilidad desde el principio del desarrollo.

Para implementar esto en su repositorio, siga los siguientes pasos.

En el archivo .eslintrc.js, añada el siguiente fragmento:

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

En el mismo archivo .eslintrc.js, añade las reglas dentro del 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',
      ],
    },
  ],
}

Una vez que hayas terminado, ejecuta el linter tal y como está instalado en tu proyecto, y descubrirás todos los errores relacionados con la accesibilidad que puedes rectificar.

En resumen, ESLint React Native A11y es una potente herramienta que ayuda a garantizar que tus aplicaciones React Native sean accesibles para un público más amplio, promoviendo prácticas inclusivas y experiencias mejoradas para todos los usuarios.

Si encuentras problemas o inconsistencias en el artículo, no dudes en comentarlo.

A11y: Improving app accessibility with ESLint

Ana Arezo — Thu, 10 Aug 2023 20:32:51 +0000

ESLint React Native A11y Download

When it comes to developing applications in React Native, ensuring accessibility is an essential aspect of creating inclusive and user-friendly experiences.

This is where the ESLint Plugin React Native A11y comes into play. It's a plugin designed to enhance accessibility in React Native and React applications through the usage of ESLint, a JavaScript code analysis tool.

Let's break this down: while many of us are familiar with the power of a code checker, there's much more to discover with this plugin.

The ESLint Plugin React Native A11y is a tool that goes beyond simple syntax checks. It's crafted to assist in making your React Native applications more accessible during code writing and even when creating actions that run in the repository's pipeline.

This tool can offer ideas on how to fix your code and also remind you that properties need to have the correct types.

How Does It Work?

Installation: First, you need to install the plugin package, which is eslint-plugin-react-native-a11y. This can be done using the node package manager.
Configuration: Once installed, you must set up the plugin in your project's .eslintrc file. This involves including the plugin in the plugins section and defining the rules you want to enable.
Code Analysis: With the plugin configured, ESLint will start analysing your code during the development process. It will apply the specific rules of the plugin to check the accessibility of your code.
Feedback and Corrections: When ESLint identifies accessibility issues in your code, it generates error or warning messages, depending on the severity of the problem. These messages usually include details about the specific problem and, in some cases, suggestions on how to fix it.
Integration into Development Workflow: You can set up ESLint to run automatically whenever you save a file or before you commit your changes to the version control system. This helps identify and rectify accessibility issues right from the beginning of development.

To implement this in your repository, follow the steps below.

Within the .eslintrc.js file, add the snippet below:

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

In the same .eslintrc.js file, add the rules within the rules object:

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',
      ],
    },
  ],
}

Once you're done, run the linter as installed in your project, and you'll discover all the accessibility-related errors you can rectify.

In summary, ESLint React Native A11y is a powerful tool that helps ensure your React Native applications are accessible to a broader audience, promoting inclusive practices and enhanced experiences for all users.

If you encounter issues or inconsistencies in the article, please feel free to comment.

A11y: Melhorando a acessibilidade de aplicativos com ESLint

Ana Arezo — Thu, 10 Aug 2023 20:22:08 +0000

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?

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