Librerie di Componenti Preconfigurate

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 delle mappature predefinite per diverse librerie di componenti popolari in Axe DevTools Linter

Not for use with personal data

Axe DevTools Linter include il supporto integrato per diverse librerie di componenti popolari. Quando attivato, l'utilizzo dei componenti di queste librerie viene testato per l'accessibilità nello stesso modo in cui vengono testati gli elementi HTML nativi.

Introduzione

I componenti definiti dai seguenti pacchetti sono attualmente supportati:

Nome pacchetto NPM	Per maggiori informazioni
@deque/cauldron-react	Cauldron React: Libreria di Componenti Accessibili
@mui/material	Material UI
react-native	React Native

note

La libreria di componenti preconfigurata per Material UI non include tutti i componenti definiti in Material UI; include solo quelli definiti nel pacchetto @mui/material.

Per abilitare il controllo dei componenti di libreria, aggiungi il nome del pacchetto NPM della libreria all'array global-libraries nel tuo axe-linter.yml file:

global-libraries:
  - '@mui/material'

important

In YAML, le stringhe che iniziano con @ devono essere racchiuse tra virgolette, poiché @ è un carattere riservato.

O la configurazione JSON equivalente (per il Servizio REST) è mostrata di seguito:

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

Qualsiasi componente con lo stesso nome di un componente dalla libreria globale sarà trattato come un componente di quella libreria, permettendo il riesportamento e la ridefinizione dei componenti senza perdere la loro mappatura.

Cauldron React

Cauldron React versione 4.7.0 e successive sono attualmente supportate.

Configurazione di Cauldron React

Per utilizzare le mappature di Cauldron con il Estensione di Axe Accessibility Linter per VS Code o il Plugin JetBrains, aggiungi le seguenti righe al tuo file axe-linter.yml:

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

Esempio di Cauldron

Il seguente esempio mostra un elemento Pulsante di Cauldron senza contenuto di testo, il che costituisce un errore di accessibilità:

<Button></Button>

Nel tuo IDE (viene mostrato VS Code) dopo aver abilitato la libreria Cauldron nella tua configurazione, vedrai un errore come il seguente:

Material UI

Material UI versione 5.11.15 e successive sono attualmente supportate.

note

Le mappature predefinite includono solo i componenti definiti nel pacchetto @mui/material, non tutti i componenti definiti in Material UI.

Configurazione di Material UI

Per utilizzare le mappature di Material UI con il Estensione di Axe Accessibility Linter per VS Code o il Plugin JetBrains, aggiungi le seguenti righe al tuo file axe-linter.yml:

global-libraries:
  - '@mui/material'

Esempio di Material UI

Il seguente esempio mostra un errore di accessibilità in cui aria-colindex viene utilizzato in modo errato con il componente ImageList di Material UI: