Vorkonfigurierte Komponentenbibliotheken

Link to Vorkonfigurierte Komponentenbibliotheken copied to clipboard

Bespricht vordefinierte Zuordnungen für mehrere beliebte Komponentenbibliotheken in axe DevTools Linter

Not for use with personal data

axe DevTools Linter verfügt über integrierte Unterstützung für mehrere beliebte Komponentenbibliotheken. Wenn diese Option aktiviert ist, wird die Verwendung der Komponenten aus diesen Bibliotheken auf die gleiche Weise wie native HTML-Elemente auf Barrierefreiheit getestet.

Einleitung

Derzeit werden die durch die folgenden Pakete definierten Komponenten unterstützt:

NPM-Paketname	Weitere Informationen
@deque/cauldron-react	Cauldron React: Bibliothek zugänglicher Komponenten
@mui/material	Material UI
react-native	React Native

note

Die vorkonfigurierte Komponentenbibliothek für Material UI enthält nicht alle in Material UI definierten Komponenten, sondern nur die im Paket @mui/material definierten.

Um das Linting von Bibliothekskomponenten zu aktivieren, fügen Sie den NPM-Paketnamen der Bibliothek zum Array global-libraries in Ihrer axe-linter.yml Datei hinzu:

global-libraries:
  - '@mui/material'

important

In YAML müssen Zeichenfolgen, die mit @ beginnen, in Anführungszeichen eingeschlossen werden, da @ ein reserviertes Zeichen ist.

Oder die entsprechende JSON-Konfiguration (für den REST-Dienst) wird unten angezeigt:

{
  "config": {
    "global-libraries": [
      "@mui/material"
    ]
  }
}

Jede Komponente mit demselben Namen wie eine Komponente aus der globalen Bibliothek wird als diese Bibliothekskomponente behandelt. Dadurch können Komponenten erneut exportiert und neu deklariert werden, ohne dass ihre Zuordnung verloren geht.

Cauldron React

Derzeit wird Cauldron React Version 4.7.0 und höher unterstützt.

Cauldron React-Konfiguration

Um die Cauldron-Mappings mit der axe Accessibility Linter-Erweiterung für VS Code oder dem JetBrains-Plugin zu verwenden, fügen Sie Ihrer Datei axe-linter.yml die folgenden Zeilen hinzu:

global-libraries:
  - '@deque/cauldron-react'

Kesselbeispiel

Das folgende Beispiel zeigt ein Cauldron Button -Element ohne Textinhalt, was einen Barrierefreiheitsfehler darstellt:

<Button></Button>

Nachdem Sie in Ihrer IDE (VS Code wird angezeigt) die Cauldron-Bibliothek in Ihrer Konfiguration aktiviert haben, wird ein Fehler wie der folgende angezeigt:

Dieses Bild zeigt das Cauldron-Button-Element ohne Textinhalt. Dies stellt einen Barrierefreiheitsfehler dar und wird durch einen Fehler-Tooltip in VS Code angezeigt.

Material-Benutzeroberfläche

Derzeit wird Material UI Version 5.11.15 und höher unterstützt.

note

Die vordefinierten Zuordnungen umfassen nur Komponenten, die im Paket @mui/material definiert sind, nicht alle in Material UI definierten Komponenten.

Material-UI-Konfiguration

Um die Material-UI-Zuordnungen mit der axe Accessibility Linter-Erweiterung für VS Code oder dem JetBrains-Plugin zu verwenden, fügen Sie Ihrer Datei axe-linter.yml die folgenden Zeilen hinzu:

global-libraries:
  - '@mui/material'

Material-UI-Beispiel

Das folgende Beispiel zeigt einen Zugänglichkeitsfehler, bei dem aria-colindex falsch mit der Material-UI-Komponente ImageList verwendet wird: