Verwendung von Axe DevTools Linter für React Native

Wir freuen uns, die Unterstützung für React Native im Axe DevTools Linter ankündigen zu können!

Das Feature umfasst derzeit 6 Regeln, die auf React Native-Dateien (.js, .jsx, .ts und .tsx) angewendet werden. Bitte beachten Sie die folgenden Links, um mehr darüber zu erfahren, was jede Regel testet und wie die festgestellten Probleme behoben werden können:

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

Einrichtung

Die Software-as-a-Service-Version von Axe DevTools Linter erfordert keine Installation. Sie müssen lediglich der Anleitung für Erhalt eines API-Schlüssels folgen und können den Dienst sofort nutzen. Siehe den Abschnitt Verwendung von Axe DevTools Linter für Anweisungen zu den verschiedenen Möglichkeiten, wie der Server Code-Dateien hinsichtlich Zugänglichkeitsprobleme überprüfen kann, einschließlich über eine GitHub Action und ein Kommandozeilen-Tool namens Axe DevTools Linter Connector. Sie können auch direkt mit dem Server über die REST API interagieren.

Für Methoden, die auf eine axe-linter.yml-Datei zur Konfiguration angewiesen sind, wie die GitHub Action und der Connector, fügen Sie 'react-native' als globale Bibliothek hinzu, um das Linting für React Native zu aktivieren:

global-libraries:
  - react-native

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

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

Linting von benutzerdefinierten Komponenten

Das React Native-Feature unterstützt auch das Linting benutzerdefinierter Komponenten, die ähnlich wie die HTML-Linting-Funktion arbeiten. Es ist jedoch derzeit nur für die image-has-accessibility-label-Regel verfügbar. Bitte beachten Sie die Anleitung für Linting benutzerdefinierter Komponenten, die spezifisch für HTML ist, aber das grundlegende Konzept gilt auch für React Native. Hier ist ein Beispiel für die Verwendung des Lintings von benutzerdefinierten Komponenten mit der image-has-accessibility-label-Regel für React Native:

Angenommen, wir haben eine benutzerdefinierte Image-Komponente namens MyImage erstellt, die die Eigenschaften isAccessible und accessibleLabel akzeptiert. Diese Eigenschaften steuern die Standard-Zugänglichkeitseigenschaften für Image, die accessible und accessibilityLabel sind. Um Axe DevTools Linter über diese benutzerdefinierte Zuordnung zu informieren, sollte Folgendes in die Konfiguration aufgenommen werden:

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

Mit dieser Konfiguration meldet Axe DevTools Linter Probleme, wenn es Instanzen von <MyImage/> sieht, die nicht sowohl die isAccessible- als auch die accessibleLabel-Eigenschaften enthalten.