reactjs / reactjs/react.dev

[Beta] Inaccessible UI Components

Ouverte
#4,696 6 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
JavaScript
Étoiles
11.8k
Forks
7.9k
Merge moyen
1 j 11 h
PR mergées (30 j)
11

Description

Accordion a11y issues

  • When an Accordion trigger is focused, pressing down/up should focus the next/previous trigger.
  • When an Accordion trigger is focused, pressing space should expand/contract its panel.
  • The Accordion trigger should be a <button> rather than a <a>.
  • The Accordion trigger should be wrapped in a h tag.
  • The Accordion trigger should have an aria-expanded attr set to true when open.
  • The Accordion trigger should have an aria-controls attr.

The same goes for the Tabs component (found in the sidebar and on code blocks), it fails a11y in many ways. I'd suggest you look at UI libs like Radix or ReachUI which provide high-quality, accessible UI components.

Guide de contribution

Ouvrir le guide de contribution

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.

Piste de recherche

Commencez par localiser les composants Accordion et Tabs utilisés dans la barre latérale et les blocs de code, puis comparez leur comportement aux références de Radix et ReachUI liées dans l’issue. La tâche est terminée lorsque les interactions clavier indiquées ainsi que les exigences relatives à button, heading, aria-expanded et aria-controls sont prises en compte pour les deux composants.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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