Bibliotecas de componentes preconfiguradas

axe DevTools Linter viene con soporte integrado para varias bibliotecas de componentes populares. Cuando está habilitado, el uso de los componentes de esas bibliotecas se prueba en términos de accesibilidad de la misma manera que se prueban los elementos HTML nativos.

Introducción

Actualmente se admiten los componentes definidos por los siguientes paquetes:

Para habilitar el control de calidad de los componentes de la biblioteca, agregue el nombre del paquete NPM de la biblioteca a la matriz global-libraries en su archivo axe-linter.yml :

global-libraries:
  - '@mui/material'

O la configuración JSON equivalente (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, lo que permitirá volver a exportar y declarar componentes sin perder su asignación.

Cauldron React

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

Configuración de Cauldron React

Para usar las asignaciones de Cauldron con la extensión axe Accessibility Linter para VS Code o el complemento JetBrains, agregue las siguientes líneas a su archivo axe-linter.yml :

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

Ejemplo de Cauldron

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

<Button></Button>

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

Material UI

Actualmente se admiten las versiones 5.11.15 y posteriores de Material UI.

Configuración de Material UI

Para usar las asignaciones de Material UI con la extensión axe Accessibility Linter para VS Code o el complemento JetBrains, agregue las siguientes líneas a su archivo axe-linter.yml :

global-libraries:
  - '@mui/material'

Ejemplo de Material UI

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

<ImageList aria-colindex="1"/>

En su IDE (se muestra VS Code), verá este mensaje de error:

Si no configura la opción global-libraries en '@mui/material' en su archivo de configuración, no verá este error.

React Native

Configuración de React Native

Para usar las asignaciones de Cauldron con la extensión axe Accessibility Linter para VS Code o el complemento JetBrains, agregue las siguientes líneas a su archivo axe-linter.yml :

global-libraries:
  - react-native

Otra documentación para usar las asignaciones de React Native se encuentra en la sección Custom Component Linting for React Native.

Consulte también

Configurando axe DevTools Linter

Componentes personalizados y la extensión VS Code o el complemento JetBrains

Componentes personalizados y punto final REST

Linting de componentes personalizados para React Native