Axe DevTools Linter gebruiken voor React Native

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. U hoeft alleen maar de handleiding te volgen voor het verkrijgen van een API-sleutel waarna u de service onmiddellijk kunt gebruiken. Raadpleeg de gebruik van Axe DevTools Linter sectie voor instructies over de verschillende manieren waarop de server codebestanden kan controleren op toegankelijkheidsproblemen, inclusief via een GitHub-actie en een opdrachtregeltool genaamd Axe DevTools Linter Connector. U kunt ook rechtstreeks met de server communiceren via de REST-API.

Voor methoden die een axe-linter.yml bestand gebruiken voor configuratie, zoals de GitHub-actie en Connector, voeg 'react-native' toe als een globale bibliotheek om linting voor React Native in te schakelen:

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 functie ondersteunt ook linting van aangepaste componenten die vergelijkbaar functioneert met deze functie voor HTML-linting. Het is echter momenteel alleen beschikbaar voor de image-has-accessibility-label regel. Raadpleeg de handleiding 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 linting van aangepaste componenten met de image-has-accessibility-label regel voor React Native:

Stel dat we een aangepaste Image component hebben gemaakt genaamd MyImage die de eigenschappen accepteert isAccessible en accessibleLabel. Deze eigenschappen bepalen de standaard toegankelijkheidseigenschappen voor Image, die accessible en accessibilityLabelzijn. Om Axe DevTools Linter hiervan op de hoogte te stellen, 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 melden als het voorbeelden van <MyImage/> vindt die zowel de isAccessible als de accessibleLabel eigenschappen niet bevatten.