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 component-linting in de bibliotheek in te schakelen, voeg de NPM-pakketnaam van de bibliotheek toe aan de global-libraries array in je axe-linter.yml bestand:

global-libraries:
  - '@mui/material'

important

In YAML moeten strings die beginnen met @ binnen aanhalingstekens worden geplaatst, aangezien @ een gereserveerd teken is.

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 mappings te gebruiken met de Axe Accessibility Linter-extensie voor VS Code of de JetBrains-plugin, voeg je de volgende regels toe aan je 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.