Uso de axe DevTools Linter para React Native

¡Estamos entusiasmados de brindar soporte para React Native a axe DevTools Linter!

La función actualmente incluye 6 reglas que se ejecutan en archivos React Native (.js, .jsx, .ts y .tsx). Consulte los siguientes enlaces para obtener más información sobre qué prueba cada regla y cómo solucionar los problemas detectados por ellas:

• tiene acciones de accesibilidad válidas
• tiene un rol de accesibilidad válido
• tiene-estado-de-accesibilidad-válido
• tiene un valor de accesibilidad válido
• tiene-imagen-etiqueta-de-accesibilidad
• tiene rol de accesibilidad

Configuración

La versión de software como servicio de axe DevTools Linter no requiere ninguna instalación para su uso. Solo tendrás que seguir la guía para obtener una clave API y luego podrás comenzar a usar el servicio de inmediato. Consulta la sección uso de axe DevTools Linter para obtener instrucciones sobre las distintas formas en las que el servidor puede verificar los archivos de código para detectar problemas de accesibilidad, incluso a través de una Acción de GitHub y una herramienta de línea de comandos llamada axe DevTools Linter Connector. También puedes interactuar directamente con el servidor utilizando su API REST.

Para los métodos que dependen de un axe-linter.yml archivo para la configuración, como la acción y el conector de GitHub, agregue 'react-native' como una biblioteca global para habilitar el linteado para React Native:

global-libraries:
  - react-native

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

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

Linting de componentes personalizados

La función React Native también admite el linteado de componentes personalizados que funcionan de manera similar a esta función para el linteado de HTML. Sin embargo, actualmente sólo está disponible para image-has-accessibility-label la regla. Consulta la guía para linting de componentes personalizados , que es específica de HTML, pero el concepto de alto nivel es válido para React Native. A continuación se muestra un ejemplo de uso de linting de componentes personalizados con la regla image-has-accessibility-label para React Native:

Digamos que hemos creado un Image componente personalizado MyImage llamado que acepta isAccessible las propiedades accessibleLabely. Esas propiedades controlan las propiedades de accesibilidad predeterminadas para Image , que son accessible y accessibilityLabel. Para que axe DevTools Linter reconozca esta asignación personalizada, se debe incluir lo siguiente en la configuración:

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

Con esta configuración implementada, axe DevTools Linter informará problemas si detecta alguna instancia de <MyImage/> que no incluya las propiedades isAccessible y accessibleLabel .