Bibliotecas de Componentes Pré-configuradas

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 mapeamentos pré-definidos para várias bibliotecas de componentes populares no Axe DevTools Linter

Not for use with personal data

O Axe DevTools Linter vem com suporte embutido para várias bibliotecas de componentes populares. Quando ativado, o uso dos componentes dessas bibliotecas é testado quanto à acessibilidade da mesma forma que os elementos HTML nativos.

Introdução

Os componentes definidos pelos seguintes pacotes são atualmente suportados:

Nome do pacote NPM	Para mais informações
@deque/cauldron-react	Cauldron React: Biblioteca de Componentes Acessíveis
@mui/material	Material UI
react-native	React Native

note

A biblioteca de componentes pré-configurada para Material UI não inclui todos os componentes definidos no Material UI; inclui apenas aqueles definidos no pacote @mui/material.

Para ativar a análise de componentes de biblioteca, adicione o nome do pacote NPM da biblioteca ao global-libraries array no seu axe-linter.yml arquivo:

global-libraries:
  - '@mui/material'

important

Em YAML, strings que começam com @ devem ser colocadas entre aspas, pois @ é um caractere reservado.

Ou a configuração equivalente em JSON (para o serviço REST) é mostrada abaixo:

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

Qualquer componente com o mesmo nome de um componente da biblioteca global será tratado como esse componente da biblioteca, permitindo reexportar e redefinir componentes sem perder seu mapeamento.

Cauldron React

Cauldron React versão 4.7.0 e posteriores são atualmente suportadas.

Configuração do Cauldron React

Para usar os mapeamentos do Cauldron com a extensão de validação de acessibilidade Axe para VS Code ou o plugin JetBrains, adicione as seguintes linhas ao seu axe-linter.yml arquivo:

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

Exemplo de Cauldron

O exemplo a seguir mostra um Button do Cauldron sem conteúdo de texto, o que é um erro de acessibilidade:

<Button></Button>

No seu IDE (VS Code é mostrado) após você ter ativado a biblioteca Cauldron na sua configuração, verá um erro como o seguinte:

Material UI

Material UI versão 5.11.15 e posteriores são atualmente suportadas.

note

Os mapeamentos pré-definidos incluem apenas componentes definidos no pacote @mui/material, não todos os componentes definidos no Material UI.

Configuração do Material UI

Para usar os mapeamentos do Material UI com a extensão de validação de acessibilidade Axe para VS Code ou o plugin JetBrains, adicione as seguintes linhas ao seu axe-linter.yml arquivo:

global-libraries:
  - '@mui/material'

Exemplo de Material UI

O exemplo a seguir mostra um erro de acessibilidade onde aria-colindex está sendo usado incorretamente com o componente Material UI ImageList: