Bibliothèques de composants préconfigurées

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

Discute des mappages prédéfinis pour plusieurs bibliothèques de composants populaires dans Axe DevTools Linter

Not for use with personal data

Axe DevTools Linter propose un support intégré pour plusieurs bibliothèques de composants populaires. Lorsqu'ils sont activés, l'utilisation des composants de ces bibliothèques est testée pour l'accessibilité de la même manière que les éléments HTML natifs.

Introduction

Les composants définis par les packages suivants sont actuellement pris en charge :

Nom du package NPM	Pour plus d'informations
@deque/cauldron-react	Cauldron React : Librairie d'éléments accessibles
@mui/material	Material UI
react-native	React Native

note

La bibliothèque de composants préconfigurée pour Material UI n'inclut pas tous les composants définis dans Material UI ; elle inclut uniquement ceux définis dans le package @mui/material.

Pour activer l'analyse des composants de la bibliothèque, ajoutez le nom du package NPM de la bibliothèque au tableau global-libraries dans votre axe-linter.yml fichier :

global-libraries:
  - '@mui/material'

important

En YAML, les chaînes qui commencent par @ doivent être entourées de guillemets, car @ est un caractère réservé.

Ou la configuration JSON équivalente (pour le Service REST) est montrée ci-dessous :

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

Tout composant portant le même nom qu'un composant de la bibliothèque globale sera traité comme ce composant de bibliothèque, permettant de réexporter et redéclarer des composants sans perdre leur mappage.

Cauldron React

La version 4.7.0 et ultérieure de Cauldron React est actuellement prise en charge.

Configuration de Cauldron React

Pour utiliser les mappages Cauldron avec le Extension Axe Accessibility Linter pour VS Code ou le Plugin JetBrains, ajoutez les lignes suivantes à votre fichier axe-linter.yml :

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

Exemple de Cauldron

L'exemple suivant montre un élément Cauldron Bouton sans contenu textuel, ce qui constitue une erreur d'accessibilité :

<Button></Button>

Dans votre IDE (VS Code est montré) après avoir activé la bibliothèque Cauldron dans votre configuration, vous verrez une erreur telle que :

Material UI

La version 5.11.15 et ultérieure de Material UI est actuellement prise en charge.

note

Les mappages prédéfinis incluent uniquement les composants définis dans le package @mui/material, pas tous les composants définis dans Material UI.

Configuration de Material UI

Pour utiliser les mappages de Material UI avec le Extension Axe Accessibility Linter pour VS Code ou le Plugin JetBrains, ajoutez les lignes suivantes à votre fichier axe-linter.yml :

global-libraries:
  - '@mui/material'

Exemple de Material UI

L'exemple suivant montre une erreur d'accessibilité où aria-colindex est utilisé de manière incorrecte avec le composant Material UI ImageList :

<ImageList aria-colindex="1"/>

Dans votre IDE (VS Code est montré), vous verrez ce message d'erreur :

Si vous ne définissez pas l'option bibliothèques-globales sur '@mui/material' dans votre fichier de configuration, vous ne verrez pas cette erreur.

note

Les attributs d'accessibilité que vous définissez à l'aide de l'attribut inputProps sur les éléments d'entrée Material UI sont actuellement ignorés.