Utilisation d'Axe DevTools Linter pour React Native

Nous sommes ravis d'apporter le support pour React Native à Axe DevTools Linter !

La fonctionnalité comprend actuellement 6 règles qui s'exécutent sur les fichiers React Native (.js, .jsx, .ts et .tsx). Veuillez consulter les liens suivants pour en savoir plus sur ce que chaque règle teste et comment corriger les problèmes qu'elles détectent :

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

Configuration

La version SaaS (software-as-a-service) d'Axe DevTools Linter ne nécessite aucune installation pour être utilisée. Il vous suffit de suivre le guide pour obtenir une clé API, puis vous pouvez commencer à utiliser le service immédiatement. Veuillez consulter la section utiliser Axe DevTools Linter pour obtenir des instructions sur les différentes manières dont le serveur peut vérifier les fichiers de code pour détecter des problèmes d'accessibilité, y compris via un GitHub Action et un outil en ligne de commande appelé Connecteur Axe DevTools Linter. Vous pouvez également interagir directement avec le serveur en utilisant son API REST.

Pour les méthodes qui reposent sur un fichier de configuration axe-linter.yml, comme le GitHub Action et le Connecteur, ajoutez 'react-native' comme bibliothèque globale pour activer le linting pour React Native :

global-libraries:
  - react-native

Pour les méthodes qui acceptent la configuration au format JSON, comme l'appel direct à l'API REST, incluez ce qui suit pour activer le linting de React Native :

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

Linting des composants personnalisés

La fonctionnalité React Native prend également en charge le linting des composants personnalisés qui fonctionnent de manière similaire à cette fonctionnalité de linting HTML. Cependant, elle est actuellement disponible uniquement pour la règle image-has-accessibility-label. Veuillez consulter le guide pour linting des composants personnalisés, qui est spécifique à HTML, mais le concept général est valable pour React Native. Voici un exemple d'utilisation du linting des composants personnalisés avec la règle image-has-accessibility-label pour React Native :

Supposons que nous ayons construit un composant personnalisé Image appelé MyImage qui accepte les propriétés isAccessible et accessibleLabel. Ces propriétés contrôlent les propriétés d'accessibilité par défaut pour Image, qui sont accessible et accessibilityLabel. Pour informer Axe DevTools Linter de ce mappage personnalisé, le suivant doit être inclus dans la configuration :

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

Avec cette configuration en place, Axe DevTools Linter signalera les problèmes s'il voit des instances de <MyImage/> qui n'incluent pas à la fois les propriétés isAccessible et accessibleLabel.