Acessibilidade

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Testando Acessibilidade

Um dos princípios orientadores das APIs da Testing Library é que elas devem permitir que você teste seu aplicativo da forma como seus usuários o utilizam, incluindo através de interfaces de acessibilidade como leitores de tela.

Consulte a página sobre consultas para detalhes de como usar consultas HTML semânticas podem garantir que seu aplicativo funcione com as APIs de acessibilidade do navegador.

getRoles

Esta função permite iterar sobre os papéis ARIA implícitos representados em uma determinada árvore de nós DOM.

Ela retorna um objeto indexado por nome de papel, onde cada valor é um array de elementos que possuem esse papel ARIA implícito.

Veja ARIA in HTML para mais informações sobre papéis ARIA implícitos.

import {getRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`
console.log(getRoles(nav))

// Object {
//   navigation: [<nav />],
//   list: [<ul />],
//   listitem: [<li />, <li />]
// }

isInaccessible

Esta função calcula se um determinado elemento deve ser excluído da API de acessibilidade pelo navegador. Ela implementa todos os critérios OBRIGATÓRIOS da seção Excluding Elements from the Accessibility Tree do WAI-ARIA 1.2, exceto a verificação do atributo role.

Ela é definida como:

function isInaccessible(element: Element): boolean

logRoles

Esta função auxiliar pode ser usada para imprimir uma lista de todos os papéis ARIA implícitos dentro de uma árvore de nós DOM, onde cada papel contém uma lista de todos os nós que correspondem a esse papel. Isso pode ser útil para encontrar formas de consultar o DOM em teste com getByRole.

import {logRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`

logRoles(nav)

Resultado:

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------