Librerie di componenti preconfigurate

Link to Librerie di componenti preconfigurate copied to clipboard

Descrive le mappature predefinite per diverse librerie di componenti popolari in axe DevTools Linter

Not for use with personal data

axe DevTools Linter è dotato di supporto integrato per numerose librerie di componenti diffuse. Se abilitata, l'utilizzo dei componenti di tali librerie viene testato per verificarne l'accessibilità, allo stesso modo degli elementi HTML nativi.

Introduzione

Attualmente sono supportati i componenti definiti dai seguenti pacchetti:

Nome del 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 linting dei componenti della libreria, aggiungi il nome del pacchetto NPM della libreria all'array global-libraries nel tuo file axe-linter.yml :

global-libraries:
  - '@mui/material'

important

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

Oppure 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 della libreria globale verrà trattato come quel componente della libreria, consentendo la riesportazione e la nuova dichiarazione dei componenti senza perdere la loro mappatura.

Cauldron React

Attualmente è supportata la versione 4.7.0 e successive di Cauldron React.

Configurazione di Cauldron React

Per utilizzare i mapping Cauldron con l'estensione 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

L'esempio seguente mostra un elemento Cauldron Button senza contenuto di testo, che è 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:

Questa immagine mostra l'elemento Cauldron Button senza alcun contenuto di testo, il che rappresenta un errore di accessibilità e viene segnalato da un suggerimento di errore in VS Code.

Material UI

Attualmente sono supportate le versioni 5.11.15 e successive di Material UI.

note

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

Configurazione Material UI

Per utilizzare i mapping di Material UI con l'estensione 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

L'esempio seguente mostra un errore di accessibilità in cui aria-colindex viene utilizzato in modo non corretto con il componente Material UI ImageList:

<ImageList aria-colindex="1"/>

Nel tuo IDE (viene mostrato VS Code), vedrai questo messaggio di errore:

L'immagine mostra un errore quando si utilizza l'attributo ara-colindex con il componente MUI ImageList.

Se non imposti l'opzione global-libraries su '@mui/material' nel tuo file di configurazione, non vedrai questo errore.

note

Gli attributi di accessibilità impostati tramite l'attributo inputProps sugli elementi di input dell'interfaccia utente Material vengono attualmente ignorati.