Axe DevTools Linter voor React Native gebruiken

We zijn enthousiast om ondersteuning voor React Native toe te voegen aan Axe DevTools Linter!

De functie omvat momenteel 6 regels die uitgevoerd worden op React Native-bestanden (.js, .jsx, .ts en .tsx). Zie de volgende links voor meer informatie over wat elke regel test en hoe de gedetecteerde problemen verholpen kunnen worden:

• heeft-geldige-toegankelijkheidsacties
• heeft-geldige-toegankelijkheidsrol
• heeft-geldige-toegankelijkheidsstatus
• heeft-geldige-toegankelijkheidswaarde
• beeld-heeft-toegankelijkheidslabel
• heeft-toegankelijkheidsrol

Installatie

De software-as-a-service versie van Axe DevTools Linter vereist geen installatie om te gebruiken. Je hoeft alleen de gids voor het verkrijgen van een API-sleutel te volgen en dan kun je de service direct gebruiken. Raadpleeg de gebruik van Axe DevTools Linter sectie voor instructies over de verschillende manieren waarop de server codebestanden kan controleren op toegankelijkheidsproblemen, waaronder via een GitHub-actie en een opdrachtregeltool genaamd Axe DevTools Linter Connector. Je kunt ook direct communiceren met de server via zijn REST-API.

Voor methoden die afhankelijk zijn van een axe-linter.yml-bestand voor configuratie, zoals de GitHub Action en Connector, voeg 'react-native' toe als een globale bibliotheek om linting voor React Native mogelijk te maken:

global-libraries:
  - react-native

Voor methoden die configuratie in JSON-formaat accepteren, zoals het direct aanroepen van de REST-API, voeg het volgende toe om React Native linting in te schakelen:

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

Aangepaste Component Linting

De React Native functionaliteit ondersteunt ook het linten van aangepaste componenten die vergelijkbaar functioneren met deze functionaliteit voor HTML-linten. Het is echter momenteel alleen beschikbaar voor de image-has-accessibility-label regel. Raadpleeg de gids voor linting van aangepaste componenten, die specifiek is voor HTML, maar het algemene concept geldt ook voor React Native. Hier is een voorbeeld van het gebruik van linten voor aangepaste componenten met de image-has-accessibility-label regel voor React Native:

Laten we zeggen dat we een aangepaste Image-component hebben gebouwd genaamd MyImage die de eigenschappen isAccessible en accessibleLabel accepteert. Die eigenschappen bepalen de standaardtoegankelijkheidseigenschappen voor Image, namelijk accessible en accessibilityLabel. Om Axe DevTools Linter bewust te maken van deze aangepaste mapping, moet het volgende in de configuratie worden opgenomen:

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

Met deze configuratie zal Axe DevTools Linter problemen rapporteren als het gevallen ziet van <MyImage/> die niet zowel de isAccessible als accessibleLabel eigenschappen bevatten.