Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Support complex aria-labelledby queries

Ouverte
  • Quelque chose ne va pas ?
#1,260 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript, react
Domaine
frontend, testing-qa

Piste de recherche

Commencez par suivre le point d’entrée getByLabelText et la manière dont il résout actuellement les associations de labels. Utilisez l’exemple proposé de pending-button comme test de régression, y compris plusieurs IDs aria-labelledby séparés par des espaces. Le travail est terminé lorsque la requête résout le label accessible combiné et que le test vérifie l’attribut aria-disabled du bouton.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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');
});
Langage dominant
JavaScript
Étoiles
19.7k
Forks
1.2k
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de testing-library/react-testing-library

Toutes les issues de testing-library/react-testing-library

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.