Voorgeconfigureerde Componentbibliotheken

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Bespreekt vooraf gedefinieerde mappingen voor verschillende populaire componentbibliotheken in Axe DevTools Linter

Not for use with personal data

Axe DevTools Linter komt met ingebouwde ondersteuning voor verschillende populaire componentbibliotheken. Wanneer ingeschakeld, wordt het gebruik van de componenten uit die bibliotheken getest op toegankelijkheid op dezelfde manier als native HTML-elementen.

Inleiding

De componenten gedefinieerd door de volgende pakketten worden momenteel ondersteund:

NPM-pakketnaam	Voor meer informatie
@deque/cauldron-react	Cauldron React: Toegankelijke Componentenbibliotheek
@mui/material	Material UI
react-native	React Native

note

De voorgeconfigureerde componentbibliotheek voor Material UI bevat niet alle componenten die in Material UI zijn gedefinieerd; het omvat alleen die gedefinieerd in het @mui/material pakket.

Om linten van bibliotheekcomponenten mogelijk te maken, voegt u de NPM-pakketnaam van de bibliotheek toe aan de global-libraries array in uw axe-linter.yml bestand:

global-libraries:
  - '@mui/material'

important

In YAML moeten strings die beginnen met @ tussen aanhalingstekens worden geplaatst, omdat @ een gereserveerd karakter is.

Of de equivalente JSON-configuratie (voor de REST-service) wordt hieronder getoond:

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

Elke component met dezelfde naam als een component uit de globale bibliotheek wordt behandeld als die bibliotheekcomponent, waardoor herexporteren en herdefiniëren van componenten mogelijk is zonder dat de mapping verloren gaat.

Cauldron React

Cauldron React versie 4.7.0 en later wordt momenteel ondersteund.

Cauldron React Configuratie

Om de Cauldron-mappingen te gebruiken met de Axe Accessibility Linter-extensie voor VS Code of de JetBrains-plugin, voegt u de volgende regels toe aan uw axe-linter.yml bestand:

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

Cauldron Voorbeeld

Het volgende voorbeeld toont een Cauldron Button element zonder tekstinhoud, wat een toegankelijkheidsfout is:

<Button></Button>

In uw IDE (VS Code wordt getoond) nadat u de Cauldron-bibliotheek in uw configuratie hebt ingeschakeld, zult u een fout zien zoals de volgende:

Material UI

Material UI versie 5.11.15 en later worden momenteel ondersteund.

note

De vooraf gedefinieerde mappingen bevatten alleen componenten die zijn gedefinieerd in het @mui/material pakket, niet alle componenten die in Material UI zijn gedefinieerd.