Bibliotecas de Componentes Preconfigurados

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 mapeos predefinidos para varias bibliotecas de componentes populares en Axe DevTools Linter

Not for use with personal data

Axe DevTools Linter viene con soporte integrado para varias bibliotecas de componentes populares. Cuando se habilita, el uso de los componentes de esas bibliotecas se prueba para accesibilidad de la misma manera que los elementos HTML nativos.

Introducción

Actualmente, se admiten los componentes definidos por los siguientes paquetes:

Nombre del paquete NPM	Para más información
@deque/cauldron-react	Cauldron React: Biblioteca de Componentes Accesibles
@mui/material	Material UI
react-native	React Native

note

La biblioteca de componentes preconfigurados para Material UI no incluye todos los componentes definidos en Material UI; solo incluye aquellos definidos en el paquete @mui/material.

Para habilitar el linting de componentes de la biblioteca, agrega el nombre del paquete NPM de la biblioteca al arreglo global-libraries en tu archivo axe-linter.yml:

global-libraries:
  - '@mui/material'

important

En YAML, las cadenas que comienzan con @ deben estar entre comillas, ya que @ es un carácter reservado.

O la configuración equivalente en JSON (para el servicio REST) se muestra a continuación:

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

Cualquier componente con el mismo nombre que un componente de la biblioteca global será tratado como ese componente de la biblioteca, permitiendo re-exportar y redeclarar componentes sin perder su mapeo.

Cauldron React

Actualmente se admite Cauldron React versión 4.7.0 y posteriores.

Configuración de Cauldron React

Para usar los mapeos de Cauldron con el extensión de Axe Accessibility Linter para VS Code o el plugin de JetBrains, agrega las siguientes líneas a tu archivo axe-linter.yml:

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

Ejemplo de Cauldron

El siguiente ejemplo muestra un elemento Cauldron Botón sin contenido de texto, lo cual es un error de accesibilidad:

<Button></Button>

En tu IDE (se muestra VS Code) después de haber habilitado la biblioteca Cauldron en tu configuración, verás un error como el siguiente:

Material UI

Actualmente se admiten Material UI versión 5.11.15 y posteriores.

note

Los mapeos predefinidos solo incluyen componentes definidos en el paquete @mui/material, no todos los componentes definidos en Material UI.

Configuración de Material UI

Para usar los mapeos de Material UI con el extensión de Axe Accessibility Linter para VS Code o el plugin de JetBrains, agrega las siguientes líneas a tu archivo axe-linter.yml:

global-libraries:
  - '@mui/material'

Ejemplo de Material UI

El siguiente ejemplo muestra un error de accesibilidad donde aria-colindex se está utilizando incorrectamente con el componente ImageList de Material UI: