Support complex aria-labelledby queries

Aberta
  • Algo errado?
#1,260 3 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
frontend, testing-qa

Direção de pesquisa

Comece rastreando o ponto de entrada getByLabelText e como ele resolve atualmente as associações de label. Use o exemplo proposto de pending-button como teste de regressão, incluindo vários IDs de aria-labelledby separados por espaços. O trabalho estará concluído quando a consulta resolver o label acessível combinado e o teste verificar o atributo aria-disabled do botão.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Describe the feature you'd like:

I'd like getByLabelText to resolve the associated elements of aria-labelledby. As I'm writing this it occurs to me that this might be too costly and perhaps better suited to something like axe.

Describe alternatives you've considered:

I've resorted to a combination of getByRole + getByText and checking IDs.

Teachability, Documentation, Adoption, Migration Strategy:

The summarised/pseudo code looks something like:

let contentId = 'content-id';
let spinnerId = 'spinner-id';

return (
  <button
    aria-disabled={props.pending ? true : undefined}
    aria-labelledby={props.pending ? `${contentId} ${spinnerId}` : undefined}
  >
    <span id={contentId}>{props.children}</span>
    {props.pending && (
      <span id={spinnerId} aria-label="pending" aria-hidden>
        ...
      </span>
    )}
  </button>
);

The desired test would look something like:

it('supports "pending" prop', () => {
  let { getByLabelText } = render(<Button pending>Submit</Button>);
  expect(getByLabelText(`Submit ${PENDING_LABEL}`)).toHaveAttribute('aria-disabled', 'true');
});
Linguagem predominante
JavaScript
Estrelas
19.7k
Forks
1.2k
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de testing-library/react-testing-library

Todas as issues de testing-library/react-testing-library

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.