Use `:focus-visible` instead of `:focus` in stylesheets
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Accessibilité débutants
- 38/100
- Type d'issue
- Fonctionnalité
- Clarté
- Plutôt claire
- Activité
- À l'abandon
- Stack technique
- css, react
- Domaine
- accessibility, frontend
Piste de recherche
Commencez par localiser les feuilles de style des onglets et les règles :focus existantes mentionnées par l’issue. Vérifiez le comportement actuel du focus avec des interactions au clavier et au pointeur, y compris dans Safari, et examinez les articles liés pour le modèle de compatibilité ; le travail est terminé lorsque le focus clavier conserve un style visible, tandis que le focus du pointeur n’affiche pas inutilement les anciens styles.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
We should use :focus-visible instead of :focus to style the tabs on focus. This pseudoclass is only true when focus is gained via keyboard navigation, not by any other method, and is how focus is handled on native elements, like buttons and links.
This isn't supported in Safari, so we need to perform some acrobatics to keep the old styles working in that browser.
button:focus {
/* our focus styles */
}
button:focus:not(:focus-visible) {
/* UNDO our focus styles */
}
Read more:
- Langage dominant
- JavaScript
- Étoiles
- 3.1k
- Forks
- 455
- Métriques de merge des PR
- 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
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de reactjs/react-tabs
-
Difficulté 3/5 1-2 jours Accessibilité débutants 25/100
reactjs/react-tabs#584 ·
-
className default is lost when props.className is undefined in UncontrolledTabsPeut-être pris @Shiva903-hue l’a pris il y a 268 jours. Ouverte
Difficulté 2/5 1-3 heures Accessibilité débutants 45/100
reactjs/react-tabs#581 · 3 commentaires ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 35/100
reactjs/react-tabs#571 ·
-
Support hiding of all TabPanelsOuverte
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
reactjs/react-tabs#525 · 1 commentaire · 1 réaction ·
-
Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelinesPeut-être à nouveau libre @Jastagar l’a pris il y a 1049 jours, et aucune pull request n’est ouverte. Ouverte
Difficulté 3/5 1-2 jours Accessibilité débutants 35/100
reactjs/react-tabs#521 · 3 commentaires ·
Toutes les issues de reactjs/react-tabs
Issues similaires
-
bug MVP
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
saayam-for-all/webapp#1911 ·
Les mainteneurs répondent en général sous 1 jour
-
[Focus] Accessibility (a11y) [Package] Grid [Type] Bug
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
Les mainteneurs répondent en général sous 1 jour
-
Cancelled query leaves stale row index; next query on the connection returns leading empty slotsPeut-être pris @pislm l’a pris aujourd’hui. Ouverte
Difficulté 2/5 1-3 heures Accessibilité débutants 86/100
Les mainteneurs répondent en général sous 7 jours
-
Harden bayesian-waves-bg.js: add prefers-reduced-motion, pointer-events guard, and hidden-tab pauseOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 85/100
-
Difficulté 1/5 Moins d'une heure Accessibilité débutants 90/100
njitacm/njit-acm-website#109 ·