Verwenden von axe DevTools Linter für React Native

Wir freuen uns, Unterstützung für React Native zu axe DevTools Linter hinzuzufügen!

Die Funktionen umfassen derzeit 6 Regeln, die auf React Native-Dateien (.js, .jsx, .ts und .tsx) ausgeführt werden. Unter den folgenden Links erfahren Sie mehr darüber, was die einzelnen Regeln testen und wie Sie die von ihnen erkannten Probleme beheben können:

• hat gültige Zugänglichkeitsaktionen
• hat gültige Zugänglichkeitsrolle
• hat gültigen Zugänglichkeitsstatus
• hat gültigen Zugänglichkeitswert
• Bild hat Barrierefreiheitslabel
• hat Zugänglichkeitsrolle

Einrichtung

Für die Nutzung der Software-as-a-Service-Version von axe DevTools Linter ist keine Installation erforderlich. Sie müssen lediglich der Anleitung zum Erhalten eines API-Schlüssels folgen und können den Dienst dann sofort nutzen. Anweisungen zu den verschiedenen Möglichkeiten, mit denen der Server Codedateien auf Barrierefreiheitsprobleme überprüfen kann, finden Sie im Abschnitt Verwenden von axe DevTools Linter , unter anderem über eine GitHub-Aktion und ein Befehlszeilen-Tool namens axe DevTools Linter Connector. Sie können auch über die REST-API direkt mit dem Server interagieren.

Fügen Sie für Methoden, die zur Konfiguration auf eine axe-linter.yml Datei antworten, wie etwa GitHub Action und Connector, „react-native“ als globale Bibliothek hinzu, um die Lint-Funktion für React Native zu aktivieren:

global-libraries:
  - react-native

Für Methoden, die die Konfiguration im JSON-Format akzeptieren, z. B. das direkte Aufrufen der REST-API, schließen Sie Folgendes ein, um die React Native-Linting-Funktion zu aktivieren:

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

Linting für benutzerdefinierte Komponenten

Die React Native-Funktion unterstützt auch das Prüfen benutzerdefinierter Komponenten, die ähnlich wie diese Funktion zum HTML-Prüfen funktionieren. Derzeit ist es jedoch nur für die image-has-accessibility-label Regel verfügbar. Bitte beachten Sie die Anleitung zum linting benutzerdefinierter Komponenten , die sich speziell auf HTML bezieht, das Konzept auf hoher Ebene gilt jedoch auch für React Native. Hier ist ein Beispiel für die Verwendung der benutzerdefinierten Komponenten-Linting-Funktion mit der image-has-accessibility-label Regel für React Native:

Nehmen wir an, wir haben eine benutzerdefinierte Image Komponente namens MyImage , die die Eigenschaften isAccessible und accessibleLabel akzeptiert. Diese Eigenschaften steuern die Standardzugriffseigenschaften für Image , welche accessible und accessibilityLabelsind. Um axe DevTools Linter auf diese benutzerdefinierte Zuordnung aufmerksam zu machen, sollte Folgendes in die Konfiguration aufgenommen werden:

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

Wenn diese Konfiguration vorhanden ist, meldet axe DevTools Linter Probleme, wenn es Instanzen von <MyImage/> erkennt, die nicht sowohl die isAccessible als auch die accessibleLabel Eigenschaften enthalten.