# Le sélecteur :focus-visible dans un bloc de formulaire, sans halo disgracieux

> Comment cibler uniquement la navigation au clavier avec :focus-visible dans un bloc de formulaire, sans afficher de contour disgracieux à chaque clic de souris.

- Auteur : Clément Hadrot
- Publié le : 2025-08-24
- Mis à jour le : 2025-08-24
- Catégorie : Blocs Gutenberg
- URL : https://wpmoderne.dev.wordpress-developpement.fr/blocs/focus-visible-bloc-formulaire-sans-halo/

## L’essentiel

- :focus applique un style à chaque interaction, souris comprise
- :focus-visible restreint l'effet aux cas où le clavier est réellement utilisé
- Le contour doit rester visible, jamais totalement supprimé sans alternative

Un bouton qui affiche un contour bleu épais à chaque clic de souris agace autant qu'il rassure un utilisateur au clavier. Ce billet répond à une question précise : comment un développeur de blocs peut-il proposer un contour de focus visible uniquement pour la navigation au clavier, sans toucher aux autres pseudo-classes de focus déjà utilisées ailleurs dans le projet ?

Le champ de formulaire d'un bloc personnalisé reçoit naturellement le focus du navigateur, que ce soit par un clic de souris, un appui sur la touche tabulation, ou un script qui appelle `.focus()` directement. La pseudo-classe `:focus` seule ne distingue pas ces cas ; c'est là que `:focus-visible` change la donne.

## Le comportement par défaut, et pourquoi il gêne

Sans intervention, la plupart des navigateurs appliquent déjà une heuristique proche de `:focus-visible` pour leur propre style natif, mais un bloc qui personnalise son style de focus avec la seule pseudo-classe `:focus` écrase ce comportement et applique son style à chaque interaction, y compris un simple clic de souris sur un champ déjà rempli :

```
.wp-block-monplugin-formulaire input:focus {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}
```

Ce style, bien intentionné pour l'accessibilité, devient vite perçu comme un défaut visuel par les utilisateurs à la souris, qui voient un halo épais apparaître à chaque champ cliqué.

## Remplacer :focus par :focus-visible

La correction directe consiste à remplacer la pseudo-classe pour ne cibler que les cas où le navigateur juge l'indication de focus nécessaire, typiquement la navigation au clavier :

```
.wp-block-monplugin-formulaire input:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

.wp-block-monplugin-formulaire input:focus:not(:focus-visible) {
	outline: none;
}
```

> L'essentiel à retenir : :focus applique un style à chaque interaction, souris comprise ; :focus-visible restreint l'effet aux cas où le clavier est réellement utilisé ; Le contour doit rester visible, jamais totalement supprimé sans alternative

La seconde règle neutralise explicitement le contour par défaut du navigateur quand le focus est actif mais non jugé « visible » par son heuristique, ce qui évite un double style incohérent entre navigateurs.

### Vérifier le support dans les navigateurs ciblés

La pseudo-classe `:focus-visible` bénéficie d'un support large dans les navigateurs modernes depuis plusieurs années. Sur un projet qui doit encore composer avec un navigateur ancien ne la reconnaissant pas, la règle utilisant `:focus-visible` est simplement ignorée par ce navigateur, qui continue d'appliquer son propre style natif de focus, sans régression grave.

## Adapter le contour au design du bloc

Le contour ne doit jamais disparaître entièrement sans alternative : c'est un repère indispensable pour une personne qui navigue au clavier. Un bloc de formulaire soigné peut choisir une couleur de contour cohérente avec sa charte, tout en conservant un contraste suffisant avec le fond du champ :

- Utiliser un décalage (`outline-offset`) pour éviter que le contour ne colle au bord du champ.
- Vérifier le contraste du contour sur fond clair et sur fond sombre si le bloc supporte les deux.
- Tester le rendu réel au clavier, avec la touche tabulation, plutôt que de se fier uniquement à l'aperçu visuel dans l'éditeur.

## Un test rapide pour valider le résultat

Le test le plus fiable reste manuel : cliquer sur un champ à la souris, puis appuyer sur la touche tabulation pour passer au champ suivant. Le premier geste ne doit produire aucun contour marqué, le second doit en afficher un clairement visible. Ce test simple suffit à confirmer que la distinction fonctionne comme attendu sur le bloc concerné.

> Un contour de focus supprimé sans alternative reste l'une des régressions d'accessibilité les plus fréquentes en revue de code : mieux vaut toujours vérifier ce que `outline: none` laisse réellement à la place avant de le valider.

## En résumé

Remplacer `:focus` par `:focus-visible` dans un bloc de formulaire règle en quelques lignes un inconfort visuel réel, sans sacrifier l'accessibilité au clavier. La règle à retenir reste simple : le contour doit disparaître pour la souris, jamais pour le clavier, et un test manuel rapide suffit à vérifier que le bloc respecte bien cette distinction avant sa mise en production.