Utilisation d'axe DevTools Linter pour React Native

Nous sommes ravis d'apporter la prise en charge de 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 les tests effectués par chaque règle et sur la manière de résoudre les problèmes détectés par celles-ci :

• a des actions d'accessibilité valides
• a un rôle d'accessibilité valide
• a-un-état-d’accessibilité-valide
• a-une-valeur-d’accessibilité-valide
• image-a-une-étiquette-d’accessibilité
• a-un-rôle-d’accessibilité

Configuration

La version logicielle en tant que service d'axe DevTools Linter ne nécessite aucune installation pour être utilisée. Il vous suffira de suivre le guide pour obtenir une clé API puis vous pourrez commencer à utiliser le service immédiatement. Veuillez consulter la section utilisation d'axe DevTools Linter pour obtenir des instructions sur les différentes manières dont le serveur peut vérifier les fichiers de code pour les problèmes d'accessibilité, notamment via une Action GitHub et un outil en ligne de commande appelé axe DevTools Linter Connector. Vous pouvez également interagir directement avec le serveur en utilisant son API REST.

Pour les méthodes qui se basent sur un axe-linter.yml fichier pour la configuration, telles que l'action et le connecteur GitHub, 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 de l'API REST, incluez les éléments suivants pour activer le linting React Native :

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

Linting de composants personnalisés

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

Disons que nous avons créé Image un composant personnalisé 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 que axe DevTools Linter prenne en compte ce mappage personnalisé, les éléments suivants doivent être inclus dans la configuration :

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

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