Uso de Axe DevTools Linter para React Native

¡Estamos emocionados de ofrecer soporte para React Native en Axe DevTools Linter!

La funcionalidad actualmente incluye 6 reglas que se ejecutan en archivos de React Native (.js, .jsx, .ts, y .tsx). Por favor, consulte los siguientes enlaces para saber más sobre qué prueba cada regla y cómo corregir los problemas detectados por ellas:

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

Configuración

La versión de software como servicio de Axe DevTools Linter no requiere ninguna instalación para su uso. Solo necesitas seguir la guía para obtener una clave API y podrás comenzar a usar el servicio de inmediato. Por favor, consulta la sección de usar Axe DevTools Linter para obtener instrucciones sobre las diversas formas en que el servidor puede comprobar archivos de código en busca de problemas de accesibilidad, incluyendo a través de una GitHub Action y una herramienta de línea de comandos llamada Conector de Axe DevTools Linter. También puedes interactuar directamente con el servidor utilizando su API REST.

Para los métodos que dependen de un archivo axe-linter.yml para la configuración, como el GitHub Action y el Conector, añade 'react-native' como una biblioteca global para habilitar el linting para React Native:

global-libraries:
  - react-native

Para los métodos que aceptan la configuración en formato JSON, como llamar a la API REST directamente, incluye lo siguiente para habilitar el linting de React Native:

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

Linting de Componentes Personalizados

La característica de React Native también admite el linting de componentes personalizados que funcionan de manera similar a esta característica para el linting de HTML. Sin embargo, actualmente solo está disponible para la regla image-has-accessibility-label. Por favor, consulta la guía para linting de componentes personalizados, que es específica para HTML, pero el concepto general también aplica para React Native. Aquí tienes un ejemplo de cómo usar el linting de componentes personalizados con la regla image-has-accessibility-label para React Native:

Supongamos que hemos construido un componente personalizado Image llamado MyImage que acepta las propiedades isAccessible y accessibleLabel. Esas propiedades controlan las propiedades de accesibilidad predeterminadas para Image, que son accessible y accessibilityLabel. Para que Axe DevTools Linter tenga en cuenta este mapeo personalizado, se debe incluir lo siguiente en la configuración:

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

Con esta configuración en su lugar, Axe DevTools Linter reportará problemas si detecta cualquier instancia de <MyImage/> que no incluya tanto las propiedades isAccessible como accessibleLabel.