tab component keyboard accessibility

Ouverte Adaptée aux débutants
#775 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
68/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript

Piste de recherche

Commencez par localiser le composant d’onglets et ses tests d’interaction au clavier, puis comparez le comportement actuel avec l’interaction au clavier pour les onglets de WAI-ARIA liée dans l’issue. Ajoutez la navigation entre les onglets avec les flèches, Home et End. Le travail est terminé lorsque les personnes qui utilisent le clavier peuvent accéder à chaque onglet avec ces touches et que le comportement actuel des onglets fonctionne toujours.

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

Description

accessibility bug

According to https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction we should be able to use arrows and Home / End to navigate between individual tabs.

Currently that is not possible.

It sais on the same page that:

Don't use tabs for site navigation. If each "tab" loads a different page or route, it's a navigation menu. Mark it up as

with links and put aria-current="page" on the current one. Screen reader users expect tab semantics to mean switching content in place.

But I don't think we should worry about it. On the component level we have no way how to detect it and in the context of SPA the concept of a page is blurry anyway.

Langage dominant
TypeScript
Étoiles
23
Forks
10
Merge moyen
5 j 12 h
PR mergées (30 j)
9

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

  • Aucun Dockerfile ni fichier Docker Compose
  • Aucun modèle de pull request
  • Aucun 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.

Autres issues de react-ui-org/react-ui

Toutes les issues de react-ui-org/react-ui

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

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