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

keyboard accessibility of https://reactcommunity.org/react-tabs/

Ouverte
  • Quelque chose ne va pas ?
#479 5 commentaires 1 réaction 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
45/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
javascript, react
Domaine
accessibility, frontend

Piste de recherche

Commencez sur la page de démonstration à l’adresse https://reactcommunity.org/react-tabs/ et reproduisez la séquence au clavier décrite dans l’issue, y compris le source textarea masqué et l’état du focus de tab/tablist. Le travail est terminé lorsque les utilisateurs du clavier peuvent quitter normalement la zone source, que le contenu masqué ne fait pas partie du cycle de tabulation et que le focus sur tab ou tablist est indiqué visuellement.

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

Description

currently, there are two quite fundamental keyboard access issues on the demo page at https://reactcommunity.org/react-tabs/

  • the <textarea> containing the source swallows Tab presses. once focus is in the textarea, there's no way for a keyboard user to jump back out. worse, even if the related "view source" checkbox is not checked, i.e. the textarea isn't visible, it still receives keyboard focus/is still in the regular tab cycle
  • when the tab/tablist receives focus, there is no visible focus indication that this is actually the case

Video showing the issue (using Chrome on Windows)

https://user-images.githubusercontent.com/895831/173188543-011a8b79-d55b-4eeb-b907-1fb9b0033cf9.mp4

0:00 - 0:25 tabbing through the page. note the focus disappears after the "View source" checkbox. ticking the checkbox with the mouse, and carrying on tabbing, shows that tab was in the textarea (and it's stuck in there)
0:25 - 0:32 focus is on the tab/tablist, can use cursor keys to change active tab. but there's no visible indication that focus is indeed on that tab/tablist

Langage dominant
JavaScript
Étoiles
3.1k
Forks
455
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

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 reactjs/react-tabs

Toutes les issues de reactjs/react-tabs

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.