Pular para o conteúdo principal

Testando formulários com acessibilidade

Existem algumas técnicas que podem ser utilizadas para testar formulários com acessibiliade utilizando React e a testing-library. Abaixo, veja sobre input's e sobre botões de envio.

Input's​

Componente​

<label htmlFor="name">Name</label>
<input
  id="name"
  onChange={onFieldChange}
  placeholder="Enter your name"
/>

Procurando pelos elementos​

user.type(screen.getByRole('textbox', { name: 'Name' }), 'Test');
Nome acessível

O { name: "Name" } procura pelo nome acessível (label, por exemplo) e não pelo atributo name do input.

Submit Buttons​

Use os métodos do tipo *ByRole:

Componente​

<button type='submit'>Sign up</button>

Procurando pelos elementos​

screen.getByRole('button', { name: 'Sign up' });
Nome acessível

O nome acessível dessa vez é o texto atual do botão. Perceba que se adicionarmos um atributo aria-label no botão, o nome acessível passa a ser o conteúdo do atributo aria-label.

Referências​