Bibliothèques de composants préconfigurés

Link to Bibliothèques de composants préconfigurés 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 est fourni avec un support intégré pour plusieurs bibliothèques de composants populaires. Lorsque cette option est activée, 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 : Bibliothèque de composants accessibles
@mui/material	Material UI
React Native	React Native

note

La bibliothèque de composants préconfigurés 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 le linting 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

Dans YAML, les chaînes commençant par @ doivent être placées entre guillemets, car @ est un caractère réservé.

Ou la configuration JSON équivalente (pour le service REST) est affiché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 la bibliothèque, ce qui permet de réexporter et de redéclarer les 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 l'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 Button sans contenu textuel, ce qui constitue une erreur d'accessibilité :

<Button></Button>

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

Cette image montre l'élément Bouton Chaudron sans aucun contenu textuel, ce qui constitue une erreur d'accessibilité et est indiqué par une info-bulle d'erreur dans VS Code.

Material UI

Les versions 5.11.15 et ultérieures de Material UI sont actuellement prises 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 Material UI avec l'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 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 utilisé comme exemple), vous verrez ce message d'erreur :

L'image montre une erreur lors de l'utilisation de l'attribut ara-colindex avec le composant MUI ImageList.

Si vous ne définissez pas l'option global-libraries 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 de Material UI sont actuellement ignorés.

React Native

Configuration de React Native

Pour utiliser les mappages Cauldron avec l'extension axe Accessibility Linter pour VS Code ou le plugin JetBrains, ajoutez les lignes suivantes à votre fichier axe-linter.yml :